ChunkLoadError

9439 ワード
テキストリンク
開発環境では、ChunkLoadErrorブロックに関連するエラーで、導入後にサービスを使用するユーザーから発見されたエラーがあります.

の原因となる


原因は以下の通り.
React Lazyを使用してページを動的にロードする場合、コード変更(更新など)が発生すると、ブラウザが既存のブロックを様々な理由(キャッシュ、既存のサイトに常駐するユーザ)でロードしようとしたため、ChunLoadErrorが発生します.

解決する


解決策はいろいろありますが、私が解決した方法は、最初は遅延ロード中のエラーを見つけて再ロードすることで解決しましたが、エラーを見つけて再ロードするだけでは無限ループが発生する可能性があるため、ローカルストレージも利用しました.

const checkReload = async (fn: () => ComponentPromise) => {
  const isReloaded = JSON.parse(getItem(KEY) || 'false');

  try {
    const component = await fn();
    setItem(KEY, 'false');

    return component;
  } catch (error) {
    if (!isReloaded) {
      setItem(KEY, 'true');

      window.location.reload();
    }

    throw error;
  }
};

function customLazy(
  component: () => ComponentPromise,
): React.LazyExoticComponent<React.ComponentType<any>> {
  return lazy(() => checkReload(component));
}

export default customLazy;
また,発生する可能性のあるエラーを防止するために,ブロックローディングエラーに加えて,ユーザは既存のErrorBoundaryを用いて,空白の画面が見えないようにした.
<Routes>
  {ROUTE.map(({ path, Component, auth }) => (
    <Route
      key={path}
      path={path}
      element={
        <ErrorBoundary>
          <Suspense fallback={null}>
            <Component />
            {path !== PATH.NOT_FOUND && <PlayerContainer />}
          </Suspense>
        </ErrorBoundary>
      }
      />
  ))}
</Routes>

Reference

  • https://www.ozkary.com/2021/11/react-static-web-apps-chunk-load-error.html
    • 22035リドス
    DAY07 JavaScript 3/3