[system] Import error when using Material UI styles with Remix v2 about material-ui HOT 9 OPEN

Please provide a reproduction using a GitHub repository or a live example on CodeSandbox or StackBlitz. Did you check this Stack Overflow thread: https://stackoverflow.com/questions/64453859/directory-import-is-not-supported-resolving-es-modules-with-node-js?

from material-ui.

This should be possible after we release esm support. @DiegoAndai will have more answers. Right now, we are blocked on some issues from Next.js.

from material-ui.

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.

from material-ui.

@DiegoAndai Hi!

How long do you think is it going to take for you to release the esm support?

Thanks!

from material-ui.

Hi! We tried to implement it for v6, but it was not possible due to the Next.js issue mentioned: vercel/next.js#65056. We're currently waiting for a response from the Next.js team, so sadly I cannot provide an estimated date. We'll try to do it ASAP, it's a priority for us.

Marked as on hold, blocked by: #30671

from material-ui.

@DiegoAndai
Thank you! I will be waiting :)

from material-ui.

@DiegoAndai Hi!

FYI: this is the issue that I am currently facing:
I have this in the file app/common/Theme/theme.tsx:

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

And it is throwing the following error:

Error: Directory import '/app/node_modules/@mui/material/colors' is not supported resolving ES modules imported from /app/build/index.js
Did you mean to import @mui/material/node/colors/index.js?
    at new NodeError (node:internal/errors:405:5)
    at finalizeResolution (node:internal/modules/esm/resolve:321:11)
    at moduleResolve (node:internal/modules/esm/resolve:980:10)
    at defaultResolve (node:internal/modules/esm/resolve:1193:11)
    at ModuleLoader.defaultResolve (node:internal/modules/esm/loader:404:12)
    at ModuleLoader.resolve (node:internal/modules/esm/loader:373:25)
    at ModuleLoader.getModuleJob (node:internal/modules/esm/loader:250:38)
    at ModuleWrap.<anonymous> (node:internal/modules/esm/module_job:76:39)
    at link (node:internal/modules/esm/module_job:75:36)

I have tried all the suggestions like this one: Did you mean to import @mui/material/node/colors/index.js? but none have worked so far.

Thanks!

from material-ui.

@titanve you should use serverModuleFormat: 'cjs' in your vite config, like this: https://github.com/mui/material-ui/blob/next/examples/material-ui-remix-ts/remix.config.js#L10. Do you have this?

If not, may I ask you to share your remix config here? Thanks 😊

from material-ui.

Hi @DiegoAndai

I haven't installed vite yet. Should I install it as part of the migration process? I think is not necessary, is it?

Thanks!

from material-ui.