Vite+esbuild打包后React动态导入报错找不到模块？

西门远香提问于 2026-02-14 10:24:34 阅读 32

工具

大家好，我在用Vite和esbuild打包生产环境时遇到了奇怪的问题。React组件里用动态导入加载子组件，在开发环境没问题，但打包后控制台报错”Cannot find module ‘./SubComponent’ “。

代码是这样写的：


function LazyComponent() {
  const Component = React.useMemo(() => {
    return import(<code>./SubComponent</code>).then(mod => mod.default)
  }, [])
  return <div>加载中...</div>
}

试过把import()改成require()，也调整过resolve.extensions，但都不行。esbuild的动态导入配置是不是有什么特别限制？求大神指点！

我来解答赞 5 收藏

反馈

2 条解答

FSD-永香 Lv1

你这个问题出在动态导入的用法上。React 的动态导入应该配合 React.lazy 和 Suspense 使用，而不是直接在 useMemo 里写 import()。这种写法在开发环境可能没问题，但打包后路径解析会出问题，因为 Vite 和 esbuild 对动态导入的处理方式不一样。

正确的写法应该是这样：

const LazyComponent = React.lazy(() => import('./SubComponent'));



function App() {

  return (

    <React.Suspense fallback={<div>加载中...</div>}>

      <LazyComponent />

    </React.Suspense>

  );

}

这里的关键是 React.lazy 专门用来处理动态导入组件，而 Suspense 提供加载状态的 fallback。Vite 在打包时会对 React.lazy 的动态导入做特殊处理，确保路径正确解析。

另外，检查一下你的 Vite 配置文件，确保 build.rollupOptions 里没有错误地修改动态导入的行为。如果你用了插件，比如 vite-plugin-commonjs，可能会干扰 esbuild 的打包逻辑，试着把它关掉看看。

最后提醒一句，动态导入的路径最好是相对路径，不要用绝对路径，否则打包工具可能会解析失败。我之前踩过类似的坑，折腾了好久才发现是路径写法的问题，真是吐了。

2026-02-15 14:10

シ瑞丹 Lv1

你这个写法有问题，动态导入的标准写法不是这样的。React官方文档里明确写了，动态导入要用 React.lazy 配合 Suspense 来实现。

先说问题出在哪。你的代码里直接在 useMemo 里调用 import()，这不符合规范。Vite和esbuild在打包时会对动态导入做特殊处理，但它们只认标准的 React.lazy 写法。你这种手动处理 Promise 的方式，打包工具没法正确解析依赖路径。

正确的写法应该是这样：

import React, { Suspense } from 'react';



const LazyComponent = React.lazy(() => import('./SubComponent'));



function App() {

  return (

    <Suspense fallback={<div>加载中...</div>}>

      <LazyComponent />

    </Suspense>

  );

}



export default App;

这里有几个关键点：第一，React.lazy 是专门用来处理动态导入的，它会返回一个可以渲染的组件；第二，必须配合 Suspense 使用，fallback 属性用来定义加载状态。

另外提醒一下，Vite 的动态导入是基于原生 ESM 实现的，确保你的 SubComponent 文件名大小写要严格匹配，因为生产环境是区分大小写的。

我之前也踩过类似的坑，花了一整天才发现是写法不规范导致的。按上面的改法应该能解决问题，如果还有报错可能是 tsconfig 或者 vite.config 里的配置问题，可以再具体看看。

2026-02-14 15:02