PrismicProvider - Cannot use import statement outside a module

dhavalveera · July 31, 2024, 4:47am

Impacted feature

when trying to import PrismicProvider to the root.tsx file in the Remix App

Errors

(node:10944) Warning: To load an ES module, set "type": "module" in the package.json or use the .mjs extension.
(Use `node --trace-warnings ...` to show where the warning was created)
9:21:34 AM [vite] Error when evaluating SSR module /app/root.tsx: failed to import "@prismicio/react"
|- C:\Users\dhaval\Desktop\Coursera Learning\remix-prismic-poc\node_modules\@prismicio\react\dist\index.js:1
import { PrismicProvider } from "./PrismicProvider.js";
^^^^^^

SyntaxError: Cannot use import statement outside a module
    at wrapSafe (node:internal/modules/cjs/loader:1281:20)
    at Module._compile (node:internal/modules/cjs/loader:1321:27)
    at Module._extensions..js (node:internal/modules/cjs/loader:1416:10)
    at Module.load (node:internal/modules/cjs/loader:1208:32)
    at Module._load (node:internal/modules/cjs/loader:1024:12)
    at cjsLoader (node:internal/modules/esm/translators:348:17)
    at ModuleWrap.<anonymous> (node:internal/modules/esm/translators:297:7)
    at ModuleJob.run (node:internal/modules/esm/module_job:222:25)
    at async ModuleLoader.import (node:internal/modules/esm/loader:316:24)
    at async nodeImport (file:///C:/Users/dhaval/Desktop/Coursera%20Learning/remix-prismic-poc/node_modules/vite/dist/node/chunks/dep-mCdpKltl.js:52735:15)

9:21:34 AM [vite] Error when evaluating SSR module virtual:remix/server-build: failed to import "@prismicio/react"
|- C:\Users\dhaval\Desktop\Coursera Learning\remix-prismic-poc\node_modules\@prismicio\react\dist\index.js:1
import { PrismicProvider } from "./PrismicProvider.js";
^^^^^^

SyntaxError: Cannot use import statement outside a module
    at wrapSafe (node:internal/modules/cjs/loader:1281:20)
    at Module._compile (node:internal/modules/cjs/loader:1321:27)
    at Module._extensions..js (node:internal/modules/cjs/loader:1416:10)
    at Module.load (node:internal/modules/cjs/loader:1208:32)
    at Module._load (node:internal/modules/cjs/loader:1024:12)
    at cjsLoader (node:internal/modules/esm/translators:348:17)
    at ModuleWrap.<anonymous> (node:internal/modules/esm/translators:297:7)
    at ModuleJob.run (node:internal/modules/esm/module_job:222:25)
    at async ModuleLoader.import (node:internal/modules/esm/loader:316:24)
    at async nodeImport (file:///C:/Users/dhaval/Desktop/Coursera%20Learning/remix-prismic-poc/node_modules/vite/dist/node/chunks/dep-mCdpKltl.js:52735:15)

9:21:34 AM [vite] Internal server error: Cannot use import statement outside a module
      at wrapSafe (node:internal/modules/cjs/loader:1281:20)
      at Module._compile (node:internal/modules/cjs/loader:1321:27)
      at Module._extensions..js (node:internal/modules/cjs/loader:1416:10)
      at Module.load (node:internal/modules/cjs/loader:1208:32)
      at Module._load (node:internal/modules/cjs/loader:1024:12)
      at cjsLoader (node:internal/modules/esm/translators:348:17)
      at ModuleWrap.<anonymous> (node:internal/modules/esm/translators:297:7)
      at ModuleJob.run (node:internal/modules/esm/module_job:222:25)
      at async ModuleLoader.import (node:internal/modules/esm/loader:316:24)
      at async nodeImport (file:///C:/Users/dhaval/Desktop/Coursera%20Learning/remix-prismic-poc/node_modules/vite/dist/node/chunks/dep-mCdpKltl.js:52735:15)

Your Role

Hosting provider

Currently trying to setup in my local & this is my PoC (Proof of Concept), once it's working then I'll setup it in my actual Remix Project where I need to integrate Prismic

Package.json file

"dependencies": {
    "@prismicio/client": "^7.7.4",
    "@prismicio/react": "^2.8.0",
    "@remix-run/node": "^2.10.3",
    "@remix-run/react": "^2.10.3",
    "@remix-run/serve": "^2.10.3",
    "isbot": "^4.1.0",
    "react": "^18.2.0",
    "react-dom": "^18.2.0"
  },
  "devDependencies": {
    "@remix-run/dev": "^2.10.3",
    "@types/react": "^18.2.20",
    "@types/react-dom": "^18.2.7",
    "@typescript-eslint/eslint-plugin": "^6.7.4",
    "@typescript-eslint/parser": "^6.7.4",
    "autoprefixer": "^10.4.19",
    "eslint": "^8.38.0",
    "eslint-import-resolver-typescript": "^3.6.1",
    "eslint-plugin-import": "^2.28.1",
    "eslint-plugin-jsx-a11y": "^6.7.1",
    "eslint-plugin-react": "^7.33.2",
    "eslint-plugin-react-hooks": "^4.6.0",
    "postcss": "^8.4.38",
    "tailwindcss": "^3.4.4",
    "typescript": "^5.1.6",
    "vite": "^5.1.0",
    "vite-tsconfig-paths": "^4.2.1"
  },
  "engines": {
    "node": ">=20.0.0"
  }

Phil · July 31, 2024, 8:23am

Hi @dhavalveera ,

Welcome to the community

Can you show us the root.tsx file and as many relevant connected files as possible?

dhavalveera · July 31, 2024, 9:13am

below is the : /app/utils/prismic.ts

import { createClient } from "@prismicio/client";

export const repositoryName = "dvresumewebsite";

export const prismicClient = createClient(repositoryName, {
  accessToken: "2b9f0e9147f95c33c4ba47cc7aca1302",
});

and below is the root.tsx, Method 1:

import {
  Links,
  Meta,
  Outlet,
  Scripts,
  ScrollRestoration,
} from "@remix-run/react";

import "./tailwind.css";
import { PrismicProvider } from "@prismicio/react";

export function Layout({ children }: { children: React.ReactNode }) {
  return (
    <html lang="en">
      <head>
        <meta charSet="utf-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1" />
        <Meta />
        <Links />
      </head>
      <body>
        {children}
        <ScrollRestoration />
        <Scripts />
      </body>
    </html>
  );
}

export default function App() {
  return (
    <PrismicProvider>
      <Outlet />
    </PrismicProvider>
  );
}

and Method 2:

import {
  Links,
  Meta,
  Outlet,
  Scripts,
  ScrollRestoration,
} from "@remix-run/react";

import "./tailwind.css";
import { PrismicProvider } from "@prismicio/react";

export function Layout({ children }: { children: React.ReactNode }) {
  return (
    <html lang="en">
      <head>
        <meta charSet="utf-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1" />
        <Meta />
        <Links />
      </head>
      <body>
        <PrismicProvider>{children}</PrismicProvider>
        <ScrollRestoration />
        <Scripts />
      </body>
    </html>
  );
}

export default function App() {
  return (
    <Outlet />
  );
}

but none is working for me...

below is the tsconfig.json:

{
  "include": [
    "**/*.ts",
    "**/*.tsx",
    "**/.server/**/*.ts",
    "**/.server/**/*.tsx",
    "**/.client/**/*.ts",
    "**/.client/**/*.tsx"
  ],
  "compilerOptions": {
    "lib": ["DOM", "DOM.Iterable", "ES2022"],
    "types": ["@remix-run/node", "vite/client"],
    "isolatedModules": true,
    "esModuleInterop": true,
    "jsx": "react-jsx",
    "module": "ESNext",
    "moduleResolution": "Bundler",
    "resolveJsonModule": true,
    "target": "ES2022",
    "strict": true,
    "allowJs": true,
    "skipLibCheck": true,
    "forceConsistentCasingInFileNames": true,
    "baseUrl": ".",
    "paths": {
      "~/*": ["./app/*"]
    },

    // Vite takes care of building everything, not tsc.
    "noEmit": true
  }
}

lihbr · August 1, 2024, 11:10am

Hi there, can you try updating @prismicio/client to version 7.8.0 or later? We released a fix that should address that

dhavalveera · August 1, 2024, 11:26am

Hello @lihbr ,

I just changed the version of @prismicio/client to ^7.8.0 as well as tried 7.8.0 but unfortunately the error is still there

angeloashmore · August 1, 2024, 11:07pm

Hi @dhavalveera, @prismicio/react does not currently support pure ESM projects (the latest version is 2.8.0 as of this message).

The current published version is configured to maximize support for the most popular frameworks, including Next.js. That does not include the default Remix configuration, unfortunately. We are planning to reassess how we publish @prismicio/react and other Prismic packages in the near future to better support modern frameworks.

Until we make those changes, you can fix the package locally using patch-package.

In the root of your project, create a file at patches/@prismicio+react+2.8.0.patch with this content:

diff --git a/node_modules/@prismicio/react/package.json b/node_modules/@prismicio/react/package.json
index 45f1371..f2a7112 100644
--- a/node_modules/@prismicio/react/package.json
+++ b/node_modules/@prismicio/react/package.json
@@ -16,6 +16,7 @@
 	"license": "Apache-2.0",
 	"author": "Prismic <contact@prismic.io> (https://prismic.io)",
 	"sideEffects": false,
+	"type": "module",
 	"exports": {
 		".": {
 			"react-server": {

Add a postinstall script to your package.json:

{
  "scripts": {
    "postinstall": "patch-package"
  }
}

Install patch-package:
```
npm install --save-dev patch-package
```

Please note we do not officially support Remix. You can still use Prismic with Remix, but Next.js, Nuxt, or SvelteKit will offer the best Prismic experience. I recommend at least checking out our Next.js starters and docs to get some inspiration on how we recommend using Prismic.

dhavalveera · August 2, 2024, 2:22am

Hello @angeloashmore

I also saw the Blog Post written on the Prismic Website only where it's showing the tutorial of how to use Prismic with Remix which can be found here.

Furthermore, can you please tell me where to create this patches/@prismicio+react+2.8.0.patch? and what all content required in it?

for Nextjs Starter, currently my entire Project is based on Remix for the SEO, Speed & Peformance compared to Nextjs.

dhavalveera · August 2, 2024, 5:35am

what I tried is like:

I modified the package.json of the @prismicio/react and added type: module as you shared above, then I added post install script and all, then I am getting below error:

Named export 'asLinkAttrs' not found. The requested module './../_node_modules/@prismicio/client/dist/helpers/asLinkAttrs.js' 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 './../_node_modules/@prismicio/client/dist/helpers/asLinkAttrs.js';
const { asLinkAttrs } = pkg;

and below is in the Terminal:

11:04:11 AM [vite] Error when evaluating SSR module /app/root.tsx: failed to import "@prismicio/react"
|- file:///C:/Users/dhaval/Desktop/Coursera%20Learning/remix-prismic-poc/node_modules/@prismicio/react/dist/react-server/PrismicLink.js:3
import { asLinkAttrs } from './../_node_modules/@prismicio/client/dist/helpers/asLinkAttrs.js';
         ^^^^^^^^^^^
SyntaxError: Named export 'asLinkAttrs' not found. The requested module './../_node_modules/@prismicio/client/dist/helpers/asLinkAttrs.js' 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 './../_node_modules/@prismicio/client/dist/helpers/asLinkAttrs.js';
const { asLinkAttrs } = pkg;

    at ModuleJob._instantiate (node:internal/modules/esm/module_job:134:21)
    at async ModuleJob.run (node:internal/modules/esm/module_job:217:5)
    at async ModuleLoader.import (node:internal/modules/esm/loader:316:24)
    at async nodeImport (file:///C:/Users/dhaval/Desktop/Coursera%20Learning/remix-prismic-poc/node_modules/vite/dist/node/chunks/dep-mCdpKltl.js:52735:15)
    at async ssrImport (file:///C:/Users/dhaval/Desktop/Coursera%20Learning/remix-prismic-poc/node_modules/vite/dist/node/chunks/dep-mCdpKltl.js:52591:16)
    at async eval (eval at instantiateModule (file:///C:/Users/dhaval/Desktop/Coursera%20Learning/remix-prismic-poc/node_modules/vite/dist/node/chunks/dep-mCdpKltl.js:52640:24), <anonymous>:6:31)
    at async instantiateModule (file:///C:/Users/dhaval/Desktop/Coursera%20Learning/remix-prismic-poc/node_modules/vite/dist/node/chunks/dep-mCdpKltl.js:52650:5)

11:04:11 AM [vite] Error when evaluating SSR module virtual:remix/server-build: failed to import "@prismicio/react"
|- file:///C:/Users/dhaval/Desktop/Coursera%20Learning/remix-prismic-poc/node_modules/@prismicio/react/dist/react-server/PrismicLink.js:3
import { asLinkAttrs } from './../_node_modules/@prismicio/client/dist/helpers/asLinkAttrs.js';
         ^^^^^^^^^^^
SyntaxError: Named export 'asLinkAttrs' not found. The requested module './../_node_modules/@prismicio/client/dist/helpers/asLinkAttrs.js' 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 './../_node_modules/@prismicio/client/dist/helpers/asLinkAttrs.js';
const { asLinkAttrs } = pkg;

    at ModuleJob._instantiate (node:internal/modules/esm/module_job:134:21)
    at async ModuleJob.run (node:internal/modules/esm/module_job:217:5)
    at async ModuleLoader.import (node:internal/modules/esm/loader:316:24)
    at async nodeImport (file:///C:/Users/dhaval/Desktop/Coursera%20Learning/remix-prismic-poc/node_modules/vite/dist/node/chunks/dep-mCdpKltl.js:52735:15)
    at async ssrImport (file:///C:/Users/dhaval/Desktop/Coursera%20Learning/remix-prismic-poc/node_modules/vite/dist/node/chunks/dep-mCdpKltl.js:52591:16)
    at async eval (eval at instantiateModule (file:///C:/Users/dhaval/Desktop/Coursera%20Learning/remix-prismic-poc/node_modules/vite/dist/node/chunks/dep-mCdpKltl.js:52640:24), <anonymous>:6:31)
    at async instantiateModule (file:///C:/Users/dhaval/Desktop/Coursera%20Learning/remix-prismic-poc/node_modules/vite/dist/node/chunks/dep-mCdpKltl.js:52650:5)

11:04:11 AM [vite] Internal server error: Named export 'asLinkAttrs' not found. The requested module './../_node_modules/@prismicio/client/dist/helpers/asLinkAttrs.js' 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 './../_node_modules/@prismicio/client/dist/helpers/asLinkAttrs.js';
const { asLinkAttrs } = pkg;

      at ModuleJob._instantiate (node:internal/modules/esm/module_job:134:21)
      at async ModuleJob.run (node:internal/modules/esm/module_job:217:5)
      at async ModuleLoader.import (node:internal/modules/esm/loader:316:24)
      at async nodeImport (file:///C:/Users/dhaval/Desktop/Coursera%20Learning/remix-prismic-poc/node_modules/vite/dist/node/chunks/dep-mCdpKltl.js:52735:15)
      at async ssrImport (file:///C:/Users/dhaval/Desktop/Coursera%20Learning/remix-prismic-poc/node_modules/vite/dist/node/chunks/dep-mCdpKltl.js:52591:16)
      at async eval (eval at instantiateModule (file:///C:/Users/dhaval/Desktop/Coursera%20Learning/remix-prismic-poc/node_modules/vite/dist/node/chunks/dep-mCdpKltl.js:52640:24), <anonymous>:6:31)
      at async instantiateModule (file:///C:/Users/dhaval/Desktop/Coursera%20Learning/remix-prismic-poc/node_modules/vite/dist/node/chunks/dep-mCdpKltl.js:52650:5)

dhavalveera · August 6, 2024, 9:41am

@angeloashmore ,

waiting for the update on the same.

lihbr · August 7, 2024, 1:30pm

Hi @dhavalveera,

The patch file should be created at your project root (where your package.json lives) under a patches folder, so ./patches/@prismicio+react+2.8.0.patch

The content of this file is a patch recognized by patch-package that will ensure your node_modules are patched consistently. See more information about this method on GitHub: GitHub - ds300/patch-package: Fix broken node modules instantly 🏃🏽‍♀️💨

We're conscious this isn't an ideal situation. We're currently working on rethinking our package delivery strategy to ensure greater compatibility with non-Next.js projects. There will likely remain incompatibility with our packages until we settle on an updated strategy.

Thanks for your comprehension,
Lucie

dhavalveera · August 8, 2024, 2:05am

@lihbr ,

I just looked at the patch-package GitHub Repo you shared with me, but they're first modifying the changes in the /node_modules/package-name/somefile.js which is as below:

# fix a bug in one of your dependencies
vim node_modules/some-package/brokenFile.js

# run patch-package to create a .patch file
npx patch-package some-package

# commit the patch file to share the fix with your team
git add patches/some-package+3.14.15.patch
git commit -m "fix brokenFile.js in some-package"

and I just tried to run npx patch-package @prismicio/react but nothing happened.

Furthermore, so currently there's no way or option or solution through which I can use Prismic with Remix?

angeloashmore · August 10, 2024, 1:21am

Hi @dhavalveera, you can find more detailed instructions here: How to patch @prismicio/react for ESM

After setting up patch-package with the patch, you should be able to use @prismicio/react in Remix projects.

Furthermore, so currently there's no way or option or solution through which I can use Prismic with Remix?

You can use Prismic with Remix, but we do not officially support the integration. That means we cannot guarantee a seamless experience and there may be some incompatibilities, such as the one you experienced here. Our support team may also not be able to answer Remix-related questions in the same way they can support Next.js/Nuxt/SvelteKit users.

@prismicio/client and @prismicio/react are generic JavaScript/TypeScript packages, however, and should work in non-Next.js projects

dhavalveera · August 10, 2024, 2:11am

Hi @lihbr ,

I followed your How to patch @prismicio/react for ESM

but unfortunately that's also not working, and below is the error:

Named export 'asLinkAttrs' not found. The requested module './../_node_modules/@prismicio/client/dist/helpers/asLinkAttrs.js' 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 './../_node_modules/@prismicio/client/dist/helpers/asLinkAttrs.js';
const { asLinkAttrs } = pkg;
    at ModuleJob._instantiate (node:internal/modules/esm/module_job:134:21)
    at async ModuleJob.run (node:internal/modules/esm/module_job:217:5)
    at async ModuleLoader.import (node:internal/modules/esm/loader:316:24)
    at async nodeImport (file:///C:/Users/dhaval/Desktop/Coursera%20Learning/remix-prismic-poc/node_modules/vite/dist/node/chunks/dep-mCdpKltl.js:52735:15)
    at async ssrImport (file:///C:/Users/dhaval/Desktop/Coursera%20Learning/remix-prismic-poc/node_modules/vite/dist/node/chunks/dep-mCdpKltl.js:52591:16)
    at async eval (eval at instantiateModule (file:///C:/Users/dhaval/Desktop/Coursera%20Learning/remix-prismic-poc/node_modules/vite/dist/node/chunks/dep-mCdpKltl.js:52640:24), <anonymous>:6:31)
    at async instantiateModule (file:///C:/Users/dhaval/Desktop/Coursera%20Learning/remix-prismic-poc/node_modules/vite/dist/node/chunks/dep-mCdpKltl.js:52650:5
Click outside, press Esc key, or fix the code to dismiss.
You can also disable this overlay by setting server.hmr.overlay to false in vite.config.ts.

angeloashmore · August 12, 2024, 6:42pm

@dhavalveera, thanks for the follow up. I'm still not able to get the same issue you are seeing, even when using your tsconfig.json and content that uses a link.

Could you share a reproduction project? You could send the project you are working on, or if it contains private info, you could remove everything you would like to keep private as long as it continues to have the same error.

Pushing your repo to GitHub is preferred, or you could send it as a message on this forum.

Thank you!

mathieu.delvaux · September 26, 2024, 8:35pm

I'm interested in following this as well.
The patch doesn't solve the issue as then the error above is triggered, unfortunately.
You may fix it and the half dozen that come along but then you just end up with another Vite error:

Error when evaluating SSR module /src/root.tsx: failed to import "@prismicio/react"
error [ERR_REQUIRE_ESM]: require() of ES Module [(whichever dist file of @prismicio/react and react-server)] is not supported. Instead change the require of [...] to a dynamic import() which is available in all CommonJS modules

I believe it's due to TS transpiling the imports

Given that ESM is the future, given that Node has been supporting it for like 7 years already, and given that the support for ESM in the current most used React frameworks are as follow… :

Next: supported, requires a different import type
Remix: supported, natively
Nuxt: supported, natively
SvelteKit: supported, natively
Gatsby: supported, natively

… I would advocate for Prismic to update its packages to support ESM.
Also, supporting ESM also doesn't mean that CJS cannot be supported either, as one can easily be transpiled into the other

On a last note, it would be lovely to see Prismic move towards a more framework-agnostic approach

Topic		Replies	Views
@prismicio/react import error Developing with Prismic reactjs	4	899	January 25, 2022
"Cannot use import statement outside a module" Developing with Prismic nextjs	13	2924	December 9, 2021
Next-slicezone 'cannot import from outside a module' error Developing with Prismic nextjs	10	939	December 9, 2021
@prismicio/react/dist/index.js:1 seems to be an ES Module but shipped in a CommonJS package Developing with Prismic reactjs	3	149	August 5, 2024
Prismic and GATSBY, some issues and fixes Developing with Prismic gatsby	3	660	December 9, 2021