【发布时间】：2021-06-30 10:29:40
【问题描述】：
我在这个错误上已经好几天了，互联网上的任何文章都没有帮助我。
它发生在我从版本 4 迁移到 webpack5 之后。
这正是它发生的地方：
var inherits = function inherits(cls, superCtor, statics, prototype) { // eslint-disable-next-line no-underscore-dangle cls.super_ = superCtor;
if (!prototype) {
prototype = statics;
statics = null; }
if (statics) {
Object.keys(statics).forEach(function (i) {
Object.defineProperty(cls, i, Object.getOwnPropertyDescriptor(statics, i));
}); }
var properties = {
constructor: {
value: cls,
enumerable: false,
writable: false,
configurable: true
} };
if (prototype) {
Object.keys(prototype).forEach(function (i) {
properties[i] = Object.getOwnPropertyDescriptor(prototype, i);
}); }
cls.prototype = Object.create(superCtor.prototype, properties);//here }; ```
If you continue to look after who called that function :
var Stream = require('stream');
(...)
var StreamBuf = function StreamBuf(options) {
options = options || {};
this.bufSize = options.bufSize || 1024 * 1024;
this.buffers = []; // batch mode fills a buffer completely before passing the data on
// to pipes or 'readable' event listeners
this.batch = options.batch || false;
this.corked = false; // where in the current writable buffer we're up to
this.inPos = 0; // where in the current readable buffer we've read up to
this.outPos = 0; // consuming pipe streams go here
this.pipes = []; // controls emit('data')
this.paused = false;
this.encoding = null;
};
utils.inherits(StreamBuf, Stream.Duplex, {
所以问题应该是需求流。但我已经安装了。
这是我的 package.json：
{
"start:dev": "webpack serve",
},
"engines": {
"node": "14.17.1"
},
"keywords": [
"dependencies": {
"axios": "^0.19.2",
"base64-js": "^1.5.1",
"browserify-zlib": "^0.2.0",
"chart.js": "^2.7.1",
"clipboard": "^1.6.1",
"compression": "^1.6.2",
"compression-webpack-plugin": "^8.0.1",
"core-js": "^3.15.1",
"dotenv-webpack": "^7.0.3",
"es6-promise": "^4.0.5",
"exceljs": "^1.15.0",
"express": "^4.14.0",
"file-saver": "^2.0.1",
"firebase": "^8.6.8",
"fs": "0.0.1-security",
"gsap": "^1.19.1",
"helmet": "^3.4.0",
"if-env": "^1.0.0",
"ipaddr.js": "^1.9.1",
"isomorphic-fetch": "^2.2.1",
"jspdf": "^2.3.1",
"jspdf-autotable": "^3.5.14",
"lodash.at": "^4.6.0",
"marked": "^0.3.6",
"moment": "^2.15.1",
"moment-timezone": "^0.5.25",
"promise-polyfill": "^6.0.2",
"prop-types": "^15.7.2",
"react": "^15.6.0",
"react-chartjs-2": "^2.6.4",
"react-datepicker": "^0.55.0",
"react-dom": "^15.6.0",
"react-popper": "^1.0.0-beta.6",
"react-redux": "^5.0.1",
"react-router": "^3.0.0",
"readable-stream": "^2.0.2",
"redux": "^3.5.2",
"redux-logger": "^2.0.0",
"redux-thunk": "^2.1.0",
"sockjs-client": "^1.1.4",
"stream": "0`enter code here`.0.2",
"string.prototype.endswith": "^0.2.0",
"string.prototype.startswith": "^0.2.0",
"tapable": "1.0.0-beta.5",
"tslib": "^2.3.0",
"ua-parser-js": "^0.7.12",
"webfontloader": "^1.6.27",
"whatwg-fetch": "^3.6.2"
},
"devDependencies": {
"@babel/cli": "^7.6.0",
"@babel/core": "^7.6.0",
"@babel/node": "^7.6.1",
"@babel/plugin-proposal-class-properties": "^7.13.0",
"@babel/plugin-proposal-nullish-coalescing-operator": "^7.8.3",
"@babel/plugin-proposal-object-rest-spread": "^7.5.5",
"@babel/plugin-proposal-optional-chaining": "^7.9.0",
"@babel/polyfill": "^7.12.1",
"@babel/preset-env": "^7.6.0",
"@babel/preset-react": "^7.0.0",
"@babel/register": "^7.11.5",
"app-require": "^0.1.1",
"autoprefixer": "^10.2.6",
"babel-eslint": "^8.2.6",
"babel-jest": "^24.9.0",
"babel-loader": "^8.0.6",
"babel-polyfill": "^6.26.0",
"buffer": "^6.0.3",
"chai": "^4.2.0",
"classnames": "^2.2.5",
"copy-webpack-plugin": "^9.0.0",
"crypto-browserify": "^3.12.0",
"css-loader": "^5.2.6",
"dotenv": "^4.0.0",
"eslint": "^5.16.0",
"eslint-config-prettier": "^6.3.0",
"eslint-plugin-prettier": "^3.1.1",
"eslint-plugin-react": "^7.16.0",
"file-loader": "^6.2.0",
"firebase-admin": "^9.10.0",
"forever": "^0.15.3",
"html-webpack-plugin": "^5.3.2",
"jest": "^24.9.0",
"loglevel": "^1.6.4",
"mini-css-extract-plugin": "^1.6.0",
"mocha": "^6.2.0",
"node-sass": "^4.14.1",
"normalize.css": "^7.0.0",
"postcss-loader": "^3.0.0",
"prettier": "^1.18.2",
"raw-loader": "^0.5.1",
"react-hot-loader": "^4.13.0",
"redux-devtools": "^3.3.1",
"resolve-url-loader": "^4.0.0",
"sass-loader": "^12.1.0",
"style-loader": "^2.0.0",
"terser-webpack-plugin": "^5.1.3",
"url-loader": "^4.1.1",
"util": "^0.12.4",
"webpack": "^5.40.0",
"webpack-bundle-analyzer": "^4.4.2",
"webpack-cli": "^4.7.2",
"webpack-dev-server": "^3.11.2"
}
}
```
And here is my webpack config:
```.
const webpack = require('webpack');
const path = require("path");
const MiniCssExtractPlugin = require('mini-css-extract-plugin');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const CopyWebpackPlugin = require('copy-webpack-plugin');
const TerserPlugin = require('terser-webpack-plugin');
const autoprefixer = require('autoprefixer');
const Dotenv = require('dotenv-webpack')
const nodeEnv = process.env.NODE_ENV || "development"
const simulateProd = process.env.SIMULATE_PROD
const isProdEnv = nodeEnv === 'production'
const isNotDevEnv = nodeEnv !== "development"
const buildPath = path.join(__dirname, './dist');
const sourcePath = path.join(__dirname, './src');
const imagesPath = path.join(__dirname, './src/images');
const iconsPath = path.join(__dirname, './src/icons');
const soundsPath = path.join(__dirname, './src/sounds');
// Common plugins
const plugins = [
new MiniCssExtractPlugin(),
new webpack.LoaderOptionsPlugin({
options: {
postcss: [
autoprefixer(),
],
context: sourcePath,
},
}),
new CopyWebpackPlugin(
{
patterns: [
{from: iconsPath, to: 'icons'},
{from: imagesPath, to: 'images'}
]
}
),
new Dotenv({
systemvars: true
}),
new HtmlWebpackPlugin({
template: path.join(sourcePath, 'index.html'),
path: buildPath,
filename: 'index.html',
}),
]
// Common rules
const rules = [
{
test: /\.(js|jsx)$/,
loader: 'babel-loader',
exclude: /node_modules/,
options: {
plugins: ['react-hot-loader/babel'],
}
// use: [
// 'babel-loader',
// ],
},
{
test: /\.s[ac]ss$/i,
exclude: /node_modules/,
use: [
// Creates `style` nodes from JS strings
"style-loader",
// Translates CSS into CommonJS
{
loader: 'css-loader',
options: {
url : false
}
},
// Compiles Sass to CSS
"sass-loader",
],
},
{
test: /\.css$/,
use: [MiniCssExtractPlugin.loader, 'css-loader'],
},
{
test: /\.(ico|jpe?g|png|gif|svg|mp3|html)$/,
include: [imagesPath, soundsPath],
use: 'file-loader?name=[path][name].[ext]',
},
{
test: /\.md$/,
use: 'raw-loader'
}
]
if (isProdEnv) {
// Production plugins
plugins.push(
new TerserPlugin({
cache: true,
parallel: true,
sourceMap: true
})
)
} else {
// Development plugins
plugins.push(
new webpack.HotModuleReplacementPlugin()
)
}
module.exports = {
devtool: isNotDevEnv ? false : 'source-map',
context: sourcePath,
entry: {
js: './index.js',
},
output: {
path: buildPath,
publicPath: '/',
filename: "bundle.js",
},
module: {
rules,
},
resolve: {
extensions: ['.webpack-loader.js', '.web-loader.js', '.loader.js', '.js', '.jsx', '.md', '.scss', '.css'],
modules: [
path.resolve(__dirname, 'node_modules'),
sourcePath,
],
fallback: {
"buffer": false,
"fs": false,
"os": false,
"path": false,
"zlib": false,
"stream": false,
"crypto": false,
} ,
},
plugins,
optimization : {
moduleIds: 'named',
},
devServer: {
contentBase: isNotDevEnv ? buildPath : sourcePath,
historyApiFallback: true,
port: 8080,
compress: isNotDevEnv,
inline: !isNotDevEnv,
hot: !isNotDevEnv,
host: "localhost",
disableHostCheck: true,
stats: {
assets: true,
children: false,
chunks: false,
hash: false,
modules: false,
publicPath: false,
timings: true,
version: false,
warnings: true,
colors: {
green: '\u001b[32m',
},
},
},
};
我尝试了很多关于后备的事情，但没有成功。当然，我删除了 package.lock 和 node-modules 然后安装了同样的东西。我也重新安装了excel-js。
我现在在等待奇迹！谢谢
【问题讨论】：
标签： node.js reactjs webpack stream migration