首页
学习
活动
专区
圈层
工具
发布
首页
学习
活动
专区
圈层
工具
MCP广场
社区首页 >问答首页 >我不能修改webpack.config中的创建反应-应用程序安装app pdf。

我不能修改webpack.config中的创建反应-应用程序安装app pdf。
EN

Stack Overflow用户
提问于 2022-01-16 10:11:34
回答 2查看 6.2K关注 0票数 4

帮助我安装react软件包(https://github.com/diegomura/react-pdf)在create应用程序上。我不能对webpack.config进行更改。我是按照我在这里找到的用户河暮光之城:如何更新webpack配置为一个使用创建-反应-应用程序创建的app项目?的指示来做的。

根据安装说明-pdf

  1. 我运行npm install process browserify-zlib stream-browserify util buffer assert
  2. 在项目根文件夹中创建config-override.js
  3. 接下来,您需要在配置中插入以下行:

代码语言:javascript
运行
复制
const webpack = require("webpack");

module.exports = {
  /* ... */

  resolve: {
    fallback: {
      process: require.resolve("process/browser"),
      zlib: require.resolve("browserify-zlib"),
      stream: require.resolve("stream-browserify"),
      util: require.resolve("util"),
      buffer: require.resolve("buffer"),
      asset: require.resolve("assert"),
    }
  },
  plugins: [
    new webpack.ProvidePlugin({
      Buffer: ["buffer", "Buffer"],
      process: "process/browser",
    }),
  ]

  /* ... */
}

但是,网络风暴发誓,( b)该项目不是由"start": "react-app-rewired start"启动的。

在不更改配置的情况下得到的错误:

代码语言:javascript
运行
复制
Compiled with problems:X

ERROR in ./node_modules/@react-pdf/pdfkit/lib/pdfkit.browser.es.js 2:0-28

Module not found: Error: Can't resolve 'stream' in 'C:\Users\schek\Desktop\react\snitch\node_modules\@react-pdf\pdfkit\lib'

BREAKING CHANGE: webpack < 5 used to include polyfills for node.js core modules by default.
This is no longer the case. Verify if you need this module and configure a polyfill for it.

If you want to include a polyfill, you need to:
    - add a fallback 'resolve.fallback: { "stream": require.resolve("stream-browserify") }'
    - install 'stream-browserify'
If you don't want to include a polyfill, you can use an empty module like this:
    resolve.fallback: { "stream": false }


ERROR in ./node_modules/@react-pdf/pdfkit/lib/pdfkit.browser.es.js 4:0-24

Module not found: Error: Can't resolve 'zlib' in 'C:\Users\schek\Desktop\react\snitch\node_modules\@react-pdf\pdfkit\lib'

BREAKING CHANGE: webpack < 5 used to include polyfills for node.js core modules by default.
This is no longer the case. Verify if you need this module and configure a polyfill for it.

If you want to include a polyfill, you need to:
    - add a fallback 'resolve.fallback: { "zlib": require.resolve("browserify-zlib") }'
    - install 'browserify-zlib'
If you don't want to include a polyfill, you can use an empty module like this:
    resolve.fallback: { "zlib": false }


ERROR in ./node_modules/@react-pdf/png-js/lib/png-js.browser.es.js 1:0-24

Module not found: Error: Can't resolve 'zlib' in 'C:\Users\schek\Desktop\react\snitch\node_modules\@react-pdf\png-js\lib'

BREAKING CHANGE: webpack < 5 used to include polyfills for node.js core modules by default.
This is no longer the case. Verify if you need this module and configure a polyfill for it.

If you want to include a polyfill, you need to:
    - add a fallback 'resolve.fallback: { "zlib": require.resolve("browserify-zlib") }'
    - install 'browserify-zlib'
If you don't want to include a polyfill, you can use an empty module like this:
    resolve.fallback: { "zlib": false }


ERROR in ./node_modules/blob-stream/index.js 1:21-47

Module not found: Error: Can't resolve 'stream' in 'C:\Users\schek\Desktop\react\snitch\node_modules\blob-stream'

BREAKING CHANGE: webpack < 5 used to include polyfills for node.js core modules by default.
This is no longer the case. Verify if you need this module and configure a polyfill for it.

If you want to include a polyfill, you need to:
    - add a fallback 'resolve.fallback: { "stream": require.resolve("stream-browserify") }'
    - install 'stream-browserify'
If you don't want to include a polyfill, you can use an empty module like this:
    resolve.fallback: { "stream": false }


ERROR in ./node_modules/restructure/src/EncodeStream.js 23:11-28

Module not found: Error: Can't resolve 'stream' in 'C:\Users\schek\Desktop\react\snitch\node_modules\restructure\src'

BREAKING CHANGE: webpack < 5 used to include polyfills for node.js core modules by default.
This is no longer the case. Verify if you need this module and configure a polyfill for it.

If you want to include a polyfill, you need to:
    - add a fallback 'resolve.fallback: { "stream": require.resolve("stream-browserify") }'
    - install 'stream-browserify'
If you don't want to include a polyfill, you can use an empty module like this:
    resolve.fallback: { "stream": false }
EN

回答 2

Stack Overflow用户

回答已采纳

发布于 2022-01-25 08:47:12

这些错误似乎是由于react脚本v5而发生的。我花了一天时间想出了一个解决方案,同时使用了react路由器v5。但是,目前最好的方法是继续使用,或者恢复到v4.0.3,直到v5将对节点内置#11764的支持合并并发布。

这个问题可能会帮上忙。

票数 4
EN

Stack Overflow用户

发布于 2022-03-11 06:31:02

您可以使用重丝更改webpack配置的设置,而无需弹出。

代码语言:javascript
运行
复制
npm i rewire

我将两个脚本(start.js和build.js)放在根目录(即src外部)的脚本文件夹中。然后在package.json中更改start和build脚本以使用这些脚本。

代码语言:javascript
运行
复制
"start": "node scripts/start.js",
"build": "node scripts/build.js",

start.js:

代码语言:javascript
运行
复制
const rewire = require('rewire');
const webpack = require('webpack');
const defaults = rewire('react-scripts/scripts/start.js');
const webpackConfig = require('react-scripts/config/webpack.config');

//In order to override the webpack configuration without ejecting the create-react-app
defaults.__set__('configFactory', (webpackEnv) => {
  let config = webpackConfig(webpackEnv);

  //Customize the webpack configuration here.
  config.resolve.fallback = {
    ...config.resolve.fallback,
    process: require.resolve('process/browser'),
    zlib: require.resolve('browserify-zlib'),
    stream: require.resolve('stream-browserify'),
    util: require.resolve('util'),
    buffer: require.resolve('buffer'),
    asset: require.resolve('assert'),
  };

  config.plugins = [
    ...config.plugins,
    new webpack.ProvidePlugin({
      Buffer: ['buffer', 'Buffer'],
      process: 'process/browser',
    }),
  ];

  return config;
});

build.js:

代码语言:javascript
运行
复制
const rewire = require('rewire');
const webpack = require('webpack');
const defaults = rewire('react-scripts/scripts/build.js');

//In order to override the webpack configuration without ejecting the create-react-app
const config = defaults.__get__('config');

//Customize the webpack configuration here.
config.resolve.fallback = {
  ...config.resolve.fallback,
  process: require.resolve('process/browser'),
  zlib: require.resolve('browserify-zlib'),
  stream: require.resolve('stream-browserify'),
  util: require.resolve('util'),
  buffer: require.resolve('buffer'),
  asset: require.resolve('assert'),
};

config.plugins = [
  ...config.plugins,
  new webpack.ProvidePlugin({
    Buffer: ['buffer', 'Buffer'],
    process: 'process/browser',
  }),
];

这是您已经引用过的这个职位自述文件的组合。

当然,...and还需要您已经拥有的:

代码语言:javascript
运行
复制
npm install process browserify-zlib stream-browserify util buffer assert
票数 3
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接:

https://stackoverflow.com/questions/70729090

复制
相关文章

相似问题

领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档