无法获取动态导入的模块：

我有一些延迟导入的 React 组件App.tsx. App.tsx用于Index.tsx它被渲染并附加到的地方body.

   const IndexPage = lazy(() => import("../features//IndexPage"));
    const TagsPage = lazy(
      () => import("../features/tags/TagsPage")
    );
    const ArticlePage = lazy(() => import("../features/article/ArticlePage"));

    const SearchResultPage = lazy(
      () => import("../features/search-result/SearchResultPage")
    );

    const ErrorPage = lazy(() => import("../features/error/ErrorPage"));

    ----

    <BrowserRouter basename={basename}>
      <Suspense fallback={<Fallback />}>
        <Routes>
          <Route path={INDEX} element={<IndexPage />} />
          <Route path={ARTICLE} element={<ArticlePage />} />
          <Route path={TAGS} element={<TagsPage />} />
          <Route path={SEARCH} element={<SearchResultPage />} />
          <Route path={ERROR} element={<ErrorPage />} />
          <Route path="/*" element={<ErrorPage />} />
        </Routes>
      </Suspense>
    </BrowserRouter>

在生产中经常会出现以下错误。

无法获取动态导入的模块：

所有路线都发生过这种情况。

 https://help.example.io/static/js/SearchResultPage-c1900fe3.js

 https://help.example.io/static/js/TagsPage-fb64584c.js

 https://help.example.io/static/js/ArticlePage-ea64584c.js

 https://help.example.io/static/js/IndexPage-fbd64584c.js

我已经改变了构建路径。因此它是/static/js.

  build: {
    assetsInlineLimit: 0,
    minify: true,
    rollupOptions: {
      output: {
        assetFileNames: (assetInfo) => {
          var info = assetInfo.name.split(".");
          var extType = info[info.length - 1];
          if (/png|jpe?g|svg|gif|tiff|bmp|ico/i.test(extType)) {
            extType = "img";
          } else if (/woff|woff2/.test(extType)) {
            extType = "css";
          }
          return `static/${extType}/[name]-[hash][extname]`;
        },
        chunkFileNames: "static/js/[name]-[hash].js",
        entryFileNames: "static/js/[name]-[hash].js",
      },
    },
    outDir: "./../backend/src/main/resources/static/articles/",
    emptyOutDir: true,
  },

有人知道如何解决这个问题吗？

Update:

我在开发中从来没有遇到过这个错误。我用Sentry跟踪错误。两个月内至少发生了274次。

这就是 Sentry 上的全部内容。

{
  arguments: [
    {
      message: Failed to fetch dynamically imported module: https://help.example.io/static/js/SearchResultPage-c1900fe3.js,
  name: TypeError,
    stack: TypeError: Failed to fetch dynamically imported module: https://help.example.io/static/js/SearchResultPage-c1900fe3.js
  }
],
  logger: console 
}

Update

过去两个月我们的访问量达到了 50 万。这样的事发生了 274 次。自从tracesSampleRate is 0.3，绝对不止于此。

  Sentry.init({
    dsn: "",
    integrations: [new BrowserTracing()],
    tracesSampleRate: 0.3,
  });

这种情况在各种浏览器上都发生过，但主要是在 Chrome 上。

我无法在开发或产品中重现它。

Update

我终于重现了这个bug。如果您在某个页面上并且发布了新版本，就会发生这种情况。包含动态导入模块的文件不再存在，例如：

https://help.example.io/static/js/IndexPage-fbd64584c.js

上面的链接返回404.

以下是对此问题的一些替代看法。

完全回避这个问题。

这是显而易见的，我怀疑从您的角度来看这可能不是一个理想的答案，但切换到静态导入将解决您的问题。

在许多情况下，即使使用静态导入，包的大小仍然足够小，不会影响您的用户体验，而且绝对比遇到错误要小。

这也可以说是解决问题的唯一有保证的方法，因为即使您的问题是由您设法追踪和修复的某个地方的故障引起的，仍然存在发生此问题的合法情况。

优雅地管理错误

另一方面，仍然认为错误可能并且仍然会发生，React 具有 ErrorBoundaries 的概念，您可以利用它来处理发生时的用户体验：https://reactjs.org/docs/error-boundaries.html https://reactjs.org/docs/error-boundaries.html and https://reactjs.org/docs/code-splitting.html#error-boundaries https://reactjs.org/docs/code-splitting.html#error-boundaries

把事情掌握在自己手中

最后，反应lazy需要一个返回解析为模块的 Promise 的函数。如果没有，那就是你的类型错误。显然，它的使用方式与您完全相同，但如果您愿意，您可以自由地将其包装在更智能的东西中。您需要做的就是确保承诺最终解析为导入的模块。如需灵感，请参阅此处有关重试 Promise 的一些看法。Promise 重试设计模式 https://stackoverflow.com/questions/38213668/promise-retry-design-patterns