[system] Import error when using Material UI styles with Remix v2

[titanve]

Hello, I'm upgrading my remix application from version 1 to version 2 and I am getting this error:

[info] building...
[info] built (14.8s)
node:internal/process/esm_loader:40
      internalBinding('errors').triggerUncaughtException(
                                ^

Error [ERR_UNSUPPORTED_DIR_IMPORT]: Directory import '/app/node_modules/@mui/material/styles' is not supported resolving ES modules imported from /app/build/index.js
Did you mean to import @mui/material/node/styles/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) {
  url: 'file:///app/node_modules/@mui/material/styles',
  code: 'ERR_UNSUPPORTED_DIR_IMPORT'
}

Node.js v18.20.3

I haven't found any possible solution. What should I do?

This is my package.json file:

{
  "name": "my-app",
  "private": true,
  "description": "",
  "license": "",
  "type": "module",
  "sideEffects": false,
  "scripts": {
    "build": "remix build",
    "dev": "remix dev -c 'node ./server.js'",
    "devnextweb": "remix dev -c 'cross-env NODE_ENV=nextweb node ./server.js'",
    "start": "remix build && cross-env NODE_ENV=production node ./server.js"
  },
  "dependencies": {
    "@emotion/react": "^11.9.0",
    "@emotion/styled": "^11.8.1",
    "@faker-js/faker": "^8.0.2",
    "@fortawesome/fontawesome-svg-core": "^6.1.1",
    "@fortawesome/free-solid-svg-icons": "^6.1.1",
    "@fortawesome/react-fontawesome": "^0.2.0",
    "@fullcalendar/core": "^6.1.8",
    "@fullcalendar/daygrid": "^6.1.8",
    "@fullcalendar/interaction": "^6.1.8",
    "@fullcalendar/react": "^6.1.8",
    "@fullcalendar/timegrid": "^6.1.8",
    "@mui/icons-material": "^5.15.19",
    "@mui/lab": "^5.0.0-alpha.170",
    "@mui/material": "^5.15.19",
    "@mui/styles": "^5.15.19",
    "@mui/x-date-pickers": "^7.6.1",
    "@remix-run/node": "^2.9.2",
    "@remix-run/react": "^2.9.2",
    "@remix-run/serve": "^2.9.2",
    "bcryptjs": "^2.4.3",
    "chart.js": "^4.3.0",
    "compression": "^1.7.4",
    "cross-env": "^7.0.3",
    "date-fns": "^2.29.3",
    "dayjs": "^1.11.5",
    "express": "^4.18.1",
    "i18next": "^22.5.0",
    "i18next-browser-languagedetector": "^7.0.2",
    "i18next-fs-backend": "^2.1.2",
    "i18next-http-backend": "^2.2.1",
    "morgan": "^1.10.0",
    "react": "^18.2.0",
    "react-chartjs-2": "^5.2.0",
    "react-dom": "^18.2.0",
    "react-dropzone": "^14.2.3",
    "react-i18next": "^13.2.0",
    "react-swipeable-views": "^0.14.0",
    "remix-i18next": "^5.1.1",
    "remix-utils": "^7.6.0",
    "sweetalert2": "^11.7.1",
    "uuid": "^8.3.2",
    "validator": "^13.7.0"
  },
  "devDependencies": {
    "@remix-run/dev": "^2.9.2",
    "@remix-run/eslint-config": "^2.9.2",
    "@types/bcryptjs": "^2.4.2",
    "@types/react": "^18.2.20",
    "@types/react-dom": "^18.2.7",
    "eslint": "^8.15.0",
    "nodemon": "^2.0.20",
    "npm-run-all": "^4.1.5",
    "typescript": "^4.6.4"
  },
  "engines": {
    "node": ">=18"
  }
}

Search keywords:

[ZeeshanTamboli]

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?

[brijeshb42]

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.

[github-actions]

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.

[titanve]

@DiegoAndai Hi!

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

Thanks!

[DiegoAndai]

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

[titanve]

@DiegoAndai
Thank you! I will be waiting :)

[titanve]

@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!

[DiegoAndai]

@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 😊

[titanve]

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!

[DiegoAndai]

Hey @titanve!

Remix uses Vite, so you shouldn't have to install it separately; it should already be installed. You should have a config file called remix.config.js, and in there you should have the following setting:

   serverModuleFormat: 'cjs',

(besides your other config options).

Let me know if that works 😊. Our example of a remix app might be a good guide for your app's setup: https://github.com/mui/material-ui/tree/next/examples/material-ui-remix-ts

[titanve]

@DiegoAndai hi!

Sorry for the late reply! This is my remix.config.js file content:

/**
 * @type {import('@remix-run/dev').AppConfig}
 */

export default {
  ignoredRouteFiles: ["**/*.css"],
  // serverModuleFormat: "esm",
  serverModuleFormat: 'cjs', <--- ADDED THIS LINE AS SUGGESTED
  // serverPlatform: "node",
  // appDirectory: "app",
  // assetsBuildDirectory: "public/build",
  // serverBuildPath: "build/index.js",
  // publicPath: "/build/",
  // future: {
  // v2_dev: true,
  // },
  serverDependenciesToBundle: [
    ///^remix-i18next.*/,
    ///^remark.*/,
    ///^unified.*/,
    //"@sindresorhus/slugify",
    "remix-i18next",
  ],
};

I got this error:

[info] building...
[info] built (13.2s)
ReferenceError: module is not defined in ES module scope
This file is being treated as an ES module because it has a '.js' file extension and '/app/package.json' contains "type": "module". To treat it as a CommonJS script, rename it to use the '.cjs' file extension.
    at file:///app/build/<stdin>:1:1
    at ModuleJob.run (node:internal/modules/esm/module_job:195:25)
    at ModuleLoader.import (node:internal/modules/esm/loader:337:24)
    at file:///app/server.js:49:22

I have this in my package.json:

"type": "module",

[BrokenHead]

I googled to come here with the same error and I hope this context will help someone
but for @titanve I was not sure if It would work for you. because I followed npx create-remix@latest (for you should be around remix@v2.8.1 for node 18) : https://remix.run/docs/en/main/start/quickstart
it gen vite.config.ts not an old remix.config.js : https://remix.run/docs/en/main/file-conventions/vite-config

I didn't add serverModuleFormat: 'cjs'
but solve by adding '@mui/material', '@mui/system', etc.. to ssr (for you it should be serverDependenciesToBundle) like this

export default defineConfig({
  ssr: {
    noExternal: [
      /^remix-utils.*/,
      "@mui/system",   
      "@mui/icons-material",
      "@mui/lab",
      "@mui/material",
      "@mui/styles",
      "@mui/x-date-pickers"
    ],
  },
  plugins: [
    remix({
      future: {
        v3_fetcherPersist: true,
        v3_relativeSplatPath: true,
        v3_throwAbortReason: true,
      },
    }),
    tsconfigPaths(),
  ],
});

[DiegoAndai]

@titanve, could you share your project so I can debug it on my side? For example, upload it to github and share the link. This would be very helpful and speed up the process.