Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Remove type: "commonjs" to fix importing in NextJS #270

Merged
merged 3 commits into from
Sep 15, 2024

Conversation

sjdemartini
Copy link
Owner

When "type": "commonjs" is specified in our package.json, it apparently causes the following problem in NextJS:

Module parse failed: 'import' and 'export' may appear only with 'sourceType: module' (1:0)
> export { default as ControlledBubbleMenu, } from "./ControlledBubbleMenu";
| export { default as LinkBubbleMenu, } from "./LinkBubbleMenu";
| export { default as MenuBar } from "./MenuBar";

This is odd, since we indeed are using "commonjs" type, as that's the default (https://nodejs.org/api/packages.html#type), but it seems that fortunately merely omitting this resolves import errors in NextJS, and still supports NodeJS, based on my testing.

Should resolve #264, removing one of the changes from #259, while still hopefully keeping #256 fixed.


Note that I did try other approaches in attempting to fix NextJS and still support Node:

  1. Using tsup/rollup again like Use tsup to build project compatible with CJS and ESM, and validate in CI #258, with @mui/icons-material bumped to v6 for supposed "proper" ESM support Project build fails with mui-tiptap v1.10.0: Module parse failed: 'import' and 'export' may appear only with 'sourceType: module' (1:0) #264 (comment), but that still caused problems in the Node context. It seems icons-material still doesn't use .js extensions, so is still not correct.
  2. Switch to "type": "module", using .js extensions for all relative imports in the project (enforced/automated with the eslint plugin eslint-plugin-require-extensions). This seemed like an improvement, but still seems it would require some workarounds for lodash and/or mui/icons-material like in Use tsup to build project compatible with CJS and ESM, and validate in CI #258 in the Node context, as those imports of the third party dependencies failed when importing mui-tiptap.

When `"type": "commonjs"` is specified in our package.json, it
apparently causes the following problem in NextJS:

```
Module parse failed: 'import' and 'export' may appear only with 'sourceType: module' (1:0)
> export { default as ControlledBubbleMenu, } from "./ControlledBubbleMenu";
| export { default as LinkBubbleMenu, } from "./LinkBubbleMenu";
| export { default as MenuBar } from "./MenuBar";
```

This is odd, since we indeed *are* using "commonjs" type, as that's the
default, but it seems that fortunately merely omitting this resolves
import errors in NextJS, and still supports NodeJS.

Should resolve #264,
removing one of the changes from
#259, while still
hopefully keeping #256
fixed.
@sjdemartini sjdemartini merged commit 2c19fec into main Sep 15, 2024
1 check passed
@sjdemartini sjdemartini deleted the fix-nextjs-import-mui-tiptap branch September 15, 2024 17:22
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
1 participant