transpilePackages does not work for @mui/material

[mricharz]

Verify canary release

• I verified that the issue exists in the latest Next.js canary release

Provide environment information

Operating System:
  Platform: win32
  Arch: x64
  Version: Windows 10 Pro
Binaries:
  Node: 18.17.1
  npm: N/A
  Yarn: N/A
  pnpm: N/A
Relevant Packages:
  next: 14.1.0 (same with 14.1.1-canary.36)
  eslint-config-next: N/A
  react: 18.2.0
  react-dom: 18.2.0
  typescript: 5.3.3
Next.js Config:
  output: N/A

Which example does this report relate to?

with-jest

What browser are you using? (if relevant)

No response

How are you deploying your application? (if relevant)

No response

Describe the Bug

I used npx create-next-app@latest --example with-jest with-jest-app to create the project
Than i added @mui/material and all required dependencies.
Than i created the hook and the test.

I tried adding the @mui to transpilePackages in next.config.js but it didn't help.

without entry in transpilePackages:

C:\Users\...\IdeaProjects\with-jest-app\node_modules\@mui\material\index.js:9
import * as colors from './colors';
^^^^^^

SyntaxError: Cannot use import statement outside a module

   7 | // Mock the theme with breakpoints
   8 | const theme = createTheme({
>  9 |   breakpoints: {
     |                ^
  10 |     values: {
  11 |       xs: 0,
  12 |       sm: 600,

  at Runtime.createScriptFromCode (node_modules/jest-runtime/build/index.js:1505:14)
  at Object.<anonymous> (hooks/__tests__/useIsMobile.test.tsx:9:16)

with entry in transpilePackages:

C:\Users\...\IdeaProjects\with-jest-app\node_modules\@babel\runtime\helpers\esm\extends.js:1
({"Object.<anonymous>":function(module,exports,require,__dirname,__filename,jest){export default function _extends() {
                                                                                  ^^^^^^

SyntaxError: Unexpected token 'export'

   7 | // Mock the theme with breakpoints
   8 | const theme = createTheme({
>  9 |   breakpoints: {
     |                ^
  10 |     values: {
  11 |       xs: 0,
  12 |       sm: 600,

  at Runtime.createScriptFromCode (node_modules/jest-runtime/build/index.js:1505:14)
  at Object.<anonymous> (hooks/__tests__/useIsMobile.test.tsx:9:16)

Expected Behavior

jest test should run.

To Reproduce

1. checkout the demo repo: https://github.com/mricharz/with-jest-app-mui-demo
2. install deps
3. start "test" script from package.json

[samberic]

+1, I've hit this issue too. Trying to add some tests to our new-ish project and completely blocked because we've got MUI. :(

[BaileyMillerSSI]

Seems very related to my issue #65707
Went from 14.0.1 -> 14.1.1 and now I am getting errors because of modules from external libraries.