React中使用React.lazy加载非组件普通JS文件报错如何解决

React.lazy 的设计定位仅支持加载默认导出的React组件，无法用于加载普通JS常量/工具模块，也不支持直接解析命名导出的内容，这是你遇到报错的核心原因：

• 你直接解构React.lazy()返回值时，拿到的是React封装的特殊组件对象，并非你导入的常量模块对象，因此customFunction必然返回undefined
• 这种不符合用法的写法也会导致打包工具无法按预期拆分出常量文件的独立chunk，因此你在开发者工具源代码面板找不到对应文件

要懒加载普通JS模块，直接使用原生动态import()语法即可，不需要套React.lazy，适配你在useEffect中调用的场景，写法如下：

// constant.js 不需要做任何修改
export const customFunction = () => {
}

// component.js 调整导入逻辑
import { useEffect, useState } from 'react';

function YourComponent() {
  // 存储加载完成的常量模块
  const [constantModule, setConstantModule] = useState(null);

  // 组件挂载后异步加载常量模块
  useEffect(() => {
    import('./constant.js').then((module) => {
      setConstantModule(module);
    });
  }, []);

  // 模块加载完成后调用对应方法
  useEffect(() => {
    if (constantModule?.customFunction) {
      constantModule.customFunction();
    }
  }, [constantModule]);

  // 其余组件逻辑...
}

如果需要增加加载状态提示，直接判断constantModule是否为null来渲染占位内容即可。

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