[ESM] Vite + vitest + @mui/material v5.11.0 - createPalette.js:1 seems to be an ES Module but shipped in a CommonJS package.

[borgfriend]

When using [email protected] and [email protected] with @mui/material.

Starting with "@mui/material": "5.11.0",

I am getting the following error:

Module /<project_name>/node_modules/@mui/material/styles/createPalette.js:1 seems to be an ES Module but shipped in a CommonJS package. You might want to create an issue to the package "@mui/material" asking them to ship the file in .mjs extension or add "type": "module" in their package.json.

As a temporary workaround you can try to inline the package by updating your config:

// vitest.config.js
export default {
  test: {
    deps: {
      inline: [
        "@mui/material"
      ]
    }
  }
}

Following the advice from the error message does not fix the issue.

For the time being I reverted back to "@mui/material": "5.10.17" - the tests run without any issue.

Any advice on how to use the current version?

[mnajdova]

Are you importing stuff directly from this file? I am asking because that is not supported. We allow imports up to level3, for e.g. @mui/material/styles. All imports which are valid should work as expected. I guess this may be related to https://github.com/mui/material-ui/issues/35480

If this is not the case, please share e reproduction repository where we can check the issue.

[borgfriend]

We are not importing anything directly from this file.

I am encountering the problem with this repository https://github.com/catenax-ng/product-item-relationship-service-frontend.

[waterbuckit]

I am experiencing a similar issue when trying to access TablePaginationActions.

I wanted to add a new control to TablePaginationActions , but still maintain current behaviour. TablePaginationActions is imported from @mui/material/TablePagination/TablePaginationActions which, due to being a level4 import is causing the above issue.

Is it possible that we can export TablePaginationActions from @mui/material/TablePagination?

[ldeveber]

I also just received this error with vitest, but I have been trying @mui/material-next with it.

The following change fixed it for me:

// import Chip from "@mui/material-next/Chip";
import Chip from "@mui/material/Chip";

I'm not sure if there are other things that cause this, but I wanted to pass this on in case it helps someone.

EDIT: adding package.json versions:

    "@mui/icons-material": "^5.15.10",
    "@mui/lab": "5.0.0-alpha.165",
    "@mui/material": "^5.15.10",
    "@mui/material-next": "6.0.0-alpha.123",

[sterlingdcs-damian]

Is there any workaround for this? Trying to migrate to vite but ran into this. Spent another day trying to get it working to no avail.. my question on SO if anyone has any insight https://stackoverflow.com/questions/78815858/mui-icons-material-vitest-es-module-issue

[roberbnd]

@sterlingdcs-damian did you find a solution?

[wilomgfx]

I'm running in the same issue trying to migrate from Jest to Vitest, any known workaround?

[Janpot]

Proper dual ESM/commonjs packages were released in 7.0.0-alpha.1. please verify with the following steps:

1. Set the version of all your @mui/* packages to next
2. Install dependencies (if you use npm, install with --legacy-peer-deps)

[github-actions[bot]]

Since the issue is missing key information and has been inactive for 7 days, it has been automatically closed. If you wish to see the issue reopened, please provide the missing information.