Project build fails with mui-tiptap v1.10.0: Module parse failed: 'import' and 'export' may appear only with 'sourceType: module' (1:0)

[waza-ari]

Describe the bug

When building a NextJS project, the following error message appears since v1.10.0 (was working with v1.9.0, and pinning the version to v1.9.0 fixes the issue):

./node_modules/.pnpm/mui-tiptap@1.10.0_clwvon473fdcza57pybvh34zla/node_modules/mui-tiptap/dist/esm/index.js
Module parse failed: 'import' and 'export' may appear only with 'sourceType: module' (1:0)
File was processed with these loaders:
 * ./node_modules/.pnpm/next@14.2.3_react-dom@18.3.1_react@18.3.1__react@18.3.1/node_modules/next/dist/build/webpack/loaders/next-flight-client-module-loader.js
 * ./node_modules/.pnpm/next@14.2.3_react-dom@18.3.1_react@18.3.1__react@18.3.1/node_modules/next/dist/build/webpack/loaders/next-swc-loader.js
You may need an additional loader to handle the result of these loaders.
> export { default as ControlledBubbleMenu, } from "./ControlledBubbleMenu";
| export { default as LinkBubbleMenu, } from "./LinkBubbleMenu";
| export { default as MenuBar } from "./MenuBar";

Import trace for requested module:
./node_modules/.pnpm/mui-tiptap@1.10.0_clwvon473fdcza57pybvh34zla/node_modules/mui-tiptap/dist/esm/index.js
./src/app/intern/einweisungen/anbieten/[offer_id]/create.tsx

Expected behavior

I'm expecting to build my project after updating to v1.10.0

System (please complete the following information)

• mui-tiptap version: v1.10.0 (v1.9.0 is confirmed working)
• tiptap version: 2.4.0
• Browser: N/A
• Node version: 22.1.0
• OS: macOS 14.6.1
• Copy-paste your extensions array used for the editor:

[sjdemartini]

This must be related to #259, attempting to fix #256. Seems supporting both node and NextJS environments may not be possible due to ESM incompatibilities of the underlying mui packages (see #258 (comment)). 😕

I can try to take a look later, and perhaps will just revert the recent change that forced the node env to use CJS, given NextJS's popularity. Perhaps the workaround on node could be to use require instead of import for mui-tiptap. Open to any suggestions about how best to support both NextJS and node!

[waza-ari]

Unfortunately I'm not much of an expert on those topics, so not much I can do in terms of suggestions I'm afraid. Happy to test something though if that can be of any help for you

[sourabhmandal]

one solution is to use downgraded version. I am using mui-tiptap@1.8.0. which seems to work with NextJS

[sjdemartini]

@sourabhmandal I believe up until 1.9.5 should work on NextJS still, as the change I'm mentioning above was released in https://github.com/sjdemartini/mui-tiptap/releases/tag/v1.9.6. But I do plan to get NextJS compatibility working again.

[sjdemartini]

Mentioned this in a different thread but including here too: yesterday @mui/icons-material published a version that properly adds ESM support https://github.com/mui/material-ui/releases/tag/v6.1.0, so perhaps it's possible to get things working and avoid the issues I mentioned here #258 (comment).

[mohanlokesh]

Mentioned this in a different thread but including here too: yesterday @mui/icons-material published a version that properly adds ESM support https://github.com/mui/material-ui/releases/tag/v6.1.0, so perhaps it's possible to get things working and avoid the issues I mentioned here #258 (comment).

Still I am facing the issue in nextjs with typescript. Can you please let me know how to fix this error?

I have tried to implement all-in-one component from the example.

Version Details

• mui-tiptap version: tried both [^1.10.1] and [1.11.0] that publised a day ago.
• tiptap version: [^2.6.6],
• next version - [^14.2.9],
• Browser: [Chrome]
• Node version: [v20.16.0]
• NPM : [10.8.1]
• OS: [Windows]

[waza-ari]

@mohanlokesh pin the version to 1.9.5, the breaking change was introduced with 1.10..

[mohanlokesh]

@mohanlokesh pin the version to 1.9.5, the breaking change was introduced with 1.10..

Got it! I was just wondering if there’s any update on a solution for the latest version. I’ve noticed that there have been about four releases since this issue was reported, and I'm also looking into MUI 6, which isn’t supported in the earlier versions.

[sjdemartini]

There isn't an update yet that resolves things for NextJS. I'm currently planning to revert the change the added support for Node environments that use ts-node/esm (resolving #256), in favor of bringing back NextJS support. Though I'd still ultimately like to support both, if possible—if anyone has suggestions to this end, please let me know.

[sjdemartini]

@waza-ari @mohanlokesh I believe this should now be resolved in v1.12.0. Please give it a try and let me know if it works for you.

[mohanlokesh]

@sjdemartini yes it worked, thank you so much 🎁🎁🥳🥳🎂

[mohanlokesh]

@sjdemartini if you have any chance can you please check this issue? 265 I am also having the same issue on editor with drawer function. Link, Color Picker, and table options are not showing above the drawer or model.