@prismicio/react/dist/index.js:1 seems to be an ES Module but shipped in a CommonJS package

Developing with Prismic
1

Describe your question/issue in detail

Hi there !

I've got a CJS import error when trying to run a test on a component importing prismicio/react using Vitest which makes the test fail.

Error

image
image1346×410 43.3 KB

Impacted feature

I can't pass the test of our component which is importing prismicio/react using Vitest.

What steps have you taken to resolve this issue already?

Already tried to inline the package as suggested by the Vitest error but it didn't change anything.

Also upgraded prismicio/react and prismicio/client to the latest versions but it still breaks.

As far as I understand, Vitest is angry because you don't export your dist as .mjs file or using "type": "module" in your package.json for the JS module build part.
Is there any way you can remedy to that in the short run by using .mjs extensions ?

Thanks in advance for you help !

Here is my package.json for more info, let me know if you need more info.

Package.json file

{
  "name": "chs2020",
  "version": "2.86.0-SNAPSHOT",
  "private": true,
  "dependencies": {
    "chs2020/icons": "2.7.0",
    "chs2020/shared-components-library": "4.29.0-SNAPSHOT",
    "clm/react-dmp": "1.8.2",
    "clm/react-ms-sante": "2.1.3",
    "date-io/date-fns": "^1.3.9",
    "emotion/react": "^11.9.3",
    "emotion/styled": "^11.9.3",
    "formatjs/intl-pluralrules": "5.2.6",
    "formatjs/intl-relativetimeformat": "11.2.6",
    "maiia-gestion/maiia-gestion-bilan-frontend": "0.1.0-CHS-32885-SNAPSHOT",
    "mui/base": "5.0.0-alpha.113",
    "mui/icons-material": "^5.8.4",
    "mui/lab": "^5.0.0-alpha.93",
    "mui/material": "^5.9.2",
    "mui/styled-engine-sc": "^5.8.0",
    "mui/styles": "^5.9.2",
    "mui/x-date-pickers": "5.0.20",
    "prismicio/client": "7.6.0",
    "prismicio/react": "2.8.0",
    "react-pdf/renderer": "3.1.9",
    "reduxjs/toolkit": "2.2.0",
    "tanstack/react-query": "4.24.9",
    "tanstack/react-virtual": "3.0.0-beta.40",
    "animated-scroll-to": "2.3.0",
    "antd": "^4.0.1",
    "buffer": "^6.0.3",
    "canvas": "2.11.2",
    "chart.js": "4.3.0",
    "classnames": "^2.2.6",
    "cleave.js": "^1.5.3",
    "date-fns": "^2.8.1",
    "draft-convert": "^2.1.12",
    "draft-js": "0.11.7",
    "dwt": "18.4.2",
    "fast-json-patch": "3.1.1",
    "gsap": "3.12.5",
    "html-react-parser": "5.0.9",
    "jss": "10.8.0",
    "jss-plugin-camel-case": "10.8.0",
    "jss-plugin-default-unit": "10.8.0",
    "jss-plugin-global": "10.8.0",
    "jss-plugin-nested": "10.8.0",
    "jss-plugin-props-sort": "10.8.0",
    "jss-plugin-rule-value-function": "10.8.0",
    "jss-plugin-vendor-prefixer": "10.8.0",
    "keycloak-js": "23.0.7",
    "libphonenumber-js": "1.10.15",
    "lodash": "^4.17.21",
    "loglevel": "^1.6.6",
    "memoize-one": "6.0.0",
    "moment": "^2.29.4",
    "moment-timezone": "^0.5.33",
    "prop-types": "^15.7.2",
    "re-resizable": "^6.9.0",
    "react": "18.2.0",
    "react-beautiful-dnd": "^13.0.0",
    "react-chartjs-2": "5.2.0",
    "react-currency-formatter": "^1.1.0",
    "react-custom-scrollbars": "^4.2.1",
    "react-dom": "18.2.0",
    "react-dropzone": "14.2.3",
    "react-highlight-words": "^0.16.0",
    "react-html-parser": "^2.0.2",
    "react-imask": "7.6.0",
    "react-indiana-drag-scroll": "^2.0.1",
    "react-intl": "^5.10.16",
    "react-moment": "1.1.3",
    "react-phone-number-input": "3.2.13",
    "react-redux": "^7.2.0",
    "react-redux-subspace": "^6.2.0",
    "react-resize-detector": "8.1.0",
    "react-router-dom": "6.14.1",
    "react-scripts": "5.0.1",
    "react-select": "^3.0.8",
    "react-slick": "0.29.0",
    "react-to-print": "^2.14.10",
    "react-transition-group": "^4.3.0",
    "react-virtualized-auto-sizer": "^1.0.5",
    "react-window": "^1.8.5",
    "react-window-infinite-loader": "^1.0.5",
    "redux-batched-subscribe": "^0.1.6",
    "redux-mock-store": "^1.5.3",
    "redux-subspace": "^6.1.0",
    "resize-observer-polyfill": "^1.5.1",
    "scroll": "^3.0.1",
    "slick-carousel": "^1.8.1",
    "smoothscroll-polyfill": "^0.4.4",
    "socket.io-client": "^2.3.0",
    "stream-browserify": "3.0.0",
    "styled-components": "6.1.8",
    "text-editor": "^1.1.2",
    "uuid": "9.0.1",
    "vite": "5.0.12",
    "vite-plugin-svgr": "4.2.0",
    "vite-tsconfig-paths": "4.3.2"
  },
  "devDependencies": {
    "babel/cli": "^7.12.1",
    "babel/core": "^7.12.10",
    "babel/plugin-proposal-class-properties": "^7.12.13",
    "babel/plugin-proposal-private-property-in-object": "7.21.11",
    "babel/preset-env": "^7.12.1",
    "babel/preset-react": "^7.12.1",
    "babel/types": "^7.12.13",
    "storybook/addon-a11y": "7.6.18",
    "storybook/addon-designs": "8.0.3",
    "storybook/addon-essentials": "7.6.18",
    "storybook/addon-interactions": "7.6.18",
    "storybook/addon-links": "7.6.18",
    "storybook/addons": "7.6.18",
    "storybook/blocks": "7.6.18",
    "storybook/node-logger": "7.6.18",
    "storybook/preset-create-react-app": "7.6.18",
    "storybook/react": "7.6.18",
    "storybook/react-vite": "7.6.18",
    "testing-library/jest-dom": "6.4.6",
    "testing-library/react": "16.0.0",
    "testing-library/user-event": "14.5.2",
    "types/chart.js": "2.9.35",
    "types/jest": "29.5.11",
    "types/jest-axe": "3.5.9",
    "types/node": "20.11.5",
    "types/react": "18.2.48",
    "types/react-custom-scrollbars": "4.0.13",
    "types/react-dom": "18.2.18",
    "types/react-html-parser": "2.0.6",
    "types/react-router-dom": "5.3.3",
    "types/react-select": "5.0.1",
    "types/react-slick": "0.23.13",
    "types/redux-mock-store": "1.0.6",
    "types/scroll": "3.0.3",
    "types/uuid": "9.0.7",
    "vitejs/plugin-react-swc": "3.6.0",
    "vitest/coverage-v8": "1.6.0",
    "axios": "^0.27.2",
    "chai": "^4.2.0",
    "cross-env": "7.0.3",
    "cross-fetch": "4.0.0",
    "customize-cra": "1.0.0",
    "eslint": "8.56.0",
    "eslint-config-prettier": "9.1.0",
    "eslint-config-react-app": "7.0.1",
    "eslint-plugin-import": "2.29.1",
    "eslint-plugin-jsx-a11y": "6.8.0",
    "eslint-plugin-react": "7.33.2",
    "eslint-plugin-storybook": "0.6.15",
    "fetch-mock": "9.11.0",
    "husky": "^8.0.2",
    "jest-axe": "7.0.0",
    "jsdom": "24.0.0",
    "lint-staged": "13.2.3",
    "msw": "1.3.2",
    "msw-storybook-addon": "1.10.0",
    "path": "npm:path-browserify@1.0.1",
    "path-browserify": "1.0.1",
    "postcss": "8.4.20",
    "prettier": "3.2.4",
    "process": "0.11.10",
    "react-app-rewired": "2.2.1",
    "react-intl-cra": "^0.3.4",
    "react-intl-translations-manager": "^5.0.3",
    "react-select-event": "5.5.1",
    "storybook": "7.6.18",
    "typescript": "5.3.3",
    "vitest": "1.6.0",
    "webpack": "5.88.2"
  },
  "lint-staged": {
    "**/*.{js,jsx,ts,tsx,json,css,scss,md}": [
      "prettier --write"
    ]
  },
  "browserslist": {
    "production": [
      "last 3 chrome versions",
      "last 3 firefox versions",
      "firefox ESR",
      "edge >= 16",
      "safari >= 13",
      "last 3 opera versions",
      "not IE <= 11"
    ],
    "development": [
      "last 3 chrome version",
      "last 3 firefox version",
      "safari >= 13"
    ]
  },
  "msw": {
    "workerDirectory": "public"
  },
  "overrides": {
    "react-refresh": "0.11.0",
    "@react-pdf/image": "2.2.3",
    "@react-pdf/pdfkit": "3.0.4",
    "@react-pdf/textkit": "4.4.1",
    "@react-pdf/layout": "3.11.2",
    "@react-pdf/fns": "2.2.1"
  }
}
2

