Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

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

Closed
1 task
reggi opened this issue Aug 16, 2022 · 2 comments · Fixed by #4364
Closed
1 task

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

reggi opened this issue Aug 16, 2022 · 2 comments · Fixed by #4364
Assignees
Labels
- P2: nice to have Not breaking anything but nice to have (priority)

Comments

@reggi
Copy link

reggi commented Aug 16, 2022

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

  • I am willing to submit a pull request for this issue.
@bluwy
Copy link
Member

bluwy commented Aug 17, 2022

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: rjsf-team/react-jsonschema-form#3022. Closing this for now as it's an upstream issue.

@bluwy bluwy closed this as completed Aug 17, 2022
@bluwy
Copy link
Member

bluwy commented Aug 17, 2022

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

@bluwy bluwy reopened this Aug 17, 2022
@bluwy bluwy self-assigned this Aug 17, 2022
@bluwy bluwy added s1-small - P2: nice to have Not breaking anything but nice to have (priority) labels Aug 17, 2022
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
- P2: nice to have Not breaking anything but nice to have (priority)
Projects
None yet
Development

Successfully merging a pull request may close this issue.

2 participants