我无法修改 create-react-app 中的 webpack.config 来安装 react-pdf
I can't modify webpack.config in create-react-app to install react-pdf
帮我安装react-pdf包(https://github.com/diegomura/react-pdf) on create react app. I can't make changes to webpack.config. I do it according to the instructions I found here from the user River Twilight: How to update webpack config for a react project created using create-react-app?
按照说明安装react-pdf
- 我运行
npm install process browserify-zlib stream-browserify util buffer assert
- 在项目根文件夹
中创建config-override.js
- 接下来您需要将以下行插入到配置中：
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",
}),
]
/* ... */
}
但是 a) webstorm 发誓，b) 项目不是由 "start": "react-app-rewired start" 启动的。
我在不更改配置的情况下遇到的错误：
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 }
这些错误似乎是由于 react-scripts v5 而发生的。在使用 react-router v5 时，我花了一天时间找出解决方案。但目前最好的方法似乎是继续使用，或者恢复到 v4.0.3，直到 v5 添加对节点 built-ins #11764 的支持被合并并且已发布。
This issue Github 可能有帮助。
您可以使用rewire更改webpack配置的设置而无需弹出。
npm i rewire
我将两个脚本（start.js 和 build.js）放在根目录（即 src 外部）的脚本文件夹中。然后在 package.json 中更改启动和构建脚本以使用它们。
"start": "node scripts/start.js",
"build": "node scripts/build.js",
start.js:
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:
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',
}),
];
这是您已经提到的 this post and the readme 的组合。
...当然你还需要曾经拥有的：
npm install process browserify-zlib stream-browserify util buffer assert
帮我安装react-pdf包(https://github.com/diegomura/react-pdf) on create react app. I can't make changes to webpack.config. I do it according to the instructions I found here from the user River Twilight: How to update webpack config for a react project created using create-react-app?
按照说明安装react-pdf
- 我运行
npm install process browserify-zlib stream-browserify util buffer assert - 在项目根文件夹 中创建
- 接下来您需要将以下行插入到配置中：
config-override.js
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",
}),
]
/* ... */
}
但是 a) webstorm 发誓，b) 项目不是由 "start": "react-app-rewired start" 启动的。
我在不更改配置的情况下遇到的错误：
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 }
这些错误似乎是由于 react-scripts v5 而发生的。在使用 react-router v5 时，我花了一天时间找出解决方案。但目前最好的方法似乎是继续使用，或者恢复到 v4.0.3，直到 v5 添加对节点 built-ins #11764 的支持被合并并且已发布。
This issue Github 可能有帮助。
您可以使用rewire更改webpack配置的设置而无需弹出。
npm i rewire
我将两个脚本（start.js 和 build.js）放在根目录（即 src 外部）的脚本文件夹中。然后在 package.json 中更改启动和构建脚本以使用它们。
"start": "node scripts/start.js",
"build": "node scripts/build.js",
start.js:
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:
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',
}),
];
这是您已经提到的 this post and the readme 的组合。
...当然你还需要曾经拥有的：
npm install process browserify-zlib stream-browserify util buffer assert