SyntaxError: Unexpected token 'export' when upgrading to 5.11.0

[cagosto]

Duplicates

• [X] I have searched the existing issues

Latest version

• [X] I have tested the latest version

Steps to reproduce 🕹

Link to live example:

Steps:

1. upgrade to mui 5.11.0
2. run jest test yarn test

Current behavior 😯

By default "node_modules" folder is ignored by transformers.

Here's what you can do:
 • If you are trying to use ECMAScript Modules, see https://jestjs.io/docs/ecmascript-modules for how to enable it.
 • If you are trying to use TypeScript, see https://jestjs.io/docs/getting-started#using-typescript
 • To have some of your "node_modules" files transformed, you can specify a custom "transformIgnorePatterns" in your config.
 • If you need a custom transformation specify a "transform" option in your config.
 • If you simply want to mock your non-JS modules (e.g. binary assets) you can stub them out with the "moduleNameMapper" config option.

You'll find more details and examples of these config options in the docs:
https://jestjs.io/docs/configuration
For information about custom transformations, see:
https://jestjs.io/docs/code-transformation

Details:

/Users/carlosagosto/projectName/node_modules/@mui/material/colors/common.js:5
export default common;
^^^^^^

SyntaxError: Unexpected token 'export'
> 2 | import common from '@mui/material/colors/common';

Expected behavior 🤔

Same as what was happening with version 5.10.17 jest test should pass because I am amazing! 😁

Context 🔦

Trying to get jest test to run with out have issue with the mui package. Look to be an issue with @mui/material/colors

Your environment 🌎

npx @mui/envinfo

``` Don't forget to mention which browser you used. System: OS: macOS 13.0.1 Binaries: Node: 16.15.1 - ~/.nvm/versions/node/v16.15.1/bin/node Yarn: 1.22.15 - /usr/local/bin/yarn npm: 8.11.0 - ~/.nvm/versions/node/v16.15.1/bin/npm Browsers: Chrome: 108.0.5359.98 Edge: 108.0.1462.46 Firefox: 103.0.2 Safari: 16.1 npmPackages: @emotion/react: ^11.10.5 => 11.10.5 @emotion/styled: ^11.10.5 => 11.10.5 @mui/base: 5.0.0-alpha.109 @mui/core-downloads-tracker: 5.10.17 @mui/icons-material: ^5.11.0 => 5.11.0 @mui/lab: ^5.0.0-alpha.112 => 5.0.0-alpha.112 @mui/material: ^5.10.17 => 5.10.17 @mui/private-theming: 5.10.16 @mui/styled-engine: 5.10.16 @mui/system: 5.10.17 @mui/types: 7.2.2 @mui/utils: 5.10.16 @mui/x-date-pickers: ^5.0.10 => 5.0.10 @types/react: ^18.0.26 => 18.0.26 react: ^18.2.0 => 18.2.0 react-dom: ^18.2.0 => 18.2.0 typescript: ^4.9.4 => 4.9.4 ```

[siriwatknp]

Would be great if you could provide a repository that we can take a look, otherwise I am not sure how to help.

[federico-ntr]

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

[cagosto]

looks like changing the way I did the import has solved the issue for me import common from '@mui/material/colors/common'; to import { common } from '@mui/material/colors'; odd cause I was able to build and run that app with no issue was only an issue when I ran the jest test.

[federico-ntr]

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.

[yaboi]

Agreed that this should be re-opened.

I'm seeing similar behavior..

1. No other adjustments besides updating from v5.10.14 to v5.11.0
2. Happens when I run jest test, but not when I run my docs site (storybook)

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

SyntaxError: Cannot use import statement outside a module

I'm using unsupportedProp with the following import syntax

import { unsupportedProp } from '@mui/material';

[adamsujeta]

Looks like I have a similar issue. On the version 5.10.17 I don't have any problems.

error - .../node_modules/.pnpm/@mui+material@5.11.2_lskpmcsdi7ipu6qpuapyu56ihm/node_modules/@mui/material/Unstable_Grid2/Grid2.js:1
import PropTypes from 'prop-types';
^^^^^^

SyntaxError: Cannot use import statement outside a module
    at Object.compileFunction (node:vm:360:18)
    at wrapSafe (node:internal/modules/cjs/loader:1088:15)
    at Module._compile (node:internal/modules/cjs/loader:1123:27)
    at Module._extensions..js (node:internal/modules/cjs/loader:1213:10)
    at Module.load (node:internal/modules/cjs/loader:1037:32)
    at Module._load (node:internal/modules/cjs/loader:878:12)
    at Module.require (node:internal/modules/cjs/loader:1061:19)
    at require (node:internal/modules/cjs/helpers:103:18)
    at @mui/material/Unstable_Grid2/Grid2 

[yaboi]

Just tested and this is still happening in v5.11.2

[karlomedallo]

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)

[matannahmani]

BUMP ^^ still exists on nextjs

[siriwatknp]

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.

[karlomedallo]

@siriwatknp : how can we import TypographyOptions ? Currently, we have:

import { TypographyOptions } from "@mui/material/styles/createTypography";

[DzoniBlejz]

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.

[yaboi]

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.

[AmeyaDalvi]

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.

I have the same exact issue, have you tried Nexjs transpiling?

[nicolasmaurizi]

try `

</LocalizationProvider>`

