prismicio / prismic-react

React components and hooks to fetch and present Prismic content
https://prismic.io/docs/technologies/homepage-reactjs
Apache License 2.0
153 stars 40 forks source link

Unable to import into an Astro application #193

Open JamieMason opened 9 months ago

JamieMason commented 9 months ago

Versions

Reproduction

git clone https://github.com/JamieMason/prismic-astro-esm-issue-repro
cd prismic-astro-esm-issue-repro
open http://localhost:3000
npm install
npm run dev

Steps to reproduce

  1. Import any module from @prismicio/react@2.7.1 into a typical Astro application such as one created using npm create astro@latest.
  2. Run the astro application.

You don't need to use the module, just try to import it:

---
import { PrismicRichText } from '@prismicio/react';

console.log(PrismicRichText);
---

<p>Some JSX</p>

What is expected?

The module should import and run without error.

What is actually happening?

node_modules/@prismicio/react/dist/index.js:1
import { PrismicProvider } from "./PrismicProvider.js";
^^^^^^

SyntaxError: Cannot use import statement outside a module
    at internalCompileFunction (node:internal/vm:73:18)
    at wrapSafe (node:internal/modules/cjs/loader:1176:20)
    at Module._compile (node:internal/modules/cjs/loader:1218:27)
    at Module._extensions..js (node:internal/modules/cjs/loader:1308:10)
    at Module.load (node:internal/modules/cjs/loader:1117:32)
    at Module._load (node:internal/modules/cjs/loader:958:12)
    at ModuleWrap.<anonymous> (node:internal/modules/esm/translators:169:29)
    at ModuleJob.run (node:internal/modules/esm/module_job:194:25)

Possible cause

I suspect the project may not be packaged correctly, a tool like https://arethetypeswrong.github.io/?p=%40prismicio%2Freact%402.7.1 can help diagnose the problems:

There is more information here from them on the kinds of issues it picks up and how to resolve them.

Other information

Astro uses Rollup as its bundler.

juneikerc commented 9 months ago

i have the same problem but with qwik