Hi @Blooon, thanks for the info. :slight_smile:

Could you share your TypeScript configuration? I just tried @prismicio/react on a fresh Vite + React + Vitest project without issues. I'm thinking there could be a setting in your tsconfig.json that is prompting Vitest to import the module in an unsupported way (likely the moduleResolution option).

Some context around @prismicio/react and ESM

@prismicio/react and other Prismic packages are set up to maximize compatibility with popular tools like Next.js, Vite, and CRA. It's been a while since we assessed our support of today's most popular tools (consider Gatsby's and CRA's decline in usage, for example), but we are planning to do that soon.

For reference, here are our findings that prompted us to remove "type": "module" from @prismicio/react: fix: remove ESM `package.json` declaration (fixes `'Element' is not exported from '@prismicio/richtext'`) by angeloashmore · Pull Request #122 · prismicio/prismic-react · GitHub

3

Hi there !

Thanks for your answer ! Here is our tsconfig if you wanna have a look :

// tsconfig.json
{
  "compilerOptions": {
    "target": "ESNext",
    "useDefineForClassFields": true,
    "lib": ["DOM", "DOM.Iterable", "ESNext"],
    "allowJs": true,
    "skipLibCheck": true,
    "esModuleInterop": true,
    "allowSyntheticDefaultImports": true,
    "strict": true,
    "forceConsistentCasingInFileNames": true,
    "module": "ESNext",
    "moduleResolution": "Node",
    "resolveJsonModule": true,
    "isolatedModules": true,
    "noEmit": true,
    "jsx": "react-jsx",
    "baseUrl": "src",
    "types": ["vite/client", "vite-plugin-svgr/client", "vitest/globals", "@testing-library/jest-dom"],
  },
  "include": ["./src", "./.storybook"],
  "references": [{ "path": "./tsconfig.node.json" }],
}

// tsconfig.node.json
{
  "compilerOptions": {
    "composite": true,
    "module": "ESNext",
    "moduleResolution": "Node",
    "allowSyntheticDefaultImports": true
  },
  "include": ["vite.config.mts"]
}

moduleResolution is Node, what would you recommend ?

Best

4

Hi @Blooon, I tried your tsconfig.json on a fresh Vite + Vitest project and still did not see the same issue.

Could you try the solution shared here? PrismicProvider - Cannot use import statement outside a module - #6 by angeloashmore

Those instructions essentially turn @prismicio/react into an ESM-first package, which could resolve the issue. It would be a temporary fix until we update @prismicio/react.