'Element' is not exported from '@prismicio/richtext'.

[stefanstaynimble]

Fresh install of @prismic/react v2.0.3 throws error: Attempted import error: 'Element' is not exported from '@prismicio/richtext'.

Reverting to 2.0.2 fixes the issue

[angeloashmore]

Hi @stefanstaynimble, thanks for the bug report. I'm not able to get the same error on a fresh project, unfortunately.

Could you perform the following steps to rule out any outdated packages?

1. Run npm update @prismicio/react @prismicio/richtext.
2. If that doesn't fix the issue, delete node_modules and run npm install again.
3. If that still doesn't work, could you post your project's package.json?

I'm wondering if you have @prismicio/richtext and/or @prismicio/types installed in your project which may be causing version incompatibilities.

Thanks!

[stefanstaynimble]

I followed your steps @angeloashmore but the error persists:

My package.json file contents is as below:

{
    "name": "my-app",
    "version": "0.1.0",
    "private": true,
    "dependencies": {
        "@auth0/auth0-react": "^1.8.0",
        "@optimizely/optimizely-sdk": "^4.7.0",
        "@prismicio/client": "^6.1.0",
        "@prismicio/react": "^2.0.3",
        "@sentry/react": "^6.16.1",
        "@sentry/tracing": "^6.16.1",
        "@testing-library/jest-dom": "^5.14.1",
        "@testing-library/react": "^11.1.0",
        "@testing-library/user-event": "^12.1.2",
        "ably": "^1.2.14",
        "axios": "^0.22.0",
        "axios-retry": "^3.2.0",
        "bootstrap": "^4.5.3",
        "classcat": "^5.0.3",
        "hammerjs": "^2.0.8",
        "history": "^5.0.1",
        "immer": "^9.0.6",
        "js-base64": "^3.7.2",
        "js-cookie": "^3.0.1",
        "lodash": "^4.17.21",
        "moment": "^2.29.1",
        "node-sass": "^6.0.1",
        "normalize.css": "^8.0.1",
        "react": "^17.0.2",
        "react-dom": "^17.0.2",
        "react-easy-crop": "^3.5.3",
        "react-error-boundary": "^3.1.3",
        "react-innertext": "^1.1.5",
        "react-router-dom": "6.0.0-beta.7",
        "react-slider": "^1.3.1",
        "recoil": "^0.5.2",
        "resize-observer": "^1.0.4",
        "snake-case": "^3.0.4",
        "spark-md5": "^3.0.2",
        "web-vitals": "^2.1.1"
    },
    "devDependencies": {
        "@axe-core/react": "^4.3.1",
        "@storybook/addon-actions": "^6.3.10",
        "@storybook/addon-backgrounds": "^6.3.10",
        "@storybook/addon-docs": "^6.3.10",
        "@storybook/addon-essentials": "^6.3.10",
        "@storybook/node-logger": "^6.3.10",
        "@storybook/preset-create-react-app": "^3.2.0",
        "@storybook/react": "^6.3.10",
        "@whitespace/storybook-addon-html": "^5.0.0",
        "@wojtekmaj/enzyme-adapter-react-17": "^0.6.3",
        "axios-mock-adapter": "^1.20.0",
        "enzyme": "^3.11.0",
        "jest-localstorage-mock": "^2.4.18",
        "jest-matchmedia-mock": "^1.1.0",
        "react-scripts": "4.0.3",
        "resize-observer-polyfill": "^1.5.1",
        "yarn-audit-fix": "^7.0.8"
    },
    "resolutions": {
        "babel-loader": "8.1.0"
    },
    "scripts": {
        "start": "react-scripts start",
        "build": "react-scripts build",
        "test": "react-scripts test",
        "eject": "react-scripts eject",
        "storybook": "start-storybook -p 6006 -s public --loglevel error",
        "build-storybook": "build-storybook -s public"
    },
    "eslintConfig": {
        "extends": [
            "react-app",
            "react-app/jest"
        ],
        "rules": {
            "react-hooks/exhaustive-deps": [
                "warn",
                {
                    "additionalHooks": "useRecoilCallback|useRecoilTransaction_UNSTABLE"
                }
            ]
        },
        "env": {
            "browser": true,
            "node": true,
            "es6": true
        },
        "ignorePatterns": [
            "node_modules/*",
            "src/__tests__/*",
            "__tests__/*",
            "__mocks__/*"
        ],
        "plugins": [
            "react-hooks"
        ],
        "overrides": [
            {
                "files": [
                    "**/*.stories.*"
                ],
                "rules": {
                    "import/no-anonymous-default-export": "off"
                }
            }
        ]
    },
    "browserslist": {
        "production": [
            ">0.2%",
            "not dead",
            "not op_mini all"
        ],
        "development": [
            "last 1 chrome version",
            "last 1 firefox version",
            "last 1 safari version"
        ]
    },
    "jest": {
        "resetMocks": false
    }
}

[BillyBlaze]

I am getting the same errors as @stefanstaynimble and downgrading to 2.0.2 does indeed resolve this issue.

After some investigation I found out that webpack does not seem to work nicely with the .mjs extension. (This was changed in 2.0.3)

I found a workaround for our storybook project by adding the following to the webpack.config.js:

  config.resolve.extensions.push('.ts', '.tsx', '.mjs')

  config.module.rules.push({
    test: /\.mjs$/,
    include: /node_modules/,
    type: 'javascript/auto',
  })

However at this moment it seems this workaround doesn't work with CRACO.

---

EDIT: I just noticed this PR where it was changed to .mjs with a nicely made description. We're currently unable to upgrade to Webpack 5 because CRACO (needed for SRI en Nonce tags) is still only available for Webpack 4.

---

EDIT 2 Seems all my previous conclusions where not right. After fiddling around some more I was able to get it working by changing index.cjs to index.js. So it seems something doesn't work well with .cjs files

[levimykel]

@angeloashmore I'm seeing this same issue in the reactjs-website project when I update to the latest @prismicio/react version: https://github.com/prismicio/reactjs-website

[angeloashmore]

Thanks for the explanations everyone! I understand the issue now. This is most likely a result of using a combination of the following:

• type: module in package.json
• index.mjs for ESM builds
• index.cjs for CJS builds

Tools like CRA 4 do not correctly resolve ESM packages with this setup. This might be common to Webpack 4 build systems, including Storybook, but I'm not 100% sure.

I will need to figure out our next steps before publishing a fix. I'll post here once that's decided.

In the meantime, reverting to v2.0.2 should work if you encounter this error.

Thanks!

[angeloashmore]

This should be resolved by updating to @prismicio/react v2.0.6.

Some background on why this error happens is available here: #122

@stefanstaynimble @BillyBlaze @levimykel Could you let me know if this update fixes the issue? Thanks!

[BillyBlaze]

Thanks for the release! This update does indeed fix the issue for me.