Cannot import from @mui/material/colors

[fvanwijk]

Description

When you import from @mui/material/colors, on the development server everything works ok, but when you build and run in prod mode, the following error is thrown:

Error: ERR_UNSUPPORTED_DIR_IMPORT /Users/<project-dir>/node_modules/@mui/material/colors

An example repo including steps to reproduce from zero can be found here.

Since the error isn't thrown when when running with only Vite + React + TS (no vite-plugin-ssr), I think this is the right repo to post the issue.

This MUI issue could be related.

Error Stack

Error: ERR_UNSUPPORTED_DIR_IMPORT /Users/<project-dir>/node_modules/@mui/material/colors /Users/<project-dir>/dist/server/assets/_default.page.server.93b8c381.js
    at finalizeResolution (/Users/<project-dir>/node_modules/ts-node/dist-raw/node-internal-modules-esm-resolve.js:362:17)
    at moduleResolve (/Users/<project-dir>/node_modules/ts-node/dist-raw/node-internal-modules-esm-resolve.js:801:10)
    at Object.defaultResolve (/Users/<project-dir>/node_modules/ts-node/dist-raw/node-internal-modules-esm-resolve.js:912:11)
    at /Users/<project-dir>/node_modules/ts-node/src/esm.ts:218:35
    at entrypointFallback (/Users/<project-dir>/node_modules/ts-node/src/esm.ts:168:34)
    at /Users/<project-dir>/node_modules/ts-node/src/esm.ts:217:14
    at addShortCircuitFlag (/Users/<project-dir>/node_modules/ts-node/src/esm.ts:409:21)
    at resolve (/Users/<project-dir>/node_modules/ts-node/src/esm.ts:197:12)
    at resolve (/Users/<project-dir>/node_modules/ts-node/src/child/child-loader.ts:15:39)
    at ESMLoader.resolve (node:internal/modules/esm/loader:580:30)

[brillout]

I don't think this is related to VPS.

[garronej]

MUI isn't providing yet a ESM distribution that node cant in type: module can work with.

See issue: mui/material-ui#37335

[brillout]

@garronej Thanks for pointing us to that ticket.

In the meantime, a workaround is to use the solution described at https://vite-plugin-ssr.com/common-issues#npm-packages-containing-invalid-code.