0
114
ViewsCannot use "react.lazy" in webpack
I'm having a problem using react.lazy in my webpack 4 project ("webpack": "^4.16.1")
this is my code for this problem:
import React, { Suspense, lazy } from "react";
const AccountInfo = lazy(() => import("../../views/Account")) ;
...
<Suspense fallback={<div>Loading...</div>}>
<Switch>
<PrivateRoute path="/accountinfo" component={AccountInfo} >
<Switch/>
</Suspense >
this is file .babelrc
{
"plugins": [
[
"transform-class-properties",
{
"spec": true
}
]
]
}
and the error message is:
can someone help me? Have a nice day guys <3
·
Juan Pablo Isaza
1 answers
Answer question0
I think, you need to add the @babel/plugin-syntax-dynamic-import plugin (https://babeljs.io/docs/en/babel-plugin-syntax-dynamic-import) and modify your .babelrc file.
Then it should be able to do the dynamic imports.
{
"presets": [
"@babel/preset-react"
],
"plugins": [
"@babel/plugin-syntax-dynamic-import"
]
}
You are also using an old version of webpack (version 4). Can you upgrade to a current version of webpack (5) (https://www.npmjs.com/package/webpack)?
·
Juan Pablo Isaza
Report
Answer question