@mui/material@5.11.0 - js files has es6 syntax, which causes jest tests to stop working

[erik-d]

Duplicates

• I have searched the existing issues

Latest version

• I have tested the latest version

Steps to reproduce 🕹

Link to live example: None

Steps:

1. Install @mui/material@5.10.17
2. view node_modules/@mui/material/styles/useTheme.js (commonjs style)
3. Install @mui/material@5.11.0
4. view same file, now es6/2015

Current behavior 😯

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.

[... just different suggestion on how to configure jest]

Details:

/<path to my repository>/node_modules/@mui/material/styles/useTheme.js:1
({"Object.<anonymous>":function(module,exports,require,__dirname,__filename,jest){import * as React from 'react';
                                                                                  ^^^^^^

Downgrade to e.g. 5.10.17, these errors do not occur

Expected behavior 🤔

Tests should pass

Context 🔦

What I've seen so far, only affects jest tests.

Your environment 🌎

npx @mui/envinfo

  No browser, using node 16
  I apologise, using npx @mui/envinfo hangs on my macbook (15-inch, 2016), macOS Monteray (12.6)
  Using typescript, and I'm sure it is not the issue, tsconfig.json:
  {
  "compilerOptions": {
    "allowJs": true,
    "allowSyntheticDefaultImports": true,
    "baseUrl": ".",
    "composite": true,
    "declaration": true,
    "declarationDir": "dist/types",
    "esModuleInterop": true,
    "forceConsistentCasingInFileNames": true,
    "jsx": "react-jsx",
    "jsxImportSource": "@emotion/react",
    "lib": [
      "dom",
      "dom.iterable",
      "esnext"
    ],
    "module": "esnext",
    "moduleResolution": "node",
    "noEmit": false,
    "noFallthroughCasesInSwitch": true,
    "outDir": "dist",
    "resolveJsonModule": true,
    "strict": true,
    "target": "es5",
//    "types": ["@emotion/react/types/css-prop"],
  },
  "include": [
    "src/**/*.ts",
    "src/**/*.tsx",
    ".storybook/**/*.ts",
    ".storybook/**/*.tsx",
    "mdx.d.ts",
  ],
}

[erik-d]

Issue #35480 do not describe what I've encountered, so I rather posted my own report.

[siriwatknp]

@michaldudak Did we change anything related to the build script?

[michaldudak]

Nothing I'm aware of should change this. I'll investigate it right away.

[michaldudak]

The current state of things is the correct one. In 5.10.3, we inadvertently switched our main bundle build from ESM(-ish) to CJS. Thanks to #35324, the previous format is restored.

For Jest to work, use a transpiler such as Babel, as described in the docs: https://jestjs.io/docs/getting-started#using-babel