找不到模块：错误：无法解析“zlib”

Question

我正在尝试按照官方网站上的步骤将 CRA React 应用程序迁移到 NX

当我击中时nx serve

我面临以下错误：

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

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

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

npm 版本：6.14.11

节点版本：14.16.0

我尝试过击打，npm install zlib但还是击中了

找不到模块“./zlib_bindings”

Answer 1

由于某种原因，VSCode 在 React 文件的顶部插入了 import e from 'express'

import { response } from 'express';

我删除了上面的import行，然后问题就解决了，上述更改后所有错误都消失了。

Answer 2

对我来说这是代码：

import { response } from 'express'

这是 VSCode 在文件开头自动输入的。删除它解决了问题。

Answer 3

这是关于 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'),  
      }
    }
  };
};