Node 18升级后React项目Webpack解析扩展名报错求助

问题根源 #

Node 18对ES模块的解析逻辑更严格，同时Webpack（尤其是5.x及以上版本）的模块解析规则更依赖package.json的exports字段。你的错误本质是logger包的主入口配置不匹配Webpack的后缀解析顺序，导致无法找到对应环境（服务端/客户端）的logger.server.tsx或logger.client.tsx文件。

解决方案 #

1. 修正logger包的package.json配置 #

如果logger是你维护的内部包，在其package.json中添加条件导出，明确指定不同环境的入口：

{
  "name": "logger",
  "exports": {
    ".": {
      "server": "./src/logger.server.tsx",
      "client": "./src/logger.client.tsx",
      "import": "./src/logger.client.tsx",
      "require": "./src/logger.client.tsx",
      "default": "./src/logger.client.tsx"
    }
  },
  "main": "./src/logger.client.tsx", // 兜底配置
  "types": "./src/logger.d.ts" // 若使用TypeScript需补充类型入口
}

配置后Webpack会根据环境自动匹配对应入口，无需依赖extensions顺序。

2. 调整Webpack resolve配置 #

如果无法修改logger包的配置，直接调整Webpack的解析规则：

• 添加mainFields和conditionNames，优先解析对应环境的字段：

resolve: {
  modules: ['packages', 'verticals', 'node_modules', 'folder1'],
  extensions: [
    isServer ? '.server.tsx' : '.client.tsx',
    isServer ? '.server.jsx' : '.client.jsx',
    isServer ? '.server.ts' : '.client.ts',
    isServer ? '.server.js' : '.client.js',
    '.web.tsx',
    '.web.jsx',
    '.web.ts',
    '.web.js',
    '.tsx',
    '.jsx',
    '.ts',
    '.js',
    '.json',
  ],
  // 优先匹配对应环境的入口字段
  mainFields: isServer ? ['server', 'main', 'module'] : ['client', 'main', 'module'],
  // 配合package.json exports的条件规则
  conditionNames: isServer ? ['server', 'require'] : ['client', 'import']
}

• 或者添加别名强制指向对应环境的文件：

const path = require('path');

resolve: {
  alias: {
    'logger': isServer 
      ? path.resolve(__dirname, 'node_modules/logger/src/logger.server.tsx') 
      : path.resolve(__dirname, 'node_modules/logger/src/logger.client.tsx')
  }
}

3. 确保Webpack版本兼容 #

Node 18要求Webpack 5.x及以上版本，检查项目依赖（包括lerna子包），确保Webpack已升级到兼容版本。

更优SSR配置方案 #

1. 用Webpack Target区分环境
   服务端打包时设置target: 'node'，客户端设置target: 'web'，Webpack会自动适配模块解析和打包逻辑：

// 服务端Webpack配置
module.exports = {
  target: 'node',
  // 其他配置...
}
// 客户端Webpack配置
module.exports = {
  target: 'web',
  // 其他配置...
}

2. 依赖ES模块条件导出
   抛弃传统的后缀区分方式，统一用package.json的exports字段管理多环境入口，这是现代Node.js和Webpack推荐的标准方案，能减少配置复杂度，同时兼容更多工具链。

3. 简化extensions配置
   如果已经使用条件导出，可将extensions简化为通用后缀，避免大量条件判断：

extensions: ['.tsx', '.ts', '.jsx', '.js', '.json']

4. 考虑官方SSR工具链
   若项目允许，迁移到Next.js或Remix这类内置SSR支持的框架，无需手动维护复杂的Webpack配置，同时获得更好的性能和稳定性。

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