React服务端渲染导入组件返回空对象报Element type is invalid如何解决

问题根因 #

你遇到的报错核心是ReactDOMServer.renderToString接收的App不是预期的函数/类组件，而是对象，本质是Babel没有正确处理.jsx后缀文件的ES模块导出规则。

排查步骤 #

1. 先验证组件导入结果
   在server.js中导入App的代码后添加日志：

import App from '../src/App'
console.log(App)

如果打印结果为{ default: [Function: App] }，即可确认是ES模块转CommonJS的兼容问题。

2. 检查Babel配置遗漏
   你当前的@babel/register配置存在两个问题：

• 没有明确指定要处理.jsx后缀的文件，默认仅处理.js文件
• 没有配置ES模块转CommonJS的兼容规则，导致default导出没有直接挂载到module.exports上
• 额外的拼写错误：ignore规则里的node_module少了后缀s

解决方法 #

方案一：修复Babel配置（推荐） #

修改./server/index.js的配置如下：

require("ignore-styles")

require("@babel/register")({
    ignore: [/(node_modules)/],
    extensions: [".js", ".jsx"], // 新增：指定处理jsx后缀文件
    presets: [
        // 新增：配置@babel/preset-env强制转CommonJS，自动兼容default导出
        ['@babel/preset-env', { modules: 'commonjs' }],
        '@babel/preset-react'
    ]
})

require('./server')

同时确认server.js顶部已导入React（写JSX必须引入）：

import React from 'react'

方案二：临时兼容导入逻辑 #

如果不想修改Babel配置，可直接调整组件导入逻辑，优先取default属性：

import AppModule from '../src/App'
const App = AppModule.default || AppModule

后续兼容提醒 #

后续如果接入react-router，服务端渲染不能使用BrowserRouter，需要替换为StaticRouter，同时保证服务端和客户端渲染的组件结构一致，避免hydrate不匹配报错。

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