tiptap: Error: Must use import to load ES Module - @tiptap/extension-table
What’s the bug you are facing?
After I upgraded to new tiptap version, an error occured:
Must use import to load ES Module: /Users/datnguyen/Documents/Projects/sapp-enduser/node_modules/prosemirror-tables-contently/dist/index.js require() of ES modules is not supported. require() of /Users/datnguyen/Documents/Projects/sapp-enduser/node_modules/prosemirror-tables-contently/dist/index.js from /Users/datnguyen/Documents/Projects/sapp-enduser/node_modules/@tiptap/extension-table/dist/tiptap-extension-table.cjs.js is an ES module file as it is a .js file whose nearest parent package.json contains "type": "module" which defines all .js files in that package scope as ES modules. Instead rename index.js to end in .cjs, change the requiring code to use import(), or remove "type": "module" from /Users/datnguyen/Documents/Projects/sapp-enduser/node_modules/prosemirror-tables-contently/package.json.
Which browser was this experienced in? Are any special extensions installed?
MacOS 12.3.1 Chrome Version 102.0.5005.115 (Official Build) (arm64) Node v14.18.3 NPM 6.14.15
{
"@tiptap/extension-color": "^2.0.0-beta.9",
"@tiptap/extension-image": "^2.0.0-beta.24",
"@tiptap/extension-link": "^2.0.0-beta.35",
"@tiptap/extension-table": "^2.0.0-beta.46",
"@tiptap/extension-table-cell": "^2.0.0-beta.20",
"@tiptap/extension-table-header": "^2.0.0-beta.22",
"@tiptap/extension-table-row": "^2.0.0-beta.19",
"@tiptap/extension-text-align": "^2.0.0-beta.29",
"@tiptap/extension-text-style": "^2.0.0-beta.23",
"@tiptap/extension-underline": "^2.0.0-beta.22",
"@tiptap/starter-kit": "^2.0.0-beta.189",
"@tiptap/vue-2": "^2.0.0-beta.83",
}
How can we reproduce the bug on our side?
Install the same package versions above.
Can you provide a CodeSandbox?
No response
What did you expect to happen?
Don’t throw the error.
Anything to add? (optional)
Did you update your dependencies?
- Yes, I’ve updated my dependencies to use the latest version of all packages.
Are you sponsoring us?
- Yes, I’m a sponsor. 💖
About this issue
- Original URL
- State: closed
- Created 2 years ago
- Reactions: 3
- Comments: 16 (5 by maintainers)
I pushed a potential fix for this issue that should provide a CJS solution for
prosemirror-tables. It will be included in the next release. I’ll let you know when it’s released.We are experience exactly the same thing:
require() of ES Module /home/simon/Dev/hokify/hokify-server/node_modules/prosemirror-tables-contently/dist/index.js from /home/simon/Dev/hokify/hokify-server/node_modules/@tiptap/extension-table/dist/tiptap-extension-table.cjs.js not supported. index.js is treated as an ES module file as it is a .js file whose nearest parent package.json contains "type": "module" which declares all .js files in that package scope as ES modules. Instead rename index.js to end in .cjs, change the requiring code to use dynamic import() which is available in all CommonJS modules, or change "type": "module" to "type": "commonjs" in /home/simon/Dev/hokify/hokify-server/node_modules/prosemirror-tables-contently/package.json to treat all .js files as CommonJS (using .mjs for all ES modules instead).I guess prosemirror-tables-contently is an ESM module, but exstension-table is not?
We are using nuxt2 with vue2, which uses webpack and esm modules under the hood actually. so maybe the issue is even that tiptap-exstension-table.cjs is loaded insteda of the es version? not sure what’s going on, but it’s defintility related to the latest release.
# Possbile fix 1 removing “type”: module from prosemirror-tables-contently’s package.json fixes the issue on my side
# possible fix 2 - the nuxt way
adding prosemirror-tables-contently to transpile config optoins in nuxt fixes the issue too! Which actually lets me believe that the nuxt webpack4 setup is not really using es modules… my fault 😉nope sorry, the file cache played me wrong here, it was still the “type”: “module” removable that let this thing working# real possible fix 2 - the nuxt way adding borth ‘@tiptap/extension-table’ and ‘prosemirror-tables-contently’ to transpile config option in nuxt fixes it (for now 😉)! nuxt.config.js:
We just published a new release yesterday. Could you please reinstall node modules and give it another try?
We weren’t able to publish a release yet. I’ll be away on vacation from next week until the the 5th of July so I won’t be able to respond. My colleagues @svenadlung @montapro or @mkriegeskorte will assist you in behalf of me!
I’ll try to keep track from my phone when I’m away.
I’m facing the same issue,
In my case I think is more related to this issue #2854
Seems like the prosemirror-tables-contently package is not exporting commonjs files, see here: https://github.com/ProseMirror/prosemirror-tables/issues/96#issuecomment-1162151390
@mbostler could you implement a commonjs solution for those who are using cjs?