升级Node.js16后React SSR项目构建报错及导入问题排查

核心问题分析 #

1. React压缩错误#130：本质是你用import App from '_view/app'默认导入时，拿到的不是有效的React组件——因为_view/app里是命名导出（export { App }）而非默认导出，默认导入会获取到模块的default属性（通常是undefined），导致React无法渲染。
2. TypeError: Cannot read property 'now' of undefined：Node.js 16对全局API做了调整，部分依赖库调用performance.now()时，performance对象未在Node上下文正确挂载。

无需全量修改导入方式的解决方案 #

方案1：用Babel插件自动映射命名导出为默认导出 #

通过babel-plugin-transform-imports让Babel在编译时自动将默认导入转换为命名导入，无需修改业务代码：

// babel.config.js
module.exports = {
  plugins: [
    [
      'transform-imports',
      {
        '_view/*': {
          customName: (importName, matches) => {
            // 针对app模块，把默认导入映射到命名导出的App
            if (matches[1] === 'app') {
              return `${matches[0]}/${matches[1]}#App`;
            }
            return `${matches[0]}/${matches[1]}`;
          },
          skipDefaultConversion: false
        }
      }
    ]
  ]
};

方案2：Webpack包装模块导出 #

通过Webpack的模块替换插件，给_view/app加一层包装，将命名导出转为默认导出：

1. 修改Webpack配置：

// webpack.config.js
const webpack = require('webpack');
const path = require('path');

module.exports = {
  // ...其他配置
  plugins: [
    new webpack.NormalModuleReplacementPlugin(
      /_view\/app$/,
      resource => {
        // 指向包装文件
        resource.request = path.resolve(__dirname, 'src/views/app-wrapper.js');
      }
    )
  ]
};

2. 创建src/views/app-wrapper.js：

import { App } from './app';
export default App;

这样所有默认导入App from '_view/app'都会自动加载这个包装文件，拿到正确的组件。

方案3：Webpack resolve配置补全 #

检查Webpack的路径解析配置，确保_view别名指向正确目录，且包含JSX扩展名：

// webpack.config.js
module.exports = {
  resolve: {
    alias: {
      '_view': path.resolve(__dirname, 'src/views') // 确认路径无错误
    },
    extensions: ['.js', '.jsx'] // 保证JSX文件能被正确解析
  }
};

解决performance.now()未定义的问题 #

在项目SSR入口文件（比如server.js）顶部添加：

// 给Node上下文补全performance对象
global.performance = global.performance || require('perf_hooks').performance;

或者通过Webpack注入全局变量：

// webpack.config.js
new webpack.DefinePlugin({
  'global.performance': 'require("perf_hooks").performance'
})

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