Novato de Webpack aquí, webpack cli me dijo que necesitaba proporcionar un alias para crypto ya que webpack ya no incluye bibliotecas de nodos predeterminadas. Ahora recibo este error, otras respuestas no han ayudado tanto. crypto-browserify está intentando acceder a process.browser . ¿Alguien puede arrojar más luz? CLI me dijo que instalara stream-browserify también, así que lo hice.
Reaccionar v17, Babel 7.12.9, paquete web 5.6.0
paquete web.common.js
const paths = require('./paths'); const { CleanWebpackPlugin } = require('clean-webpack-plugin'); const CopyWebpackPlugin = require('copy-webpack-plugin'); const HtmlWebpackPlugin = require('html-webpack-plugin'); const dotenv = require('dotenv-webpack'); module.exports = { entry: [paths.src + '/index.js'], output: { path: paths.build, filename: '[name].bundle.js', publicPath: '/', }, plugins: [ new dotenv(), new CleanWebpackPlugin(), new CopyWebpackPlugin({ patterns: [ { from: paths.public, to: 'assets', globOptions: { ignore: ['*.DS_Store'], }, }, ], }), new HtmlWebpackPlugin({ title: 'Webpack Boilerplate', // favicon: paths.src + '/images/favicon.png', template: paths.src + '/template.html', filename: 'index.html', }), ], resolve: { fallback: { crypto: require.resolve('crypto-browserify'), stream: require.resolve('stream-browserify'), }, }, module: { rules: [ // javascript { test: /\.js$/, exclude: /node_modules/, use: ['babel-loader'], }, // images { test: /\.(?:ico|gif|png|jpg|jpeg)$/i, type: 'asset/resource', }, // Fonts and SVGs { test: /\.(woff(2)?|eot|ttf|otf|svg|)$/, type: 'asset/inline', }, // CSS, PostCSS, and Sass { test: /\.(scss|css)$/, use: [ 'style-loader', { loader: 'css-loader', options: { esModule: true, sourceMap: true, importLoaders: 1, modules: { auto: true, namedExport: true, }, }, }, { loader: 'postcss-loader', options: { sourceMap: true } }, { loader: 'sass-loader', options: { sourceMap: true } }, ], }, ], }, };webpack.dev.js
const webpack = require('webpack'); const { merge } = require('webpack-merge'); const common = require('./webpack.common'); module.exports = merge(common, { mode: 'development', // Control how source maps are generated devtool: 'inline-source-map', // Spin up a server for quick development devServer: { historyApiFallback: true, contentBase: paths.build, open: true, compress: true, hot: true, port: 8080, }, plugins: [ // Only update what has changed on hot reload new webpack.HotModuleReplacementPlugin(), ], });En webpack 5, se eliminan los polyfills automáticos de node.js. En los documentos de migración se menciona que
Ver este problema.
Ahora puede consultar este PR y verificar las bibliotecas que se eliminaron e instalarlas. A continuación, agregue un alias para la biblioteca en la configuración de su paquete web.
por ej.
resolve: { alias: { process: "process/browser" } } Actualización: esto también se puede hacer usando ProvidePlugin
paquete.json
"devDependencies": { ... "process": "0.11.10", }webpack.config.js
module.exports = { ... plugins: [ new webpack.ProvidePlugin({ process: 'process/browser', }), ], }Tengo este problema para HtmlWebpackPlugin, agregué el parámetro 'templateParameters' a HtmlWebpackPlugin y se solucionó para mí:
new HtmlWebpackPlugin({ baseUrl: '/', template: 'app/index.html', templateParameters(compilation, assets, options) { return { compilation, webpack: compilation.getStats().toJson(), webpackConfig: compilation.options, htmlWebpackPlugin: { files: assets, options, }, process, } }, chunksSortMode: 'auto', minify: { collapseWhitespace: false, }, cache: true, }),Espero que la corrección que propuse sea aceptada y publicada pronto.
npm i process era todo lo que necesitaba.