material-ui: SyntaxError: Unexpected token 'export' when upgrading to 5.11.0

I have an issue with

SyntaxError: Unexpected token ‘export’

import { DemoContainer } from ‘@mui/x-date-pickers/internals/demo’ import { AdapterMoment } from ‘@mui/x-date-pickers/AdapterMoment’ import { LocalizationProvider } from ‘@mui/x-date-pickers/LocalizationProvider’ import { DatePicker } from ‘@mui/x-date-pickers/DatePicker’

it seams like it’s the problem with x-date-pickers, but I tried all, reinstalled the package, still have this error.

duplicate #35480

@matannahmani @adamsujeta Please make sure that you don’t have import more than 3 levels deep:

-import Grid from "@mui/material/Unstable_Grid2/Grid2"; ❌
+import Grid from "@mui/material/Unstable_Grid2"; ✅

-import common from '@mui/material/colors/common'; ❌
+import * as colors from '@mui/material/colors'; ✅
+console.log(colors.common)

For more details, see https://github.com/mui/material-ui/issues/35480#issuecomment-1354334459.

try <LocalizationProvider dateAdapter={AdapterDayjs}> <DatePicker label="Basic date picker" /> </LocalizationProvider>

I don’t think this should be closed. It seems like you found a workaround, but the issue is still there, at least until it is stated somewhere that we should change the way we import stuff.

I have an issue with

SyntaxError: Unexpected token ‘export’

import { DemoContainer } from ‘@mui/x-date-pickers/internals/demo’ import { AdapterMoment } from ‘@mui/x-date-pickers/AdapterMoment’ import { LocalizationProvider } from ‘@mui/x-date-pickers/LocalizationProvider’ import { DatePicker } from ‘@mui/x-date-pickers/DatePicker’

it seams like it’s the problem with x-date-pickers, but I tried all, reinstalled the package, still have this error.

did you fix it?

try <LocalizationProvider dateAdapter={AdapterDayjs}> <DatePicker label="Basic date picker" /> </LocalizationProvider>

Yep, that did the trick. If you don’t really need a DemoContainer then you need not use it and it should work! Other than that, I still do not have a solution for the Unexpected token error

BUMP ^^ still exists on nextjs

Just tested and this is still happening in v5.11.2

Please make sure that you don’t have import more than 3 levels deep:

@siriwatknp - This fixed my issue. Mine was the following:

- import unsupportedProp from '@mui/material/utils/unsupportedProp';
+ import { unsupportedProp } from '@mui/material/utils';

Strangely enough, this was manifesting as the following error when I ran my test suite (adopted from MUI’s monorepo test suite)

TypeError: Unknown file extension ".jsx" for ...test.jsx
    at new NodeError (node:internal/errors:371:5)
    at Object.file: (node:internal/modules/esm/get_format:72:15)
    at defaultGetFormat (node:internal/modules/esm/get_format:85:38)
    at defaultLoad (node:internal/modules/esm/load:13:42)
    at ESMLoader.load (node:internal/modules/esm/loader:303:26)
    at ESMLoader.moduleProvider (node:internal/modules/esm/loader:230:58)
    ...

We’ve always used *.test.jsx so it was weird this randomly started happening when I upgraded to anything beyond v5.11.x. To try and get past the error, I renamed the file to .js and ignored my eslint react/jsx-filename-extension rule I then got the following error:

.../node_modules/@mui/material/utils/unsupportedProp.js:1
import { unstable_unsupportedProp as unsupportedProp } from '@mui/utils';
^^^^^^

SyntaxError: Cannot use import statement outside a module
    ...
    at Object.<anonymous> (.../Tooltip/Tooltip.jsx:8:1)

Sure enough, when I opened up Tooltip.jsx I realized I was importing unsupportedProp directly. When I made the adjustment mentioned at the beginning of this rant and returned everything back the way it was my test suite ran just fine and everything is working agian.

Same, I tried 5.10.17 and it works fine but the below error shows up when using 5.11.0, 5.11.1, 5.11.2

info  - Loaded env from /home/user/src/org/project/sub-project/app/apps/portal/.env.local
info  - Linting and checking validity of types...
info  - Creating an optimized production build...
info  - Compiled successfully
info  - Collecting page data...
/home/user/src/org/project/sub-project/app/node_modules/.pnpm/@mui+material@5.11.2_lskpmcsdi7ipu6qpuapyu56ihm/node_modules/@mui/material/styles/createTheme.js:1
import _extends from "@babel/runtime/helpers/esm/extends";
^^^^^^
SyntaxError: Cannot use import statement outside a module
    at Object.compileFunction (node:vm:352:18)
    at wrapSafe (node:internal/modules/cjs/loader:1033:15)
    at Module._compile (node:internal/modules/cjs/loader:1069:27)
    at Object.Module._extensions..js (node:internal/modules/cjs/loader:1159:10)
    at Module.load (node:internal/modules/cjs/loader:981:32)
    at Function.Module._load (node:internal/modules/cjs/loader:822:12)
    at Module.require (node:internal/modules/cjs/loader:1005:19)
    at require (node:internal/modules/cjs/helpers:102:18)
    at Object.5568 (/home/user/src/org/project/sub-project/app/apps/portal/.next/server/pages/_app.js:506:37)
    at __webpack_require__ (/home/user/src/org/project/sub-project/app/apps/portal/.next/server/webpack-runtime.js:25:42)
> Build error occurred
Error: Failed to collect page data for /
    at /home/user/src/org/project/sub-project/app/node_modules/.pnpm/next@13.1.1_7xlrwlvvs7cv2obrs6a5y6oxxq/node_modules/next/dist/build/utils.js:960:15
    at processTicksAndRejections (node:internal/process/task_queues:96:5) {
  type: 'Error'
}
 ELIFECYCLE  Command failed with exit code 1.
ERROR: command finished with error: command (/home/user/src/org/project/sub-project/app/apps/portal) pnpm run build exited (1)

I had a very similar error with the import of Unstable_Grid2 which I believe is connected to this issue:

Details:

    /Users/redacted/Documents/Progetti/redacted/redacted/node_modules/@mui/material/Unstable_Grid2/Grid2.js:1
    ({"Object.<anonymous>":function(module,exports,require,__dirname,__filename,jest){import PropTypes from 'prop-types';
                                                                                      ^^^^^^

    SyntaxError: Cannot use import statement outside a module

      10 | import { useEffect, useState } from "react";
      11 | import { useParams } from "react-router-dom";
    > 12 | import Grid from "@mui/material/Unstable_Grid2/Grid2";

Unfortunately I have no time to dig into the issue or to create a repo which reproduces the issue, but I thought it was worth reporting.

Reverted to 5.10.17 for now