Reactjs React.lazy“无法导入动态导入的模块”

我刚开始尝试在我的React应用程序中实现延迟加载。我正在学习React.lazy和延迟加载的悬念

以下是文档中的代码示例：

import React, { Suspense } from 'react';

const OtherComponent = React.lazy(() => import('./OtherComponent'));

function MyComponent() {
  return (
    <div>
      <Suspense fallback={<div>Loading...</div>}>
        <OtherComponent />
      </Suspense>
    </div>
  );
}

---

我不确定我在这里做错了什么，我很想听听有类似经历的人的意见。我不确定问题的确切原因，但似乎某些软件包安装已损坏，删除节点模块并重新安装解决了问题。

不确定问题的确切原因，但似乎某些软件包安装已损坏，删除节点模块并重新安装解决了问题。

您可以共享您的网页配置吗？不确定，但我认为您需要在Web包中添加优化：{runtimeChunk:'single'，SplitChunk:{chunks:'all'}}以启用chunk模式。以下是我所拥有的：splitChunks:{chunks:'all'，name:false，}，runtimeChunk:{name:entrypoint=>runtime-${entrypoint.name}，}，更改在任何组合中都无法修复您能否共享您的网页包配置？不确定，但我认为您需要在Web包中添加优化：{runtimeChunk:'single'，SplitChunk:{chunks:'all'}}以启用chunk模式。以下是我所拥有的：splitChunks:{chunks:'all'，name:false，}，runtimeChunk:{name:entrypoint=>runtime-${entrypoint.name}，}，任何组合都无法修复更改

import React, { lazy, Suspense } from 'react';

const Home = lazy(() => import('./containers/home/home.component'));

const App = () => {
    return (
        <div>
            <Suspense fallback={<div>...Loading</div>}>
                <Home />
            </Suspense>
        </div>
    );
};

export default App;

Failed to load module script: The server responded with a non-JavaScript MIME type of "text/html". Strict MIME type checking is enforced for module scripts per HTML spec.


react-dom.development.js:11865 Uncaught TypeError: Failed to fetch dynamically imported module: http://localhost:3000/static/js/containers/home/home


The above error occurred in one of your React components:
    in Unknown (at App.js:38)
    in Suspense (at App.js:37)
    in div (at App.js:35)
    in App (created by ConnectFunction)
    in ConnectFunction (at src/index.js:14)
    in Router (created by BrowserRouter)
    in BrowserRouter (at src/index.js:13)
    in Provider (at src/index.js:12)

Consider adding an error boundary to your tree to customize error handling behavior.
Visit https://**linkNotAllowedByStackOverFlow**/react-error-boundaries to learn more about error boundaries.