search

jackocnr / intl-tel-input

A JavaScript plugin for entering and validating international telephone numbers
https://intl-tel-input.com
MIT License
7.54k stars 1.94k forks source link

SyntaxError: Cannot use import statement outside a module #1565

Closed qinfengwu90 closed 1 month ago

qinfengwu90 commented 4 months ago

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
Screenshot 2024-04-09 at 17 23 56 
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:///6692:32:79)
    at __webpack_require__.a (/Users/qinfengwu/WebstormProjects/frontend-next/.next/server/webpack-runtime.js:97:13)
    at eval (webpack-internal:///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:///8933:10:88)
    at __webpack_require__.a (/Users/qinfengwu/WebstormProjects/frontend-next/.next/server/webpack-runtime.js:97:13)
    at eval (webpack-internal:///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:///3751:11:92)
    at __webpack_require__.a (/Users/qinfengwu/WebstormProjects/frontend-next/.next/server/webpack-runtime.js:97:13)
    at eval (webpack-internal:///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 commented 4 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 4 months ago

Closing due to inactivity.

justinfarrelldev commented 2 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 1 month 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 1 month 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 1 month ago

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

justinfarrelldev commented 1 month ago

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

jackocnr commented 1 month 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.