You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
Cannot import "exports": { "module": ... } without type=module configured packages, instead we could get an error: Cannot use import statement outside a module
#9070
Open
LumaKernel opened this issue
Mar 17, 2024
· 4 comments
· May be fixed by #9071
Install [email protected] (Don't worry! It's tiny library, fully zero dependency, and I confirmed this is caused by some conditions with just rewriting its package.json)
Add import statement for 'use-immer'
The package which causes this problem has these conditions:
has no type: module in package.json
has exports: { ".": { import: "something" }} in package.json
This could be the bug of vite. I can create issue instead on vite, but I'm not sure for now.
The most important part of this issue is I got small reproduction for these issues (currently discussions).
I'm also making PR for Option 1 after submitting this issue. Done.
By the way, you may think, such packages should have type: module in their package.json. Actually, import from these packages from esm does not work, and multi-support is actually not possible by native level. Even if type=module is added, now, it cannot be require-able.
Sadly, this is complicated situation. Node.js, TypeScript and Webpack treats exports as their own way. Webpack says as https://webpack.js.org/guides/package-exports/#support .
Not get error and just can import it as ESM module as usual.
Actual Behavior
Got an error:
Cannot use import statement outside a module
at internalCompileFunction (https://remixrunremixcqepq2-01ee.w-credentialless-staticblitz.com/blitz.810981ba.js:180:1005)
at wrapSafe (https://remixrunremixcqepq2-01ee.w-credentialless-staticblitz.com/blitz.810981ba.js:54:14101)
at Module._compile (https://remixrunremixcqepq2-01ee.w-credentialless-staticblitz.com/blitz.810981ba.js:54:14512)
at Module._extensions..js (https://remixrunremixcqepq2-01ee.w-credentialless-staticblitz.com/blitz.810981ba.js:54:15550)
at Module.load (https://remixrunremixcqepq2-01ee.w-credentialless-staticblitz.com/blitz.810981ba.js:54:13457)
at Module._load (https://remixrunremixcqepq2-01ee.w-credentialless-staticblitz.com/blitz.810981ba.js:54:10535
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.
We have the workaround for this, just with importing by relative path:
- import { useImmer } from 'use-immer';+ import { useImmer } from '../../node_modules/use-immer';
The text was updated successfully, but these errors were encountered:
LumaKernel
changed the title
Cannot import "exports": { "module": ... } configured packages, instead we could get an error: Cannot use import statement outside a module
Cannot import "exports": { "module": ... } without type=module configured packages, instead we could get an error: Cannot use import statement outside a module
Mar 17, 2024
I've been running into the same issue with several packages such as react-content-loader and the workaround mentioned above seems to work for my case too.
Reproduction
Quick: Go to https://stackblitz.com/edit/remix-run-remix-cqepq2?file=app%2Froutes%2F_index.tsx
Or see #9071
'use-immer'
The package which causes this problem has these conditions:
type: module
in package.jsonexports: { ".": { import: "something" }}
in package.jsonThe package.json in [email protected], you can see like this:
And we can confirm this satisfies the condition.
Actually, if I add "type=module" to this, and restart remix run, it succeeds to import.
Extra contexts
related:
This could be the bug of vite. I can create issue instead on vite, but I'm not sure for now.
The most important part of this issue is I got small reproduction for these issues (currently discussions).
I'm also making PR for Option 1 after submitting this issue.Done.By the way, you may think, such packages should have
type: module
in their package.json. Actually, import from these packages from esm does not work, and multi-support is actually not possible by native level. Even if type=module is added, now, it cannot be require-able.Sadly, this is complicated situation. Node.js, TypeScript and Webpack treats exports as their own way. Webpack says as https://webpack.js.org/guides/package-exports/#support .
Thanks.
System Info
Used Package Manager
npm
Expected Behavior
Not get error and just can import it as ESM module as usual.
Actual Behavior
Got an error:
We have the workaround for this, just with importing by relative path:
The text was updated successfully, but these errors were encountered: