未找到模块：错误：无法解析“zlib”答案

【问题标题】：Module not found: Error: Can't resolve 'zlib'未找到模块：错误：无法解析“zlib”
【发布时间】：2021-07-04 03:47:16
【问题描述】：

我正在尝试将 CRA 反应应用程序迁移到 NX，按照official site 上的步骤进行操作

当我点击nx serve时

我面临以下错误：

C:/dev/nx-dev/scandy/node_modules/@react-pdf/png-js/dist/png-js.browser.es.js 中的错误未找到模块：错误：无法解析“C:\dev\nx-dev\scandy\node_modules@react-pdf\png-js\dist”中的“zlib”

C:/dev/nx-dev/scandy/node_modules/@react-pdf/pdfkit/dist/pdfkit.browser.es.js 中的错误未找到模块：错误：无法解析“C:\dev\nx-dev\scandy\node_modules@react-pdf\pdfkit\dist”中的“zlib”

知道：在我开始迁移之前，我的项目运行良好。

npm 版本：6.14.11

节点版本：14.16.0

我试过打npm install zlib，但我得到了

找不到模块'./zlib_bindings'

【问题讨论】：

标签： reactjs

【解决方案1】：

这是关于 Webpack 5 及其用于 React 应用程序的默认配置。我听从了这里的建议：https://github.com/nrwl/nx/issues/4817#issuecomment-824316899 和 React NX 文档，了解如何使用自定义 webpack 配置。

在 /apps/myapp/webpack.config.js 中创建一个自定义 webpack 配置，并在 workspace.json 而不是 "webpackConfig": "@nrwl/react/plugins/webpack" 中引用它。应该是"webpackConfig": "apps/myapp/webpack.config.js"。

webpack.config.js 的内容：

const nrwlConfig = require("@nrwl/react/plugins/webpack.js");

module.exports = (config, context) => {
  // first call it so that @nrwl/react plugin adds its configs
  nrwlConfig(config);

  return {
    ...config,
    node: undefined
  };
};

因此，此配置更改使 webpack 正确理解需要哪些 polyfill。

或者，您可以执行以下操作：

const nrwlConfig = require("@nrwl/react/plugins/webpack.js");

module.exports = (config, context) => {
  // first call it so that @nrwl/react plugin adds its configs
  nrwlConfig(config);

  return {
    ...config,
    resolve: {
      ...config.resolve,
      alias: {
        ...config.resolve.alias,
        stream: require.resolve('stream-browserify'),
        zlib: require.resolve('browserify-zlib'),  
      }
    }
  };
};

【讨论】：