Closed qinfengwu90 closed 1 month ago
Thanks for reporting. This should be fixed in v21.1.2 - can you give it a try and let me know?
Closing due to inactivity.
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!
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?)
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.
I'll try that out later and report back! Thank you
Just as an update, I still plan to try it out - I've just been busy! Thank you again
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.
Steps to reproduce
npm run dev
in Next.js v13.2.4