react 应用程序抛出错误，节点升级到 18 且 webpack 解析扩展

Question

我们正在将 React 项目的 Node 版本从 10 升级到 18。但是，升级后，我们的 webpack 配置遇到了问题，特别是解析扩展。

这是我们的 webpack 配置的相关部分：

  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',
  ],
}

升级后，我们遇到以下错误：

Error: Cannot find module '/Users/Documents/Project/node_modules/logger/src/logger'. Please verify that the package.json has a valid "main" entry.

该问题似乎与记录器文件的不同来源有关，具体取决于记录器文件是在客户端还是服务器上使用（server.tsx 和 client.tsx 文件）。

对于上下文，以下是我们的 package.json 中列出的依赖项：

"dependencies": {
  "@babel/core": "7.18.9",
  "@types/react": "^17.0.3",
  "array-flat-polyfill": "^1.0.1",
  "babel-jest": "^26.6.3",
  "browserslist-useragent-regexp": "^3.0.2",
  "husky": "^4.2.3",
  "jest": "^26.6.3",
  "jest-svg-transformer": "^1.0.0",
  "lerna": "^4.0.0",
  "lint-staged": "^10.0.8",
  "react": "^17.0.2",
  "react-dom": "^17.0.2",
  "ts-node-dev": "^1.1.8",
  "typesafe-actions": "^5.1.0",
  "typescript": "4.5.5",
  "webpack-bundle-analyzer": "^3.7.0",
  "workbox-webpack-plugin": "^6.5.4"
}

如果您能在升级到 Node 18 后解决此 webpack 问题，我们将不胜感激。谢谢！

Answer 1

尝试使用这些解决方案，因为项目的完整信息不可用，这些解决方案可能会解决问题

1）在 Webpack 配置中利用别名： 您可以使用 webpack 配置中的 alias 属性将特定模块名称映射到其服务器和客户端版本，而不是使用条件扩展。这是一个例子：

JavaScript

module.exports = {
  // ... other configuration
  resolve: {
    extensions: ['.tsx', '.jsx', '.ts', '.js', '.json'],
    alias: {
      'logger/server': path.resolve(__dirname, 'node_modules/logger/src/logger.server.js'), // Assuming server version is in logger.server.js
      'logger/client': path.resolve(__dirname, 'node_modules/logger/src/logger.client.js'), // Assuming client version is in logger.client.js
    }
  }
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/18.2.0/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/18.2.0/umd/react-dom.production.min.js"></script>

这种方法明确告诉 webpack 根据 import 语句在哪里找到记录器模块的服务器和客户端版本。

---

2）确保记录器包中的“main”条目： 如果记录器包没有定义主条目，您可以尝试联系包维护者以建议添加一个。 package.json 中的正确主条目应指向包的默认入口点，根据包设计，该入口点可以是 logger.server.js 或 logger.client.js。

---

3）更新webpack或相关Loader： 在某些情况下，升级 webpack 本身或相关加载器（如 babel-loader）可能会解决 Node 18 引入的兼容性问题。检查您的 webpack 版本和相关加载器的文档，了解与 Node 18 兼容性相关的任何已知问题或迁移指南。

---

其他提示：

考虑使用 linter 或代码格式化程序来强制服务器和客户端文件的命名约定一致。这有助于避免未来的混乱和潜在问题。 您可以使用 webpack-bundle-analyzer 等工具来可视化您的依赖关系树并识别模块解析的任何潜在问题。