Reactjs webpack 5中动态导入的路径

发布于04月30日

我的开发环境由webpack 5、React 18、typescript 5和react-Router-dom 6.23.0组成.

最初，我的代码 struct 是这样的:

src
  page
    index.tsx
  route.tsx

在route.tsx文件中:

{
    path: '/',
    lazy: async () => {
      const { default: Component } = await import(`./page`)
      return { Component }
    },
}

效果很好.

后来我调整了代码 struct 如下:

src  
  page
    index.tsx
  route
    index.tsx

我还像这样修改了route/index.tsx文件:

{
    path: '/',
    lazy: async () => {
      const { default: Component } = await import(`../page`)
      return { Component }
    },
}

效果也很好.

然后，如果我创建一个新功能来实现这一点

const lazy = (path: string) => {
  return async () => {
    const { default: Component } = await import(`${path}`)
    return { Component }
  }
}

{
    path: '/',
    lazy: lazy(`../page`),
}

错误"找不到模块"../页面'发生.

为什么会发生这种情况？我该如何解决它？

推荐答案

Webpack需要一些关于动态模块在文件系统中的位置的提示.请参阅dynamic expressions in imports文档.

您可以重组项目，将页面嵌入目录中，为webpack提供有关模块所在位置的一些上下文，或者仅传递路径的非相对部分，或者仅传递路径的基本部分.一些示例:

using a parent directory


const lazy = (path: string) => {
  return async () => {
    const { default: Component } = await import(`../folder/${path}`)
    return { Component }
  }
}

lazy('page')

using non-relative path(不确定这个)


const lazy = (path: string) => {
  return async () => {
    const { default: Component } = await import(`../${path}`)
    return { Component }
  }
}

lazy('page')

using basename of path


const lazy = (path: string) => {
  return async () => {
    const { default: Component } = await import(`../page/${path}`)
    return { Component }
  }
}

lazy('index')

您还可以 Select 不使用webpackIgnore: true magic comment进行网络包代码拆分.


const lazy = (path: string) => {
  return async () => {
    const { default: Component } = await import(/* webpackIgnore: true */ `${path}`)
    return { Component }
  }
}

lazy('../page')

Reactjs webpack 5中动态导入的路径

推荐答案

Reactjs相关问答推荐

使用包装器组件时useState onChange的问题

为什么这个'Suspense'子组件在挂起promise解决后会丢失它的状态，而不是呈现？<>

在带有和设计的表格中禁用和取消选中复选框

CreateBrowserRouter将props 传递给父组件以验证权限

使用useReducer时，props 未从父级传递给子或孙级

如何使数据库数据在第一次呈现时显示？

useRef()的钩子调用无效

Javascript - 正则表达式不适用于 MAC OS - 编码？

Chart.js如何go 除边框

无法使用 MongoDB Atlas 和 Next.js 删除正确的帖子

useRef 不关注模态

如何在我的自定义主题中样式化MUI TreeItem组件

useState数组不更新

Material UI @mui/material/Button vs @material-ui/core/Button，它什么时候改变的，旧版本的文档在哪里

VideoSDK api 不使用更新状态

useEffect 渲染没有依赖数组的组件

Next.js i18n 路由不适用于动态路由

如何使用react 路由将 url 参数限制为一组特定的值？

未捕获的错误：操作必须是使用 redux/toolkit 的普通对象

列表应该有一个唯一的关键props