SyntaxError: Cannot use import statement outside a module

[tabl-lofton]

I got this unexpected behavior when importing MuiTelInput. I'm not sure what the specific issue is, but when I comment it out, my web page loads perfectly fine.

Here is the codeSandbox: https://codesandbox.io/s/mui-tel-input-8tf4jp?file=/src/styles.css

However, it does function in the code sandbox, so I believe the error might be on me, but I'm not sure specifically what, as I changed nothing that would warrant this error occurring as far as I know

[conc2304]

Same thing is happening to me in my jest testing environment.

[darkkatarsis]

@tabl-lofton I have the same problem using the latest packages i.e. react > 18. After commenting out the component the site works fine

/vercel/path0/node_modules/mui-tel-input/dist/mui-tel-input.es.js:1
--
12:08:16.486 | import { jsxs as _, jsx as p, Fragment as Fe } from "react/jsx-runtime";
12:08:16.486 | ^^^^^^
12:08:16.487 |  
12:08:16.487 | SyntaxError: Cannot use import statement outside a module

[tabl-lofton]

@tabl-lofton I have the same problem using the latest packages i.e. react > 18. After commenting out the component the site works fine

/vercel/path0/node_modules/mui-tel-input/dist/mui-tel-input.es.js:1
--
12:08:16.486 | import { jsxs as _, jsx as p, Fragment as Fe } from "react/jsx-runtime";
12:08:16.486 | ^^^^^^
12:08:16.487 |  
12:08:16.487 | SyntaxError: Cannot use import statement outside a module

That's what I did, and it worked fine for me as well, which leads me to believe there's something wrong with the MUI phone component itself. For the time being, I may just make my own, simpler component to handle phone numbers then

[iagotb]

@conc2304

Same thing is happening to me in my jest testing environment.

Same issue happened to me and I was able to fix jest test adding this to package.json

 "jest": {
    "transformIgnorePatterns": [
      "node_modules/(?!(mui-tel-input)).*\\.js$"
    ]
  }

[darkkatarsis]

@iagotb But what does it have to do with jest? I, for example, do not use it in a project and I still get the same error ?

[viclafouch]

What's your bundler @darkkatarsis ?

[darkkatarsis]

@viclafouch I use the default bundler from Next.js

This is my next.config.mjs:

import runtimeCaching from './config/runtimeCaching.js';
import nextPWA from 'next-pwa';

import nextTranslate from 'next-translate-plugin';

const withPWA = nextPWA({
    disable: process.env.NODE_ENV === 'development',
    dest: 'public',
    dynamicStartUrl: false,
    cacheOnFrontEndNav: true,
    skipWaiting: true,
    runtimeCaching,
    buildExcludes: [/app-build-manifest.json$/],
    fallbacks: {
        document: '/offline',
    },
});

const config = {
    images: {
        domains: ['googleusercontent.com'],
        formats: ['image/avif', 'image/webp'],
        minimumCacheTTL: 31536000,
    },
    swcMinify: false,
    reactStrictMode: true,
};

export default nextTranslate(withPWA(config));

and package.json

{
    "name": "panel",
    "version": "2.1.0",
    "private": true,
    "scripts": {
        "dev": "next dev",
        "build": "next build",
        "start": "next start",
        "lint": "next lint"
    },
    "dependencies": {
        "@emotion/react": "^11.11.1",
        "@emotion/styled": "^11.11.0",
        "@fontsource/roboto": "^5.0.8",
        "@hookform/resolvers": "^3.3.2",
        "@mdi/js": "^7.3.67",
        "@mui/icons-material": "^5.14.16",
        "@mui/lab": "^5.0.0-alpha.152",
        "@mui/material": "^5.14.17",
        "@mui/x-data-grid": "^6.18.1",
        "@mui/x-date-pickers": "^6.18.1",
        "@svgr/webpack": "^8.1.0",
        "dayjs": "^1.11.10",
        "js-cookie": "^3.0.5",
        "material-ui-popup-state": "^5.0.10",
        "mongodb": "^6.2.0",
        "mui-tel-input": "^4.0.1",
        "next": "14.0.2",
        "next-auth": "^4.24.5",
        "next-translate": "^2.6.2",
        "nextjs-progressbar": "^0.0.16",
        "npm-check-updates": "^16.14.6",
        "path": "^0.12.7",
        "react": "^18.2.0",
        "react-colorful": "^5.6.1",
        "react-detect-offline": "^2.4.5",
        "react-dom": "^18.2.0",
        "react-helmet-async": "^1.3.0",
        "react-hook-form": "^7.48",
        "react-lottie-player": "^1.5.5",
        "sass": "^1.69",
        "yup": "^1.3.2",
        "yup-phone-lite": "^2.0.1"
    },
    "devDependencies": {
        "@netlify/plugin-nextjs": "^4.41.1",
        "async": ">=3.2.5",
        "eslint": "^8.53.0",
        "eslint-config-next": "^14.0.2",
        "next-pwa": "5.6.0",
        "next-translate-plugin": "^2.6.2",
        "sharp": "^0.32.6"
    }
}

[viclafouch]

Duplicated with https://github.com/viclafouch/mui-tel-input/issues/84

[darkkatarsis]

I confirm, thank you