Closed tabl-lofton closed 9 months ago
Same thing is happening to me in my jest testing environment.
@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 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
@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$"
]
}
@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 ?
What's your bundler @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"
}
}
Duplicated with https://github.com/viclafouch/mui-tel-input/issues/84
I confirm, thank you
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