Webpack 5 - Неперехваченная ошибка ссылки: процесс не определен

ProgramBox

Webpack 5 — Неперехваченная ошибка ссылки: процесс не определен

Post author:admin
Запись опубликована:20 августа, 2022
Post category:Вопросы по программированию

#javascript #node.js #reactjs #webpack

Вопрос:

Новичок в Webpack здесь, в командной строке webpack мне сказали, что мне нужно предоставить псевдоним для 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 полинаполнители удаляются. В документах по миграции упоминается, что

Старайтесь по возможности использовать интерфейсно-совместимые модули.
Можно вручную добавить полифилл для node.js основной модуль. Сообщение об ошибке даст подсказку о том, как этого добиться.
Авторы пакета: Используйте поле браузера в package.json, чтобы сделать интерфейс пакета совместимым. Предоставьте альтернативные реализации / зависимости для браузера.

См. Эту проблему.

Теперь вы можете обратиться к этому PR и проверить библиотеки, которые были удалены, и установить их. Затем добавьте псевдоним для библиотеки в конфигурацию вашего webpack.

Например

 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',
      }),
  ],
}

1. установил процесс и попробовал это, но пока безуспешно. Также пытался fallback: { ..., process: require.resolve('process')...} и alias: { process: 'process' }

2. Спасибо. webpack.ProvidePlugin работает

3. Я npm install process с ProvidePlugin , но возвращаюсь Module not found: Error: Can't resolve 'process/browser'

4. @Exegesis убедитесь, что вы перезапустили сервер при установке зависимостей. Также я сделал yarn add -D process . Для вас npm i --save-dev process должно работать. rm -rf node_modules package-lock.json amp;amp; npm i Всегда следует пробовать старое доброе

5. Спасибо! ProvidePlugin Работает хорошо.

Ответ №2:

npm i process это было все, что мне было нужно.

1. Возможно, это сработало для вас, но есть ли у вас основания полагать, что для решения проблемы OP достаточно просто установить этот пакет?

2. ОП сказал, что crypto-browserify пытается получить доступ process.browser , поэтому он, возможно, не установил process пакет. Кроме этого, ничего. Мы также должны принять во внимание, что людям с подобной проблемой укажут на этот вопрос, так что этот ответ также может помочь им.

Ответ №3:

У меня возникла эта проблема для HtmlWebpackPlugin, я добавил параметр templateParameters в HtmlWebpackPlugin, и это было исправлено для меня:

 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,
    }),

Ответ №4:

Надеюсь, предложенное мной исправление будет принято и выпущено в ближайшее время

Метки: Webpack 5 — Неперехваченная ошибка ссылки: процесс не определен