Javascript 创建react应用程序+react惰性+绝对导入

我已经按照cra文档中的描述设置了jsconfig.json。 [

如果直接写入文件，则工作正常

import Test from 'pages/Test'

但当我尝试延迟加载它时，它会产生问题

const TestPage= React.lazy(() => import('pages/Test'));

执行此操作时出现错误，无法找到模块：页面/测试

但如果我写相对路径，它工作得很好

const TestPage= React.lazy(() => import('../../pages/Test'));

所以，我的问题是如何使用绝对路径动态导入模块

谢谢

我想你可能会暂时搁置这个组件

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>
)

我想您可能会对遗漏的包装器组件表示怀疑

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>
)

尝试将paths属性添加到以下页面的编译器选项：

{
  "compilerOptions": {
    "baseUrl": "src",
    "paths": {
       "pages": "src/pages"
    }
  },
  "include": ["src"]
}

尝试将paths属性添加到以下页面的编译器选项：

{
  "compilerOptions": {
    "baseUrl": "src",
    "paths": {
       "pages": "src/pages"
    }
  },
  "include": ["src"]
}

---

这与问题有什么关系？@JaredSmith如何使用悬念包装组件参考号否，悬念包装组件与模块路径解析有什么关系？如果尝试导入延迟加载组件，则不使用悬念意味着react将显示错误，为避免使用悬念，这将等待动态导入要加载的组件。我放弃尝试向您解释。问题是模块路径解析失败。这与悬念或缺少悬念无关：OPs代码与相对路径配合良好。这是webpack或CRA的webpack配置的问题。这与问题有什么关系？@JaredSmith如何使用参考资料悬念包装组件否，悬念包装组件与模块路径解析有什么关系？如果您尝试导入延迟加载组件，则不使用悬念意味着react将显示错误，为了避免使用悬念，这将等待动态导入组件加载。我放弃尝试向您解释。问题是t模块路径解析失败与悬念或缺乏悬念无关：OPs代码与相对路径配合良好。这是webpack的问题，或者CRA的webpack config.CRA使用webpack，我猜该算法不适用于动态导入？CRA使用webpack，并查看我猜的算法hm不适用于动态导入？