Remix SPA modeでMUIを使用するとビルド時にエラーになる件

環境

• pc: MacBookAir 2020 intel model 16gb
• "vite": "^5.1.0"
• "remix": "^2.12.1"

参考までに上記はpackage.jsonから抜粋

ビルド時に発生するエラー原因

viteが自動的に依存関係を最適化する過程で、特定のライブラリを外部化してしまうとエラーが発生するようです。
回避方法はvite.config.tsにnoExternalを追加してエラー原因となるものを明示的に【外部化しない】という指示を追記してあげることで回避できます。

Next.jsではこういったものが必要ありませんでしたが、Remix(vite)を使用していく過程でやはり細かな部分は違いがあるようです。

MUIとの相性

悪いですね〜。
使うことができないわけではないんですが、こういったエラーの他にSPA modeを使用するとアイコン系でもエラーがでました。
今回はnoExtarnalに追記する方法を記載しましたが、import で各コンポーネントでそのまま@mui/icons-materialを使用するとエラーとなります。
そちらについては下記の記事が参考になりましたので共有いたします。

回避する際の記述

実際に僕が行ったものですとvite.config.tsに下記のssrについての設定でnoExternalを追記しました。
追加した項目はビルドに発生したものです。
ひとまずこちらを追記する形で問題なくビルドできました。

export default defineConfig({
  plugins: [
    remix({
      ssr: false,
      future: {
        v3_fetcherPersist: true,
        v3_relativeSplatPath: true,
        v3_throwAbortReason: true,
      },
    }),
    tsconfigPaths(),
  ],
  ssr: {
    noExternal: [
      '@mui/material', 
      '@mui/icons-material',
      '@mui/utils',
      '@mui/system',
      '@mui/styled-engine',
    ]
  }
});

noExternalってなんそれ？

viteが自動的に特定のモジュールを外部化してバンドルして使うという手法があるのに対し、noExternalを設定することで外部化してバンドルするのを辞めさせることができるという認識

まとめ

ビルドに発生するMUI系のエラーはnoExternalで防げる
またそれ以外にも外部化しバンドルする挙動でエラーとなるものがある場合はこちらに記載のやり方でvite.config.tsに記載するとよい

以上