使用react-loadable导入npm包组件时出现模块找不到错误

问题原因 #

react-loadable动态导入node_modules模块时报错，本质是webpack对第三方模块的动态导入解析或代码分割配置不当，或是babel未正确支持动态导入语法，导致无法找到对应模块的chunk。

修复方案（react-loadable适用） #

1. 确保babel支持动态导入 #

在babel配置文件（如.babelrc或babel.config.js）中添加@babel/plugin-syntax-dynamic-import插件：

{
  "plugins": ["@babel/plugin-syntax-dynamic-import"]
}

2. 调整webpack代码分割配置 #

修改webpack.config.js的optimization.splitChunks，确保第三方模块被正确打包：

module.exports = {
  optimization: {
    splitChunks: {
      chunks: 'all',
      cacheGroups: {
        vendor: {
          test: /[\\/]node_modules[\\/]/,
          name: 'vendors',
          chunks: 'all'
        }
      }
    }
  }
};

3. 修正react-loadable的loader写法 #

部分第三方组件为默认导出，需明确指定导出项：

const Component = Loadable({
  loader: () => import('@material-ui/core/Button').then(mod => ({ default: mod.default })),
  loading: () => <div>Loading...</div>
});

替代方案：React官方动态导入方案（React.lazy + Suspense） #

如果react-loadable仍无法解决问题，推荐使用React原生支持的动态导入方案，无需额外依赖，对第三方模块兼容性更好：

import { Suspense, lazy } from 'react';

// 动态导入node_modules或src中的组件
const MuiButton = lazy(() => import('@material-ui/core/Button'));
const CustomComponent = lazy(() => import('./src/components/CustomComponent'));

// 使用时包裹Suspense
function App() {
  return (
    <Suspense fallback={<div>Loading...</div>}>
      <MuiButton variant="contained">Material UI Button</MuiButton>
      <CustomComponent />
    </Suspense>
  );
}

该方案会自动触发webpack的代码分割，无需额外配置即可支持src和node_modules模块的动态导入。

内容的提问来源于stack exchange，提问作者Jacques