# PrismicProvider - Cannot use import statement outside a module

**URL:** <https://community.prismic.io/t/prismicprovider-cannot-use-import-statement-outside-a-module/16431>\
**Category:** Developing with Prismic\
**Tags:** typescript, reactjs, javascript\
**Created:** [July 31, 2024, 4:47am UTC](https://community.prismic.io/t/prismicprovider-cannot-use-import-statement-outside-a-module/16431 "2024-07-31T04:47:29Z")\
**Posts on this page:** 15\
**Page:** 1

<div class="post-metadata">

**Author:** ![dhavalveera](https://dub1.discourse-cdn.com/flex013/user_avatar/community.prismic.io/dhavalveera/32/7704_2.png) [@dhavalveera](https://community.prismic.io/u/dhavalveera)\
**Post date:** [July 31, 2024, 4:47am UTC](https://community.prismic.io/t/prismicprovider-cannot-use-import-statement-outside-a-module/16431/1 "2024-07-31T04:47:29Z")

</div>

### Impacted feature

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

### Errors

```auto
(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

```auto
"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"
  }

```

---

<div class="post-metadata">

**Author:** ![Phil](https://dub1.discourse-cdn.com/flex013/user_avatar/community.prismic.io/phil/32/14_2.png) [@Phil](https://community.prismic.io/u/Phil)\
**Post date:** [July 31, 2024, 8:23am UTC](https://community.prismic.io/t/prismicprovider-cannot-use-import-statement-outside-a-module/16431/2 "2024-07-31T08:23:32Z")

</div>

Hi @dhavalveera ,

Welcome to the community 🙂

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

---

<div class="post-metadata">

**Author:** ![dhavalveera](https://dub1.discourse-cdn.com/flex013/user_avatar/community.prismic.io/dhavalveera/32/7704_2.png) [@dhavalveera](https://community.prismic.io/u/dhavalveera)\
**Post date:** [July 31, 2024, 9:13am UTC](https://community.prismic.io/t/prismicprovider-cannot-use-import-statement-outside-a-module/16431/3 "2024-07-31T09:13:29Z")

</div>

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

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

export const repositoryName = "dvresumewebsite";

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

```

and below is the `root.tsx`, Method 1:

```auto
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:

```auto
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`:

```auto
{
  "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
  }
}

```

---

<div class="post-metadata">

**Author:** ![lihbr](https://dub1.discourse-cdn.com/flex013/user_avatar/community.prismic.io/lihbr/32/7409_2.png) [@lihbr](https://community.prismic.io/u/lihbr)\
**Post date:** [August 1, 2024, 11:10am UTC](https://community.prismic.io/t/prismicprovider-cannot-use-import-statement-outside-a-module/16431/4 "2024-08-01T11:10:09Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![dhavalveera](https://dub1.discourse-cdn.com/flex013/user_avatar/community.prismic.io/dhavalveera/32/7704_2.png) [@dhavalveera](https://community.prismic.io/u/dhavalveera)\
**Post date:** [August 1, 2024, 11:26am UTC](https://community.prismic.io/t/prismicprovider-cannot-use-import-statement-outside-a-module/16431/5 "2024-08-01T11:26:37Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![angeloashmore](https://dub1.discourse-cdn.com/flex013/user_avatar/community.prismic.io/angeloashmore/32/2685_2.png) [@angeloashmore](https://community.prismic.io/u/angeloashmore)\
**Post date:** [August 1, 2024, 11:07pm UTC](https://community.prismic.io/t/prismicprovider-cannot-use-import-statement-outside-a-module/16431/6 "2024-08-01T23:07:23Z")

</div>

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`.

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

2. Add a `postinstall` script to your `package.json`:

3. Install `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. 🙂

---

<div class="post-metadata">

**Author:** ![dhavalveera](https://dub1.discourse-cdn.com/flex013/user_avatar/community.prismic.io/dhavalveera/32/7704_2.png) [@dhavalveera](https://community.prismic.io/u/dhavalveera)\
**Post date:** [August 2, 2024, 2:22am UTC](https://community.prismic.io/t/prismicprovider-cannot-use-import-statement-outside-a-module/16431/7 "2024-08-02T02:22:13Z")

</div>

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](https://prismic.io/blog/remix-tutorial-headless-cms).

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`.

---

<div class="post-metadata">

**Author:** ![dhavalveera](https://dub1.discourse-cdn.com/flex013/user_avatar/community.prismic.io/dhavalveera/32/7704_2.png) [@dhavalveera](https://community.prismic.io/u/dhavalveera)\
**Post date:** [August 2, 2024, 5:35am UTC](https://community.prismic.io/t/prismicprovider-cannot-use-import-statement-outside-a-module/16431/8 "2024-08-02T05:35:35Z")

</div>

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:

```auto
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:

```auto
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)

```

---

<div class="post-metadata">

**Author:** ![dhavalveera](https://dub1.discourse-cdn.com/flex013/user_avatar/community.prismic.io/dhavalveera/32/7704_2.png) [@dhavalveera](https://community.prismic.io/u/dhavalveera)\
**Post date:** [August 6, 2024, 9:41am UTC](https://community.prismic.io/t/prismicprovider-cannot-use-import-statement-outside-a-module/16431/9 "2024-08-06T09:41:38Z")

</div>

@angeloashmore ,

waiting for the update on the same.

---

<div class="post-metadata">

**Author:** ![lihbr](https://dub1.discourse-cdn.com/flex013/user_avatar/community.prismic.io/lihbr/32/7409_2.png) [@lihbr](https://community.prismic.io/u/lihbr)\
**Post date:** [August 7, 2024, 1:30pm UTC](https://community.prismic.io/t/prismicprovider-cannot-use-import-statement-outside-a-module/16431/10 "2024-08-07T13:30:25Z")

</div>

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 🏃🏽‍♀️💨](https://github.com/ds300/patch-package)

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

---

<div class="post-metadata">

**Author:** ![dhavalveera](https://dub1.discourse-cdn.com/flex013/user_avatar/community.prismic.io/dhavalveera/32/7704_2.png) [@dhavalveera](https://community.prismic.io/u/dhavalveera)\
**Post date:** [August 8, 2024, 2:05am UTC](https://community.prismic.io/t/prismicprovider-cannot-use-import-statement-outside-a-module/16431/11 "2024-08-08T02:05:31Z")

</div>

@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:

```auto
# 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?

---

<div class="post-metadata">

**Author:** ![angeloashmore](https://dub1.discourse-cdn.com/flex013/user_avatar/community.prismic.io/angeloashmore/32/2685_2.png) [@angeloashmore](https://community.prismic.io/u/angeloashmore)\
**Post date:** [August 10, 2024, 1:21am UTC](https://community.prismic.io/t/prismicprovider-cannot-use-import-statement-outside-a-module/16431/12 "2024-08-10T01:21:52Z")

</div>

Hi @dhavalveera, you can find more detailed instructions here: [How to patch `@prismicio/react` for ESM](https://prismic.notion.site/How-to-patch-prismicio-react-for-ESM-14fe56b085b24375a3f150d560b7bbb6?pvs=4)

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

---

<div class="post-metadata">

**Author:** ![dhavalveera](https://dub1.discourse-cdn.com/flex013/user_avatar/community.prismic.io/dhavalveera/32/7704_2.png) [@dhavalveera](https://community.prismic.io/u/dhavalveera)\
**Post date:** [August 10, 2024, 2:11am UTC](https://community.prismic.io/t/prismicprovider-cannot-use-import-statement-outside-a-module/16431/13 "2024-08-10T02:11:37Z")

</div>

Hi @lihbr ,

I followed your **[How to patch @prismicio/react for ESM](https://prismic.notion.site/How-to-patch-prismicio-react-for-ESM-14fe56b085b24375a3f150d560b7bbb6?pvs=4)**

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

```auto
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.

```

---

<div class="post-metadata">

**Author:** ![angeloashmore](https://dub1.discourse-cdn.com/flex013/user_avatar/community.prismic.io/angeloashmore/32/2685_2.png) [@angeloashmore](https://community.prismic.io/u/angeloashmore)\
**Post date:** [August 12, 2024, 6:42pm UTC](https://community.prismic.io/t/prismicprovider-cannot-use-import-statement-outside-a-module/16431/14 "2024-08-12T18:42:31Z")

</div>

@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!

---

<div class="post-metadata">

**Author:** ![mathieu.delvaux](https://avatars.discourse-cdn.com/v4/letter/m/ecc23a/32.png) [@mathieu.delvaux](https://community.prismic.io/u/mathieu.delvaux)\
**Post date:** [September 26, 2024, 8:35pm UTC](https://community.prismic.io/t/prismicprovider-cannot-use-import-statement-outside-a-module/16431/15 "2024-09-26T20:35:19Z")

</div>

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:

```auto
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](https://github.com/nodejs/node/blob/812806a757b6f5ad83fdd18c301a11347f5c3e37/doc/changelogs/CHANGELOG_V8.md#8.5.0), and given that the support for ESM in the current most used React frameworks are as follow… :

- Next: supported, [requires a different import type](https://nextjs.org/docs/messages/import-esm-externals)
- 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 🙂