@mui/icons-materialを使うとCannot use import statement outside a moduleと言われる件

先日@mui/icons-materialを使おうとしたところ，Cannot use import statement outside a moduleというエラーに直面しました．

6:58:20 [vite] Error when evaluating SSR module virtual:remix/server-build: failed to import "@mui/icons-material/Visibility"
|- /home/user/project/node_modules/@mui/icons-material/esm/Visibility.js:3
import createSvgIcon from './utils/createSvgIcon';
^^^^^^

SyntaxError: Cannot use import statement outside a module
    at wrapSafe (node:internal/modules/cjs/loader:1378:20)
    at Module._compile (node:internal/modules/cjs/loader:1428:41)
    at Module._extensions..js (node:internal/modules/cjs/loader:1548:10)
    at Module.load (node:internal/modules/cjs/loader:1288:32)
    at Module._load (node:internal/modules/cjs/loader:1104:12)
    at cjsLoader (node:internal/modules/esm/translators:346:17)
    at ModuleWrap.<anonymous> (node:internal/modules/esm/translators:286:7)
    at ModuleJob.run (node:internal/modules/esm/module_job:234:25)
    at async ModuleLoader.import (node:internal/modules/esm/loader:473:24)
    at async nodeImport (file:///home/user/project/node_modules/vite/dist/node/chunks/dep-CUvs3bbV.js:52998:15)

6:58:20 [vite] Internal server error: Cannot use import statement outside a module
      at wrapSafe (node:internal/modules/cjs/loader:1378:20)
      at Module._compile (node:internal/modules/cjs/loader:1428:41)
      at Module._extensions..js (node:internal/modules/cjs/loader:1548:10)
      at Module.load (node:internal/modules/cjs/loader:1288:32)
      at Module._load (node:internal/modules/cjs/loader:1104:12)
      at cjsLoader (node:internal/modules/esm/translators:346:17)
      at ModuleWrap.<anonymous> (node:internal/modules/esm/translators:286:7)
      at ModuleJob.run (node:internal/modules/esm/module_job:234:25)
      at async ModuleLoader.import (node:internal/modules/esm/loader:473:24)
      at async nodeImport (file:///home/user/project/node_modules/vite/dist/node/chunks/dep-CUvs3bbV.js:52998:15)

当初どこを探しても情報が見つからず苦労しましたが，GitHubで先行事例を検索して解決をみたので，ここに書いておきます．

環境・構成

React + Remix (Vite) + MUIの構成で，SSRは使っていません（remixのconfigではssr: false）．

{
  "dependencies": {
    "@emotion/react": "^11.13.3",
    "@emotion/styled": "^11.13.0",
    "@mui/icons-material": "^6.1.1",
    "@mui/material": "^6.1.1",
    "@remix-run/css-bundle": "^2.12.0",
    "@remix-run/node": "^2.12.0",
    "@remix-run/react": "^2.12.0",
    "@remix-run/serve": "^2.12.0",
    "isbot": "^4.1.0",
    "react": "^18.2.0",
    "react-dom": "^18.2.0",
    "uuid": "^10.0.0"
  },
  "devDependencies": {
    "@remix-run/dev": "^2.12.0",
    "@types/react": "^18.2.20",
    "@types/react-dom": "^18.2.7",
    "@types/uuid": "^10.0.0",
    "@typescript-eslint/eslint-plugin": "^6.7.4",
    "@typescript-eslint/parser": "^6.7.4",
    "autoprefixer": "^10.4.19",
    "eslint": "^8.38.0",
    "eslint-import-resolver-typescript": "^3.6.1",
    "eslint-plugin-import": "^2.28.1",
    "eslint-plugin-jsx-a11y": "^6.7.1",
    "eslint-plugin-react": "^7.33.2",
    "eslint-plugin-react-hooks": "^4.6.0",
    "postcss": "^8.4.38",
    "prettier": "^3.3.3",
    "tailwindcss": "^3.4.4",
    "typescript": "^5.1.6",
    "vite": "^5.1.0",
    "vite-tsconfig-paths": "^4.2.1"
  },
}

解決策

vite.config.tsに以下を追加します．

  ssr: {
    noExternal: [
      "@mui/*",
      "@remix-run/dev",
      "@remix-run/react",
    ]
  }

全体としては次のようになりました．

import { vitePlugin as remix } from "@remix-run/dev";
import { defineConfig } from "vite";
import tsconfigPaths from "vite-tsconfig-paths";

export default defineConfig({
  plugins: [
    remix({
      future: {
        v3_fetcherPersist: true,
        v3_relativeSplatPath: true,
        v3_throwAbortReason: true,
      },
      ssr: false
    }),
    tsconfigPaths(),
  ],
  ssr: {
    noExternal: [
      "@mui/*",
      "@remix-run/dev",
      "@remix-run/react",
    ]
  }
});

謝辞

この解決策は以下のパッケージを参考にしました．ありがとうございます．

https://github.com/ArnoSaine/postinumero/blob/902b7e57c75afb0a0b4a2369b7f6ff0b89f8ea97/packages/vite-plugin-remix-mui/src/main.ts#L34-L39