使用module.exports搭配import报错：元素类型无效问题排查

DevOps 小满

2026-8-14

问题分析与解决

你的核心问题出在入口文件的导出方式：module.exports = import("./src/client/Hello.js"); 这行代码里，import()是异步动态导入语法，它返回的是一个Promise对象，而非直接的React组件类/函数。当React尝试渲染这个Promise对象时，就会抛出你看到的错误——因为它期望拿到组件类型（字符串/类/函数），但实际得到的是Promise这个对象。

错误原因拆解

import() 是ES模块的异步导入语法，调用后立即返回Promise，不会同步加载并返回模块内容。
你的Hello.js是正确的默认导出，但入口文件没有正确获取到导出的组件，而是把Promise赋值给了module.exports，导致React无法识别这个对象为有效组件。

解决方案

方案1：使用同步导入（推荐，适合常规场景）

如果不需要异步加载组件，直接用标准同步导入语法替换：

// 替换原来的异步导入
module.exports = require("./src/client/Hello.js").default;
// 若环境支持ES模块导出，也可以写成：
// export { default } from "./src/client/Hello.js";

注意：因为Hello.js用的是export default，所以用require导入时需要取.default属性；如果用ES模块的import语法，直接import Hello from "./src/client/Hello.js"即可。

方案2：若确实需要异步导入（如代码分割场景）

如果是为了代码分割而使用动态导入，需要在React中处理Promise的状态，比如用状态管理配合副作用钩子加载组件：

import React, { useState, useEffect } from 'react';

function App() {
  const [HelloComponent, setHelloComponent] = useState(null);

  useEffect(() => {
    import("./src/client/Hello.js").then(module => {
      setHelloComponent(module.default);
    });
  }, []);

  if (!HelloComponent) {
    return <div>Loading...</div>;
  }

  return <HelloComponent />;
}

export default App;