SyntaxError: Cannot use import statement outside a module

[qinfengwu90]

Steps to reproduce

1. "intl-tel-input": v21.1.1
2. run npm run dev in Next.js v13.2.4
3. On the page, error occurred

SyntaxError: Cannot use import statement outside a module
    at internalCompileFunction (node:internal/vm:128:18)
    at wrapSafe (node:internal/modules/cjs/loader:1280:20)
    at Module._compile (node:internal/modules/cjs/loader:1332:27)
    at Module._extensions..js (node:internal/modules/cjs/loader:1427:10)
    at Module.load (node:internal/modules/cjs/loader:1206:32)
    at Module._load (node:internal/modules/cjs/loader:1022:12)
    at Module.require (node:internal/modules/cjs/loader:1231:19)
    at require (node:internal/modules/helpers:179:18)
    at 8598 (/Users/qinfengwu/WebstormProjects/frontend-next/.next/server/pages/onboarding/complete-profile.js:1339:18)
    at __webpack_require__ (/Users/qinfengwu/WebstormProjects/frontend-next/.next/server/webpack-runtime.js:33:42)
    at eval (webpack-internal:https:///6692:32:79)
    at __webpack_require__.a (/Users/qinfengwu/WebstormProjects/frontend-next/.next/server/webpack-runtime.js:97:13)
    at eval (webpack-internal:https:///6692:1:21)
    at 6692 (/Users/qinfengwu/WebstormProjects/frontend-next/.next/server/pages/onboarding/complete-profile.js:304:1)
    at __webpack_require__ (/Users/qinfengwu/WebstormProjects/frontend-next/.next/server/webpack-runtime.js:33:42)
    at /Users/qinfengwu/WebstormProjects/frontend-next/.next/server/pages/onboarding/complete-profile.js:317:77
    at __webpack_require__.a (/Users/qinfengwu/WebstormProjects/frontend-next/.next/server/webpack-runtime.js:97:13)
    at 467 (/Users/qinfengwu/WebstormProjects/frontend-next/.next/server/pages/onboarding/complete-profile.js:312:21)
    at __webpack_require__ (/Users/qinfengwu/WebstormProjects/frontend-next/.next/server/webpack-runtime.js:33:42)
    at eval (webpack-internal:https:///8933:10:88)
    at __webpack_require__.a (/Users/qinfengwu/WebstormProjects/frontend-next/.next/server/webpack-runtime.js:97:13)
    at eval (webpack-internal:https:///8933:1:21)
    at 8933 (/Users/qinfengwu/WebstormProjects/frontend-next/.next/server/pages/onboarding/complete-profile.js:296:1)
    at __webpack_require__ (/Users/qinfengwu/WebstormProjects/frontend-next/.next/server/webpack-runtime.js:33:42)
    at /Users/qinfengwu/WebstormProjects/frontend-next/.next/server/pages/onboarding/complete-profile.js:335:73
    at __webpack_require__.a (/Users/qinfengwu/WebstormProjects/frontend-next/.next/server/webpack-runtime.js:97:13)
    at 4937 (/Users/qinfengwu/WebstormProjects/frontend-next/.next/server/pages/onboarding/complete-profile.js:330:21)
    at __webpack_require__ (/Users/qinfengwu/WebstormProjects/frontend-next/.next/server/webpack-runtime.js:33:42)
    at eval (webpack-internal:https:///3751:11:92)
    at __webpack_require__.a (/Users/qinfengwu/WebstormProjects/frontend-next/.next/server/webpack-runtime.js:97:13)
    at eval (webpack-internal:https:///3751:1:21)
    at 3751 (/Users/qinfengwu/WebstormProjects/frontend-next/.next/server/pages/onboarding/complete-profile.js:1054:1)
    at __webpack_require__ (/Users/qinfengwu/WebstormProjects/frontend-next/.next/server/webpack-runtime.js:33:42)
    at __webpack_exec__ (/Users/qinfengwu/WebstormProjects/frontend-next/.next/server/pages/onboarding/complete-profile.js:2517:39)
    at /Users/qinfengwu/WebstormProjects/frontend-next/.next/server/pages/onboarding/complete-profile.js:2518:28
    at Object.<anonymous> (/Users/qinfengwu/WebstormProjects/frontend-next/.next/server/pages/onboarding/complete-profile.js:2521:3)
    at Module._compile (node:internal/modules/cjs/loader:1369:14)
    at Module._extensions..js (node:internal/modules/cjs/loader:1427:10)
    at Module.load (node:internal/modules/cjs/loader:1206:32)
    at Module._load (node:internal/modules/cjs/loader:1022:12)
    at Module.require (node:internal/modules/cjs/loader:1231:19)
    at require (node:internal/modules/helpers:179:18)
    at Object.requirePage (/Users/qinfengwu/WebstormProjects/frontend-next/node_modules/next/dist/server/require.js:88:12)
    at /Users/qinfengwu/WebstormProjects/frontend-next/node_modules/next/dist/server/load-components.js:49:73
    at async Object.loadComponentsImpl [as loadComponents] (/Users/qinfengwu/WebstormProjects/frontend-next/node_modules/next/dist/server/load-components.js:49:26)
    at async DevServer.findPageComponentsImpl (/Users/qinfengwu/WebstormProjects/frontend-next/node_modules/next/dist/server/next-server.js:600:36) {
  page: '/onboarding/complete-profile'
}

[jackocnr]

Thanks for reporting. This should be fixed in v21.1.2 - can you give it a try and let me know?

[jackocnr]

Closing due to inactivity.

[justinfarrelldev]

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:https:///home/justi/Projects/lifted-resume/node_modules/vite/dist/node/chunks/dep-cNe07EU9.js:55096:17)
    at async ssrImport (file:https:///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:https:///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]

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]

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]

I'll try that out later and report back! Thank you

[justinfarrelldev]

Just as an update, I still plan to try it out - I've just been busy! Thank you again

[jackocnr]

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.