使用Express实现React服务端渲染时renderToString报错求助

出现Error: Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: object错误，主要排查以下几个点：

1. 检查Home组件的导出与导入匹配 #

App组件中导入了Home组件，需确保两者的导出导入方式一致：

• 若Home组件是默认导出（如下）：

// src/components/Home/Home.tsx
export default function Home() {
  // 组件内容
}

那么import Home from './components/Home/Home'的写法是正确的。

• 若Home组件是命名导出：

// src/components/Home/Home.tsx
export function Home() {
  // 组件内容
}

则需将App中的导入改为import { Home } from './components/Home/Home'。

2. 修复Babel的ES模块转换配置 #

Node.js默认使用CommonJS模块规范，而你的代码用了ES模块的import/export，@babel/register默认不会转换ES模块语法，导致导入的App组件实际是一个包含default属性的对象，而非组件函数，从而引发错误。

解决步骤： #

1. 安装模块转换插件：

npm install @babel/plugin-transform-modules-commonjs --save-dev

2. 修改server/index.js的Babel配置，添加该插件：

// server/index.js
require("ignore-styles");

require("@babel/register")({
  ignore: [/(node_modules)/],
  presets: ["@babel/preset-env", "@babel/preset-react", "@babel/preset-typescript"],
  plugins: ["@babel/plugin-transform-modules-commonjs"] // 新增这一行
});

require("./server");

3. 临时兼容方案（可选） #

如果上述Babel配置修改后仍有问题，可临时调整server/server.js中的App导入方式，手动获取默认导出：

// 替换原来的import App from '../src/App';
const App = require('../src/App').default;

此方案为临时 workaround，推荐优先使用Babel配置的方式解决。

4. 验证ignore-styles生效 #

确保ignore-styles在@babel/register之前引入，它会忽略CSS文件的导入，避免因加载非JS模块导致的异常。

完成上述调整后，重新运行node server/index.js即可验证问题是否解决。

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