Error [ERR_REQUIRE_ESM]: require() of ES Module while using NX monorepo

[skyf0xx]

Describe the bug
Error on compile while using NX mono-repo

This issue does not happen with a vanilla NextJS app. However, it happens on NX Monorepo

To Reproduce
Install NX
Create a new app: nx g @nx/next:app my-app
Install BLocknote: npm i @blocknote/react

Add the code to index.tsx of your app

import styles from './index.module.css';
import { Inter } from 'next/font/google';
import { BlockNoteView, useBlockNote } from '@blocknote/react';
import '@blocknote/core/style.css';

const inter = Inter({ subsets: ['latin'] });

export function Index() {
  const editor = useBlockNote({
    onEditorContentChange: (editor) => {
      // Log the document to console on every update
    },
  });
  return (
    <div className={styles.page}>
      <div className="wrapper">
        <div className="container">
          <div id="welcome">
            <h1>
              <span> Hello there, </span>
            </h1>
          </div>
          <div>
            {' '}
            <BlockNoteView editor={editor} />
          </div>
        </div>
      </div>
    </div>
  );
}

export default Index;

Misc

• Node version:18.11.0 and 20.3.0
• Package manager: tried with NPM and Yarn

[skyf0xx]

I am not sure whether to list this as a bug since it happens specifically with NX.

[guptabhaskar]

I'm also facing the same issue, is there a good way to fix/avoid this?

I added this to my next.config.js which fixed the issue but I don't think this is a good idea for the long term:
experimental: { esmExternals: true }

Also, this still doesn't allow me to make a build.

[YousefED]

This should be addressed here! #274

Let me know if you're still running into this issue

[Ianduha13]

Hello everyone, I'm having the same issue and i dont really understand the solution, someone can give me a little bit more of explanation?
I"m currently working on passing a project from next 12.4 to 13.5.4

My error is similar but not exactly the same:

Error: require() of ES Module /Users/ianduhamelhayes/workspace/.../node_modules/rehype-parse/index.js from /Users/ianduhamelhayes/workspace/.../node_modules/@blocknote/core/dist/blocknote.umd.cjs not supported.
Instead change the require of index.js in /Users/ianduhamelhayes/workspace/.../node_modules/@blocknote/core/dist/blocknote.umd.cjs to a dynamic import() which is available in all CommonJS modules.

[YousefED]

Are you using the latest version of blocknote @Ianduha13 ?

[skyf0xx]

@Ianduha13 If you are on NextJS, please see this: https://www.blocknotejs.org/docs/nextjs

The issue was server side rendering: #274