search

sjdemartini / mui-tiptap

A Material UI (MUI) styled WYSIWYG rich text editor, using Tiptap
MIT License
319 stars 43 forks source link

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

Closed waza-ari closed 2 months ago

waza-ari commented 2 months ago

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)

sjdemartini commented 2 months ago

This must be related to https://github.com/sjdemartini/mui-tiptap/pull/259, attempting to fix https://github.com/sjdemartini/mui-tiptap/issues/256. Seems supporting both node and NextJS environments may not be possible due to ESM incompatibilities of the underlying mui packages (see https://github.com/sjdemartini/mui-tiptap/pull/258#issuecomment-2303068294). 😕

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 commented 2 months ago

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 commented 2 months ago

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

sjdemartini commented 2 months ago

@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 commented 2 months ago

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 https://github.com/sjdemartini/mui-tiptap/pull/258#issuecomment-2303068294.

mohanlokesh commented 2 months ago

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.

{033A1405-6181-433C-9FD3-418E16905A75}

Version Details

waza-ari commented 2 months ago

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

mohanlokesh commented 2 months ago

@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 commented 2 months ago

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 https://github.com/sjdemartini/mui-tiptap/issues/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 commented 2 months ago

@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 commented 2 months ago

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

mohanlokesh commented 2 months ago

@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.