React SSR应用报错：Element type is invalid 求助排查

操作步骤 #

1. 创建React应用 #

npx create-react-app my-ssr-app

2. 安装依赖 #

cd my-ssr-app
npm install --save express react react-dom react-router-dom react-helmet
npm install --save-dev @babel/core @babel/preset-env @babel/preset-react babel-loader css-loader style-loader webpack webpack-cli webpack-node-externals

3. 创建server.js文件 #

const path = require('path');
const express = require('express');
const React = require('react');
const ReactDOMServer = require('react-dom/server');
const { StaticRouter } = require('react-router-dom');
const { Helmet } = require('react-helmet');
const App = require('./src/App').default;

const PORT = process.env.PORT || 3000;
const app = express();

app.use(express.static(path.join(__dirname, 'build')));

app.get('*', (req, res) => {
  const context = {};
  const appMarkup = ReactDOMServer.renderToString(
    <StaticRouter location={req.url} context={context}>
      <App />
    </StaticRouter>
  );
  const helmet = Helmet.renderStatic();

  res.status(200).send(`
    <!DOCTYPE html>
    <html>
      <head>
        ${helmet.title.toString()}
        ${helmet.meta.toString()}
        <link rel="stylesheet" href="/static/css/main.css">
      </head>
      <body>
        <div id="root">${appMarkup}</div>
        <script src="/static/js/main.js"></script>
      </body>
    </html>
  `);
});

app.listen(PORT, () => {
  console.log(`Server listening on port ${PORT}`);
});

4. 修改package.json构建命令 #

{
  "scripts": {
    "build": "react-scripts build && webpack --config webpack.server.js"
  }
}

5. 创建webpack.server.js文件 #

const path = require('path');
const nodeExternals = require('webpack-node-externals');

module.exports = {
  mode: 'production',
  entry: './server.js',
  output: {
    path: path.join(__dirname, 'build'),
    filename: 'server.js',
    libraryTarget: 'commonjs2',
  },
  target: 'node',
  externals: [nodeExternals()],
  module: {
    rules: [
      {
        test: /\.(js|mjs|jsx|ts|tsx)$/,
        exclude: /node_modules/,
        loader: 'babel-loader',
        options: {
          presets: [
            '@babel/preset-env',
            '@babel/preset-react',
          ],
        },
      },
      {
        test: /\.css$/,
        use: ['style-loader', 'css-loader'],
      },
    ],
  },
  resolve: {
    extensions: ['.js', '.jsx', '.json'],
  },
};

6. 执行构建与启动服务器 #

npm run build
node build/server.js

出现的错误 #

Error: Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: undefined. You likely forgot to export your component from the file it's defined in, or you might have mixed up default and named imports.
    at renderElement (/Users/mmt10470/Documents/dev_per/my-ssr-app/node_modules/react-dom/cjs/react-dom-server-legacy.node.development.js:6047:9)
    at renderNodeDestructiveImpl (/Users/mmt10470/Documents/dev_per/my-ssr-app/node_modules/react-dom/cjs/react-dom-server-legacy.node.development.js:6108:11)
    at renderNodeDestructive (/Users/mmt10470/Documents/dev_per/my-ssr-app/node_modules/react-dom/cjs/react-dom-server-legacy.node.development.js:6080:14)
    at retryTask (/Users/mmt10470/Documents/dev_per/my-ssr-app/node_modules/react-dom/cjs/react-dom-server-legacy.node.development.js:6532:5)
    at performWork (/Users/mmt10470/Documents/dev_per/my-ssr-app/node_modules/react-dom/cjs/react-dom-server-legacy.node.development.js:6580:7)
    at /Users/mmt10470/Documents/dev_per/my-ssr-app/node_modules/react-dom/cjs/react-dom-server-legacy.node.development.js:6904:12)
    at scheduleWork (/Users/mmt10470/Documents/dev_per/my-ssr-app/node_modules/react-dom/cjs/react-dom-server-legacy.node.development.js:78:3)
    at startWork (/Users/mmt10470/Documents/dev_per/my-ssr-app/node_modules/react-dom/cjs/react-dom-server-legacy.node.development.js:6903:3)
    at renderToStringImpl (/Users/mmt10470/Documents/dev_per/my-ssr-app/node_modules/react-dom/cjs/react-dom-server-legacy.node.development.js:6977:3)
    at Object.renderToString (/Users/mmt10470/Documents/dev_per/my-ssr-app/node_modules/react-dom/cjs/react-dom-server-legacy.node.development.js:7065:10)

错误原因分析 #

这个错误的核心是服务端渲染时，某一组件被解析为undefined，具体可能的触发点如下：

1. React Router版本API变更（最可能原因） #

如果你的react-router-dom是v6及以上版本，StaticRouter已被移除，替换为StaticRouterProvider配合createStaticHandler、createMemoryRouter的组合API。此时直接从react-router-dom导入StaticRouter会得到undefined，渲染时自然会触发"元素类型无效"的错误。

2. React Helmet导入或版本问题 #

若安装的是react-helmet而非适配SSR的react-helmet-async，可能存在导出异常；或者导入语法有误，导致Helmet变量为undefined。不过从错误栈的调用链路来看，路由组件的问题概率更高。

3. App组件导出/导入不匹配 #

虽然你使用了require('./src/App').default来导入默认导出的App组件，但如果src/App.js的导出方式被修改，或webpack构建时未正确处理默认导出，也可能导致App为undefined。不过create-react-app生成的App默认是默认导出，这个情况概率较低。

快速验证方法 #

在server.js中添加打印语句，查看变量是否为undefined：

console.log('StaticRouter:', StaticRouter);
console.log('Helmet:', Helmet);
console.log('App:', App);

启动服务器后观察控制台输出，即可定位具体是哪个变量导致的问题。

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