困ったこと

Viteでdevモードは問題なく表示されるのだが、buildすると画面が真っ白になり表示されない。

表示されているエラー

 Minified React error #130

対処法

最近追加したReactのModuleがあればそいつが犯人。とりあえず犯人を特定するために、そのコンポーネントだけ表示しないようにしてみましょう。今回、私の場合はreact-scroll-wheel-handlerというライブラリが原因でした。

こいつのインポートは

import ReactScrollWheelHandler from "react-scroll-wheel-handler";

こう書くとreadmeにも載っているのですが、実はこれだとviteはうまく動きません。

以下のように書くとうまく動きます。べつにWでもなんでもいいですがWheelのWにしてみました。TypeScriptで書いていると、defaultがありません的なエラーが出るかもしれません。出たらts-ignoreで無理やり消してしまわないとビルドが通りません。ハック的な手法です。

import W from 'react-scroll-wheel-handler';
// @ts-ignore
const ReactScrollWheelHandler = W.default ?? W;

理由

このライブラリはcjsでコンパイルされており、実際のjsファイルを見てみるとmodule.exports=ではじまっています。これはviteがdevのときはうまく動きますが、実際にbuildするときはうまくesModuleに変換できない（？）ようです。今回のように、もし.defaultがあれば.defaultつきにして、そうでなければ通常の……というハックで解決できます。

根本的に解決するには

そもそもcjs形式ではなくesm形式でもライブラリを配布してもらえたら解決します。とりあえずissueにあげておくか自分でつくってしまっても良いかもしれません。

参考資料