reactjs 未找到模块:错误:无法解析'zlib'

vaj7vani  于 2023-01-02  发布在  React
关注(0)|答案(4)|浏览(303)

我正在尝试将CRA react应用程序迁移到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\节点模块@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版本:2011年14月6日
节点版本:14月16日

我试着按npm install zlib但我得到
找不到模块“./zlib_bindings”

wooyq4lh

wooyq4lh1#

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

pb3skfrl2#

对我来说,这就是代码:

import { response } from 'express'

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

agxfikkp

agxfikkp3#

在我的例子中,是因为我试图键入'文本',突然,自动完成添加我这一行的顶部:

import { text } from 'express';

刚刚删除了它,它的工作很好。

nimxete2

nimxete24#

出于某种原因,VSCode在react中在我的文件顶部插入了来自“express”的import e

import { response } from 'express';

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

相关问题