#Import issues using esm with custom express server (@mui)

1 messages · Page 1 of 1 (latest)

muted merlin
#

Hello All 👋

I have been encountering strange issues when trying the latest express template (https://github.com/remix-run/remix/tree/main/templates/express)

The most noticeable package I can find which have this issue, is with material-ui.

When trying to implement the x-date-pickers (https://mui.com/x/react-date-pickers/getting-started/) I get the following error

Error: Directory import '/test/remix-express-esm/node_modules/@mui/x-date-pickers-pro/AdapterDayjs' is not supported resolving ES modules imported from /test/remix-express-esm/build/index.js
Did you mean to import @[email protected]_@[email protected]_@[email protected]_@[email protected]_doc73x3asg3gqebg5gj6cforvi/node_modules/@mui/x-date-pickers-pro/node/AdapterDayjs/index.js?
    at new NodeError (node:internal/errors:399:5)
    at finalizeResolution (node:internal/modules/esm/resolve:319:17)
    at moduleResolve (node:internal/modules/esm/resolve:945:10)
    at defaultResolve (node:internal/modules/esm/resolve:1153:11)
    at nextResolve (node:internal/modules/esm/loader:163:28)
    at ESMLoader.resolve (node:internal/modules/esm/loader:838: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)

Another example is when you try path imports as suggested in the remix docs (https://remix.run/docs/en/main/other-api/dev-v2#path-imports) When doing this, it results in the same error:

Error: Directory import '/test/remix-express-esm/node_modules/@mui/material/Button' is not supported resolving ES modules imported from /test/remix-express-esm/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/Button/index.js?

Has anyone else encountered this? (I don't beliece it's isolated to mui.)

#

One way I got it to work, is to remove the type:"module" from my package.json, then rename the server.js and remix.config.js from js to mjs then running with tsx:

"dev": "remix dev --manual -c \"tsx server.mjs\""
#

But that seems to break the rebuild when you make a change.