Directory import is not supported (internal MUI modules) 2.0.0-pre.3

[telcy]

What version of Remix are you using?

2.0.0-pre.3

Are all your remix dependencies & dev-dependencies using the same version?

• Yes

Steps to Reproduce

1. install MUI
2. try to use some MUI component that internally does a directory import

(I will try to add a repro later)

Expected Behavior

Directory imports should be handled by Remix. I am able to add /index.js to my own imports but I am unable to add /index.js to MUI internal imports.

Actual Behavior

[pcattori]

@telcy is thie for a new project? or are you migrating an existing project to v2?

If migrating, what did you have your serverModuleFormat set to before migrating and did you change it to anything else after migrating?

[telcy]

exports seem to be an issue as well

export { default } from './Button';
^^^^^^

SyntaxError: Unexpected token 'export'
    at internalCompileFunction (node:internal/vm:73:18)
    at wrapSafe (node:internal/modules/cjs/loader:1178:20)
    at Module._compile (node:internal/modules/cjs/loader:1220:27)
    at Object.Module._extensions..js (node:internal/modules/cjs/loader:1310:10)
    at Module.load (node:internal/modules/cjs/loader:1119:32)
    at Function.Module._load (node:internal/modules/cjs/loader:960:12)
    at ModuleWrap.<anonymous> (node:internal/modules/esm/translators:169:29)
    at ModuleJob.run (node:internal/modules/esm/module_job:194:25)

Repro
https://github.com/telcy/remix-import-export-issue

[pcattori]

As a workaround, can you use serverModuleFormat: "cjs" in your remix.config.js?

[pcattori]

Related to mui/material-ui#30671

[telcy]

@telcy is thie for a new project? or are you migrating an existing project to v2?

I am migrating a project but do have the same issue with fresh setups (see minimal repro above).

If migrating, what did you have your serverModuleFormat set to before migrating and did you change it to anything else after migrating?

serverModuelFormat was set to cjs before and esm after.

[pcattori]

Yea I think you'll want to keep serverModuleFormat set to cjs if you are using MUI due to mui/material-ui#30671 .

Looks like you might be able to use named imports from MUI with ESM as a workaround

[telcy]

Thanks for the prompt feedback. Seems using cjs for now is the best solution as using named imports does not work for some components.

e.g. import { InputAndornment } from "@mui/material";

Error: Directory import '/***/node_modules/@mui/material/InputAdornment' is not supported resolving ES modules imported from /***/build/index.js
Did you mean to import @[email protected]_@[email protected]_@[email protected]_@[email protected][email protected][email protected]/node_modules/@mui/material/node/InputAdornment/index.js?
    at new NodeError (node:internal/errors:405:5)
    at finalizeResolution (node:internal/modules/esm/resolve:317:17)
    at moduleResolve (node:internal/modules/esm/resolve:943:10)
    at defaultResolve (node:internal/modules/esm/resolve:1129:11)
    at nextResolve (node:internal/modules/esm/loader:163:28)
    at ESMLoader.resolve (node:internal/modules/esm/loader:835:30)
    at ESMLoader.getModuleJob (node:internal/modules/esm/loader:424:18)
    at ModuleWrap.<anonymous> (node:internal/modules/esm/module_job:77:40)
    at link (node:internal/modules/esm/module_job:76:36)

[pcattori]

Closing as this in inactionable in Remix until MUI provides better support for ESM

[U-4-E-A]

Closing as this in inactionable in Remix until MUI provides better support for ESM

Can I ask what the actual problem is? I am having the same issue with certain other packages.