[AmeyaDalvi]

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

[monteiz]

Transform this:

import amber from "@mui/material/colors/amber";

to this:

import { amber } from "@mui/material/colors";

[angelmiigaa]

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?

[efkan]

The problem is still there.

Working on a Nextjs application and Jest works as expected unless I add the MUI modules.

EnvInfo:

  System:
    OS: macOS 13.4.1
  Binaries:
    Node: 16.16.0 - ~/.nvm/versions/node/v16.16.0/bin/node
    Yarn: 1.22.19 - /usr/local/bin/yarn
    npm: 8.16.0 - ~/.nvm/versions/node/v16.16.0/bin/npm
  Browsers:
    Chrome: 114.0.5735.198
    Edge: Not Found
    Safari: 16.5.1
  npmPackages:
    @emotion/react: ^11.11.1 => 11.11.1 
    @emotion/styled: ^11.11.0 => 11.11.0 
    @mui/base:  5.0.0-beta.6 
    @mui/core-downloads-tracker:  5.13.7 
    @mui/icons-material: ^5.13.7 => 5.13.7 
    @mui/lab: ^5.0.0-alpha.135 => 5.0.0-alpha.135 
    @mui/material: ^5.13.7 => 5.13.7 
    @mui/private-theming:  5.13.7 
    @mui/styled-engine:  5.13.2 
    @mui/system:  5.13.7 
    @mui/types:  7.2.4 
    @mui/utils:  5.13.7 
    @mui/x-date-pickers: ^6.9.2 => 6.9.2 
    @mui/x-date-pickers-pro: ^6.9.2 => 6.9.2 
    @mui/x-license-pro: ^6.9.0 => 6.9.0 
    @types/react: 18.0.28 => 18.0.28 
    react: ^18.2.0 => 18.2.0 
    react-dom: ^18.2.0 => 18.2.0 
    styled-components:  6.0.3 
    typescript: 4.9.5 => 4.9.5 

[janeirojoaopedro]

In my case I removed DemoContainer since I do not need it and it worked

[ghost]

Framework: NextJs - 13.2.4 MUI Version: 5.11.14

Getting an error when I started using styled from @mui/material/styles.

Here's the file where I'm importing it in:

"use client";

// MUI
import { Badge } from "@mui/material";
import { styled } from "@mui/material/styles";

// Styled Badge Component
const StyledBadge = styled(Badge)(({ theme }) => ({
    "& .MuiBadge-badge": {
        right: -3,
        top: 4,
        border: `2px solid #fff`,
        padding: "0 4px",
    },
}));

export default StyledBadge;

And it's the same error:

Test suite failed to run

    Jest encountered an unexpected token

    Jest failed to parse a file. This happens e.g. when your code or its dependencies use non-standard JavaScript syntax, or when Jest is not configured to support such syntax.

And here are the error details:

    Details:

    C:\Users\........\Documents\Coding\main-app\........\node_modules\@mui\material\styles\styled.js:1
    ({"Object.<anonymous>":function(module,exports,require,__dirname,__filename,jest){import { createStyled, shouldForwardProp } from '@mui/system';

    SyntaxError: Cannot use import statement outside a module

[ghost]

Framework: NextJs - 13.2.4 MUI Version: 5.11.14

Getting an error when I started using styled from @mui/material/styles.

Here's the file where I'm importing it in:

"use client";

// MUI
import { Badge } from "@mui/material";
import { styled } from "@mui/material/styles";

// Styled Badge Component
const StyledBadge = styled(Badge)(({ theme }) => ({
    "& .MuiBadge-badge": {
        right: -3,
        top: 4,
        border: `2px solid #fff`,
        padding: "0 4px",
    },
}));

export default StyledBadge;

And it's the same error:

Test suite failed to run

    Jest encountered an unexpected token

    Jest failed to parse a file. This happens e.g. when your code or its dependencies use non-standard JavaScript syntax, or when Jest is not configured to support such syntax.

And here are the error details:

    Details:

    C:\Users\........\Documents\Coding\main-app\........\node_modules\@mui\material\styles\styled.js:1
    ({"Object.<anonymous>":function(module,exports,require,__dirname,__filename,jest){import { createStyled, shouldForwardProp } from '@mui/system';

    SyntaxError: Cannot use import statement outside a module

Fixed it. Had to transform @mui/system/... imports in my next.config.js.

Here's what the modularizeImports property looks like in my next.config.js:

/** @type {import('next').NextConfig} */
const nextConfig = {
    ...
    modularizeImports: {
        "@mui/material/?(((\\w*)?/?)*)": {
            transform: "@mui/material/{{ matches.[1] }}/{{member}}",
        },
        "@mui/icons-material/?(((\\w*)?/?)*)": {
            transform: "@mui/icons-material/{{ matches.[1] }}/{{member}}",
        },
        "@mui/system/?(((\\w*)?/?)*)": {
            transform: "@mui/system/{{ matches.[1] }}/{{member}}",
        },
    },
    ...
};

module.exports = nextConfig;

[vladern]

:-1: Fails: import useTheme from '@mui/material/styles/useTheme'; :+1: Works: import { useTheme } from '@mui/material/styles';

[JonasDoe]

A similar error happend to me with import { dark, light } from '@mui/material/styles/createPalette';. Dunno about the proper alternative, but removing those lines (and all usages aof dark and light) helped.