Webpack 5 - 未捕获的 ReferenceError：未定义进程

Posted 2023-02-22

【中文标题】Webpack 5 - 未捕获的 ReferenceError：未定义进程

【英文标题】：Webpack 5 - Uncaught ReferenceError: process is not defined

【发布时间】：2021-03-09 02:53:26

【问题描述】：

这里是 Webpack 新手，webpack cli 告诉我，我需要为 crypto 提供别名，因为 webpack 不再包含默认节点库。现在我遇到了这个错误，其他答案并没有太大帮助。 crypto-browserify 正在尝试访问 process.browser。谁能阐明更多？ cli 告诉我也要安装stream-browserify，所以我照做了。

React v17、Babel 7.12.9、webpack 5.6.0

webpack.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(),
  ],
);

【参考方案1】：

在 webpack 5 中，自动 node.js polyfills 被移除。在迁移文档中提到

尽可能使用与前端兼容的模块。 可以为 node.js 核心模块手动添加 polyfill。 错误消息将提示如何实现。 包作者：使用 package.json 中的浏览器字段制作一个 包前端兼容。提供替代品 浏览器的实现/依赖项。

请参阅this 问题。

现在您可以参考此PR 并检查已删除的库并安装它们。 接下来为您的 webpack 配置中的 lib 添加 alias。

例如

resolve: 
    alias: 
       process: "process/browser"
     
 

更新： 这也可以使用ProvidePlugin

package.json

"devDependencies": 
   ...
   "process": "0.11.10",

webpack.config.js

module.exports = 
  ...
  plugins: [
      new webpack.ProvidePlugin(
             process: 'process/browser',
      ),
  ],

【讨论】：

已安装进程并尝试了这个，但还没有运气。也试过fallback: ..., process: require.resolve('process')...和alias: process: 'process'

谢谢你。webpack.ProvidePlugin工作

我已经 npm install process 和 ProvidePlugin 但我正在回复 Module not found: Error: Can't resolve 'process/browser'

@Exegesis 确保在安装依赖项时重新启动服务器。我也做了yarn add -D process。对你来说npm i --save-dev process 应该可以工作。好老的rm -rf node_modules package-lock.json && npm i也应该一直尝试

谢谢！ ProvidePlugin 运行良好。