jackocnr
commented
7 months ago Thanks for reporting. This should be fixed in v21.1.2 - can you give it a try and let me know?
Closed qinfengwu90 closed 3 months ago
jackocnr
commented
7 months ago Thanks for reporting. This should be fixed in v21.1.2 - can you give it a try and let me know?
jackocnr
commented
7 months ago Closing due to inactivity.
justinfarrelldev
commented
4 months ago I'm also still seeing this (with Remix v^2.9.1). This version of Remix uses Vite under the hood at v^5.1.0 so I'm using a bundler.
I'm on v^23.1.0 of intl-tel-input but I also tried v21.1.1 and that sadly had the same error!
I'm encountering the following (this is within a route called "login.tsx"):
SyntaxError: Cannot use import statement outside a module
at internalCompileFunction (node:internal/vm:77:18)
at wrapSafe (node:internal/modules/cjs/loader:1288:20)
at Module._compile (node:internal/modules/cjs/loader:1340:27)
at Module._extensions..js (node:internal/modules/cjs/loader:1435:10)
at Module.load (node:internal/modules/cjs/loader:1207:32)
at Module._load (node:internal/modules/cjs/loader:1023:12)
at cjsLoader (node:internal/modules/esm/translators:345:17)
at ModuleWrap.<anonymous> (node:internal/modules/esm/translators:294:7)
at ModuleJob.run (node:internal/modules/esm/module_job:218:25)
at async ModuleLoader.import (node:internal/modules/esm/loader:329:24)
at async nodeImport (file:///home/justi/Projects/lifted-resume/node_modules/vite/dist/node/chunks/dep-cNe07EU9.js:55096:17)
at async ssrImport (file:///home/justi/Projects/lifted-resume/node_modules/vite/dist/node/chunks/dep-cNe07EU9.js:54998:24)
at async eval (/home/justi/Projects/lifted-resume/app/routes/login.tsx:10:31)
at async instantiateModule (file:///home/justi/Projects/lifted-resume/node_modules/vite/dist/node/chunks/dep-cNe07EU9.js:55058:9)
5:56:02 PM [vite] Error when evaluating SSR module virtual:remix/server-build: failed to import "/app/routes/login.tsx"My package.json uses type: "module", which I think is the crux of this issue. 😅
Here is how I am importing and using intl-tel-input:
// at the top of the file, last after a bunch of other unrelated imports
import IntlTelInput from 'intl-tel-input/react';
import 'intl-tel-input/styles';
// ... after a bunch of boilerplate and types, I just use IntlTelInput as a component in the body of the route's component like so
<div className="label">
<span className="label-text">Phone Number</span>
</div>
<div className="input input-bordered w-full">
<IntlTelInput />
</div>This component is sometimes rendered with SSR (which is very preferable since it is almost the entire route's worth of stuff)!
I really hope we can get to the bottom of this, as I think this library looks really awesome and perfect for my use-case! 😄
Let me know if you need a reproduction, I don't want to have to make one (there's a lot of stuff in the repo) but if it's really necessary I can do it!
jackocnr
commented
4 months ago I wonder if this is being caused by the dynamic import we're using. Could you try commenting out that whole import statement (in your node_modules/intl-tel-input/react/build/IntlTelInput.js) and see if that fixes the issue? (maybe also try completely emptying this file, and rebuilding, to see if the changes to the file are even being picked up?)
jackocnr
commented
4 months ago Also, with the way the react component works, I really don't think SSR will work anyway, so I would say you'll need to disable SSR for this component.
justinfarrelldev
commented
4 months ago I'll try that out later and report back! Thank you
justinfarrelldev
commented
4 months ago Just as an update, I still plan to try it out - I've just been busy! Thank you again
jackocnr
commented
3 months ago I know you're planning to review this, but as I said, the way this component works (as a wrapper around the JavaScript plugin), it's really not going to play well with SSR, so I think SSR just needs to be disabled in this case. Closing this for now.
micah-redwood
commented
4 weeks ago I'm also running into this error in a Vite-based project. Looks like the underlying issue is that intl-tel-input/react does export an ESM build, but does not use "type": "module" in package.json. If you add that to node_modules/intl-tel-input/package.json then it builds just fine.
The solution that worked for me was writing a tiny plugin to tell Vite to treat intl-tel-input's export as ESM even though it's not specified as such in the package.json file.
// In vite config's plugins array:
plugins: [
// other plugins here...
forceESM(['intl-tel-input']),
]
// Plugin to force ESM for specific modules
function forceESM(modules: string[]) {
return {
name: 'vite-plugin-force-esm',
resolveId(id: string) {
if (modules.some((m) => id.includes(m))) {
return {
id,
moduleSideEffects: false,
meta: {
moduleType: 'es',
},
};
}
},
};
}
Steps to reproduce
npm run devin Next.js v13.2.4