我刚刚开始尝试在我的React应用中实现懒惰加载。我在学习React.lazy和Suspense来实现懒加载。
以下是文档中的代码示例。
import React, { Suspense } from 'react';
const OtherComponent = React.lazy(() => import('./OtherComponent'));
function MyComponent() {
return (
<div>
<Suspense fallback={<div>Loading...</div>}>
<OtherComponent />
</Suspense>
</div>
);
}
然后是我的代码
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.
我不知道我在这里做错了什么 我很想听听有类似经历的人的意见。
不知道问题的具体原因,但似乎是某个包安装损坏了,删除node_modules并重新安装就解决了问题。