Can't import the named export 'LIST_NEST_MODE_HTML' from non EcmaScript module (only default export is available)
JGuest777 opened this issue · 14 comments
Not able to import into Nextjs app:
node -v: 14.18.1
yarn -v: 1.22
react: 17.0.1
The same for me in React app based on CRA
I cannot reproduce this. Which versions of the module are you using?
Minimal next.js page:
import {PortableText} from '@portabletext/react'
const Home = () => {
return (
<PortableText value={
[{
_type: 'block',
children: [{_type: 'span', text: 'Hello from Portable Text.'}]
}]
} />
)
}
export default HomeMinimal create react app:
import React from 'react';
import ReactDOM from 'react-dom';
import {PortableText} from '@portabletext/react';
ReactDOM.render(
<React.StrictMode>
<PortableText value={
[{
_type: 'block',
children: [{_type: 'span', text: 'Hello from Portable Text.'}]
}]
} />
</React.StrictMode>,
document.getElementById('root')
);This is happening for me as well. Using the Gatsby Blog Starter pulled down in April 2020.
"react": "16.13.1"
"gatsby": "2.24.49"
It's attempting to use the .mjs export since I'm using ESM import/export syntax in the project.
Here is the error when building:
ERROR #98123 WEBPACK
web: Generating development JavaScript bundle failed
web: Can't import the named export 'LIST_NEST_MODE_HTML' from non EcmaScript module (only default export is available)
web: File: node_modules/@portabletext/react/dist/react-portable-text.mjs
web: ERROR #98123 WEBPACK
web: Generating development JavaScript bundle failed
web: Can't import the named export 'buildMarksTree' from non EcmaScript module (only default export is available)
web: File: node_modules/@portabletext/react/dist/react-portable-text.mjs
web: ERROR #98123 WEBPACK
web: Generating development JavaScript bundle failed
web: Can't import the named export 'createContext' from non EcmaScript module (only default export is available)
web: File: node_modules/@portabletext/react/dist/react-portable-text.mjs
web: ERROR #98123 WEBPACK
web: Generating development JavaScript bundle failed
web: Can't import the named export 'isPortableTextBlock' from non EcmaScript module (only default export is available)
web: File: node_modules/@portabletext/react/dist/react-portable-text.mjs
web: ERROR #98123 WEBPACK
web: Generating development JavaScript bundle failed
web: Can't import the named export 'isPortableTextListItemBlock' from non EcmaScript module (only default export is available)
web: File: node_modules/@portabletext/react/dist/react-portable-text.mjs
web: ERROR #98123 WEBPACK
web: Generating development JavaScript bundle failed
web: Can't import the named export 'isPortableTextToolkitList' from non EcmaScript module (only default export is available)
web: File: node_modules/@portabletext/react/dist/react-portable-text.mjs
web: ERROR #98123 WEBPACK
web: Generating development JavaScript bundle failed
web: Can't import the named export 'isPortableTextToolkitSpan' from non EcmaScript module (only default export is available)
web: File: node_modules/@portabletext/react/dist/react-portable-text.mjs
web: ERROR #98123 WEBPACK
web: Generating development JavaScript bundle failed
web: Can't import the named export 'isPortableTextToolkitTextNode' from non EcmaScript module (only default export is available)
web: File: node_modules/@portabletext/react/dist/react-portable-text.mjs
web: ERROR #98123 WEBPACK
web: Generating development JavaScript bundle failed
web: Can't import the named export 'nestLists' from non EcmaScript module (only default export is available)
web: File: node_modules/@portabletext/react/dist/react-portable-text.mjs
web: ERROR #98123 WEBPACK
web: Generating development JavaScript bundle failed
web: Can't import the named export 'spanToPlainText' from non EcmaScript module (only default export is available)
web: File: node_modules/@portabletext/react/dist/react-portable-text.mjs
web: ERROR #98123 WEBPACK
web: Generating development JavaScript bundle failed
web: Can't import the named export 'useContext' from non EcmaScript module (only default export is available)
web: File: node_modules/@portabletext/react/dist/react-portable-text.mjs
web: ERROR #98123 WEBPACK
web: Generating development JavaScript bundle failed
web: Can't import the named export 'useMemo' from non EcmaScript module (only default export is available)
web: File: node_modules/@portabletext/react/dist/react-portable-text.mjs
web: ERROR #98123 WEBPACK
web: Generating development JavaScript bundle failed
web: Can't import the named export 'useMemo' from non EcmaScript module (only default export is available)
web: File: node_modules/@portabletext/react/dist/react-portable-text.mjs
web: ERROR #98123 WEBPACK
web: Generating development JavaScript bundle failed
web: Can't import the named export 'useMemo' from non EcmaScript module (only default export is available)
web: File: node_modules/@portabletext/react/dist/react-portable-text.mjs
web: ERROR #98123 WEBPACK
web: Generating development JavaScript bundle failed
web: Can't reexport the named export 'toPlainText' from non EcmaScript module (only default export is available)
web: File: node_modules/@portabletext/react/dist/react-portable-text.mjs
web: failed Re-building development bundle - 0.205sSame is happening for me but only on while building storybook.
"react": "17.0.2",
"@storybook/addon-actions": "6.3.9",
"@storybook/addon-essentials": "6.3.9",
"@storybook/addon-links": "6.3.9",
"@storybook/addon-storysource": "6.3.9",
"@storybook/addons": "6.3.9",
"@storybook/react": "6.3.9",
"@storybook/theming": "6.3.9",
@JGuest777 What version of next are you running and what do you see when you run npm ls webpack? I was able to replicate this up to and including in next@10.0.6-canary.5. In those versions, there was a dependency on webpack@4.44.1. As of next@10.0.6-canary.6, that peer dependency is resolved and I can no longer replicate the error. Hopefully your experience is the same.
next v10.0.6
that npm command returns (empty)
Will upgrade to canary.6 and try!
Thanks for confirming. If I was on the right track then v10.0.6 should have worked fine, so I suspect something else. I wouldn't recommend the canary of such an old build, though you could try a later minor version of v10 or potentially even v11. I'll keep looking.
@holdercp For your case, it might be related to the version of React. It appears React >= 17 is required.
@red-runner Found the solution here for Storybook. Worked for me.
Nice one @carlosganzerla worked for me!! 🥇 💐
node -v: 16.15.0
npm -v: 8.5.5
react: 17.0.2
@portabletext/react: 1.0.6
Still the same for me
I've spin up a codesandbox here for an old CRA but I can't replicate the issue, however, I can just like others here in my local setup. Probably something to do with other packages or a mixed of other commonjs requires. Idk.
I ran into this issue with version 1.0.6 of @portabletext/react. Upgrading to 2.0.1 resolved the issue. Full error I was receiving:
Server Error
SyntaxError: Named export 'LIST_NEST_MODE_HTML' not found. The requested module '@portabletext/toolkit' is a CommonJS module, which may not support all module.exports as named exports.
CommonJS modules can always be imported via the default export, for example using:
import pkg from '@portabletext/toolkit';
const { nestLists, LIST_NEST_MODE_HTML, isPortableTextToolkitList, isPortableTextListItemBlock, isPortableTextToolkitSpan, spanToPlainText, isPortableTextBlock, isPortableTextToolkitTextNode, buildMarksTree } = pkg;
This error happened while generating the page. Any console logs will be displayed in the terminal window.
Call Stack
<unknown>
node_modules/@portabletext/react/dist/react-portable-text.mjs (32)
ModuleJob._instantiate
node:internal/modules/esm/module_job (123:21)
async ModuleJob.run
node:internal/modules/esm/module_job (189:5)
async ESMLoader.import
node:internal/modules/esm/loader (530:24)
async importModuleDynamicallyWrapper
node:internal/vm/module (438:15)
Should be fixed in the latest versions - please leave a comment if you're still having issues with the 2.x version.