Can't import the named export 'LIST_NEST_MODE_HTML' from non EcmaScript module (only default export is available) about react-portabletext

[JKarlavige]

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)

[red-runner]

Same 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",

[carlosganzerla]

@red-runner Found the solution here for Storybook. Worked for me.

[Livelyguy00]

The same for me in React app based on CRA

[rexxars]

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 Home

Minimal 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')
);

[holdercp]

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.205s

[geball]

@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 [email protected]. In those versions, there was a dependency on [email protected]. As of [email protected], that peer dependency is resolved and I can no longer replicate the error. Hopefully your experience is the same.

[JGuest777]

next v10.0.6
that npm command returns (empty)

Will upgrade to canary.6 and try!

[geball]

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.

[geball]

@holdercp For your case, it might be related to the version of React. It appears React >= 17 is required.

[red-runner]

Nice one @carlosganzerla worked for me!! 🥇 💐

[Livelyguy00]

node -v: 16.15.0
npm -v: 8.5.5
react: 17.0.2
@portabletext/react: 1.0.6
Still the same for me

[dorelljames]

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.

[rexxars]

Should be fixed in the latest versions - please leave a comment if you're still having issues with the 2.x version.