search

withastro / astro

The web framework for content-driven websites. ⭐️ Star to support our work!
https://astro.build
Other
46.43k stars 2.46k forks source link

Issue using React Component - Cannot use import statement outside a module #4357

Closed reggi closed 2 years ago

reggi commented 2 years ago

What version of astro are you using?

1.0.6

Are you using an SSR adapter? If so, which one?

Local

What package manager are you using?

yarn

What operating system are you using?

Mac

Describe the Bug

I'm trying to pull in a specific npm package of a react component found here: https://www.npmjs.com/package/@rjsf/semantic-ui, for some reason I'm unable to use the component. I get this errror:

Cannot use import statement outside a module
    at Object.compileFunction (https://github-e2ezwj.w.staticblitz.com/blitz.1f021b18268b32e6c6b2095e039ac8c9f88b0d52.js:6:341448)
    at wrapSafe (https://github-e2ezwj.w.staticblitz.com/blitz.1f021b18268b32e6c6b2095e039ac8c9f88b0d52.js:6:218347)
    at Module._compile (https://github-e2ezwj.w.staticblitz.com/blitz.1f021b18268b32e6c6b2095e039ac8c9f88b0d52.js:6:218715)
    at Module._extensions..js (https://github-e2ezwj.w.staticblitz.com/blitz.1f021b18268b32e6c6b2095e039ac8c9f88b0d52.js:6:219743)
    at Module.load (https://github-e2ezwj.w.staticblitz.com/blitz.1f021b18268b32e6c6b2095e039ac8c9f88b0d52.js:6:217769)
    at Module._load (https://github-e2ezwj.w.staticblitz.com/blitz.1f021b18268b32e6c6b2095e039ac8c9f88b0d52.js:6:215340

Just thought i'd document this, obviously compatibility with every module is not easy but perhaps others will come across this too. Not sure why this is happening.

Link to Minimal Reproducible Example

https://stackblitz.com/edit/github-e2ezwj?file=src%2Fpages%2Findex.astro&on=stackblitz

Participation

bluwy commented 2 years ago

The error could be less cryptic, which would be fixed on Vite side (I'll try to look into this separately), but it seems like the @rjsf/semantic-ui package is incorrectly exported. main points to a non-existing file, and module isn't read by nodejs. I've sent a PR to fix this there: https://github.com/rjsf-team/react-jsonschema-form/pull/3022. Closing this for now as it's an upstream issue.

bluwy commented 2 years ago

Actually it looks like Vite is returning the full stack, but Astro is trimming it. Sending a PR to fix this, and reopening.