MUIのバージョンを上げたらSSRの実行で死んだ話


PHPのLaravel+inertia+ReactをSSRで実装していて、下記で色々やってきていましたが

https://qiita.com/miyawa-tarou/items/1b3ec0344e1b39ce9158

https://qiita.com/miyawa-tarou/items/2ca3f9585cb71a1891c1

https://qiita.com/miyawa-tarou/items/b03ecc5e082edd1c4c4f

今回は何も考えずに

```bash
yarn upgrade
```

したら死んだ話です。
同じようにハマる人がいるかも的に残しておきます。

# エラー

新しいバージョンが出たら解消されるかもしれませんが、とりあえず私のinertia環境が悪いのか、原因となったMUI周りが悪いのかはわかりません

```bash
$ php artisan inertia:start-ssr
node:internal/process/esm_loader:97
    internalBinding('errors').triggerUncaughtException(
                              ^

Error [ERR_UNSUPPORTED_DIR_IMPORT]: Directory import '/home/kamiyagi/repo/dojin_music/node_modules/@mui/system/RtlProvider' is not supported resolving ES modules imported from /home/kamiyagi/repo/dojin_music/bootstrap/ssr/ssr.mjs
Did you mean to import @mui/system/RtlProvider/index.js?
    at new NodeError (node:internal/errors:400: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:842: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) {
  code: 'ERR_UNSUPPORTED_DIR_IMPORT',
  url: 'file:///home/kamiyagi/repo/dojin_music/node_modules/@mui/system/RtlProvider'
}

Node.js v18.13.0
```

無邪気にすべて上げているので原因がここだけかわかりにくさもありましたが、
またMUIか」という気持ちでいっぱいです
こいつらSSRのこと考えてないんじゃないか？
これの厄介なのは `yarn dev` で動作確認しているときには何も起きないことですね。

ChangeLog的には

```
@mui/system@5.15.13
[RtlProvider] Add component & hook (#41241) @mnajdova
```

とあるので、最新のバージョンで「RtlProvider」は悪さをしていそうです
`@mui/system` 自体は直で入れてませんが、 `@mui/material` で入れていたのでそのバージョンと同じです。
じゃあ `5.15.12` にすると？

```bash
$ php artisan inertia:start-ssr
node:internal/process/esm_loader:97
    internalBinding('errors').triggerUncaughtException(
                              ^

Error [ERR_UNSUPPORTED_DIR_IMPORT]: Directory import '/home/kamiyagi/repo/dojin_music/node_modules/@mui/system/styleFunctionSx' is not supported resolving ES modules imported from /home/kamiyagi/repo/dojin_music/bootstrap/ssr/ssr.mjs
Did you mean to import @mui/system/styleFunctionSx/index.js?
    at new NodeError (node:internal/errors:400: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:842: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) {
  code: 'ERR_UNSUPPORTED_DIR_IMPORT',
  url: 'file:///home/kamiyagi/repo/dojin_music/node_modules/@mui/system/styleFunctionSx'
}

Node.js v18.13.0
```

似たようなのが違うファイルに対して出ましたね…。

# 解消

バージョンを上げる前は `5.14.18` でした。 `5.15` が悪いのかなと、とりあえず `5.14.20` にしたところエラー解消しました。

真面目にやるならエラーが起きるバージョンの差分を見て、作りに問題があればPullRequest出すのが良いんでしょうけど、そこまでの元気がありませんでした
深堀りしていないので、一番の原因がinertiaなのかViteなのかMUIなのかはわからないままです。
とりあえず `5.14` の最新ので動きましたよという話です。