[英]Create react app + React lazy + Absolute Imports
I have set up jsconfig.json as described in cra documentation.我已经按照 cra 文档中的描述设置了 jsconfig.json。 [ https://create-react-app.dev/docs/importing-a-component#absolute-imports][1]
[ https://create-react-app.dev/docs/importing-a-component#absolute-imports][1]
{
"compilerOptions": {
"baseUrl": "src"
},
"include": ["src"]
}
It is working fine if write directly to the file.如果直接写入文件,它工作正常。
import Test from 'pages/Test'
But when I try to load it lazy, it is creating problem.但是当我尝试延迟加载它时,它会产生问题。
const TestPage= React.lazy(() => import('pages/Test'));
Doing this giving error cannot able to find module: pages/Test这样做会导致错误无法找到模块:pages/Test
But if I write relative path, it is working fine.但如果我写相对路径,它工作正常。
const TestPage= React.lazy(() => import('../../pages/Test'));
So, my question is how to import module on dynamically by using absolute path?所以,我的问题是如何使用绝对路径动态导入模块?
Thanks谢谢
try to add a "paths"
property to "compilerOptions"
for pages
like this:尝试为这样的
pages
添加"paths"
属性到"compilerOptions"
:
{
"compilerOptions": {
"baseUrl": "src",
"paths": {
"pages": "src/pages"
}
},
"include": ["src"]
}
I think you may Suspense missed wrapper component.我想你可能会Suspense错过了包装器组件。
import React, { lazy, Suspense } from 'react';
const TestPage= React.lazy(() => import('pages/Test'));
const renderLoader = () => <p>Loading</p>;
const DetailsComponent = () => (
<Suspense fallback={renderLoader()}>
<TestPage />
</Suspense>
)
https://reactjs.org/docs/code-splitting.html https://reactjs.org/docs/code-splitting.html
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.