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

Question

我正在尝试将一个 CRA React 应用迁移到 NX，按照官方网站上的步骤进行。当我运行nx serve时，遇到以下错误：

C:/dev/nx-dev/scandy/node_modules/@react-pdf/png-js/dist/png-js.browser.es.js 中出错 未找到模块: Error: Can't resolve 'zlib' in '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 中出错 未找到模块: Error: Can't resolve 'zlib' in 'C:\dev\nx-dev\scandy\node_modules@react-pdf\pdfkit\dist'

已知：在开始迁移之前，我的项目运行良好。 npm 版本：6.14.11 node 版本：14.16.0 我尝试运行npm install zlib，但是我得到了以下错误：

Cannot find module './zlib_bindings'

- Abdulrahman Falyoun

---

由于某种原因，VSCode 在我的 React 文件顶部插入了 import e from 'express'，导致出现了这个错误。希望这能对其他人有所帮助... - gfdb

这对我来说是个问题。我也插入了import e from 'express'。 - Danielle

Answer 1

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

import { response } from 'express';

我删除了上述import行，问题得到解决，在进行上述更改后所有错误都消失了。

- Selçuk YAPICI

---

谢谢。这个被导入到我的Angular项目中，而不是@angular/router的那个，我没有注意到。 - Chris Barr

谢谢！对我来说，这是import { set } from "express/lib/application"; 有人知道为什么VS Code会这样吗？ - undefined

Answer 2

对我来说，最重要的是代码：

import { response } from 'express'

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

- Avital Pasternak

Answer 3

这篇文章是关于Webpack 5以及在React应用中使用默认配置的问题。我遵循了这里的建议：https://github.com/nrwl/nx/issues/4817#issuecomment-824316899，并参考React NX文档了解如何使用自定义Webpack配置。

请创建一个自定义的Webpack配置文件，例如在 /apps/myapp/webpack.config.js 中，并在 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正确理解需要哪些polyfills。

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

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'),  
      }
    }
  };
};

- x3mka

Answer 4

在我的情况下，是因为我试图输入“Text”，突然间自动完成功能在顶部添加了这一行：

import { text } from 'express';

刚刚删除了它，然后它就正常工作了。

- Sebastian Paduano

Answer 5

1. 在VSCode搜索图标中搜索“express”，你可能会得到以下内容：

   import { text } from 'express'
   import { Router } from 'express'
   import { X,Y,Z } from 'express'
   

2. 删除这行代码，你的应用程序将正常工作。

- Saurabh Khandagale