2

I am developing a web application using Node.js, Express & Webpack. Everything was going well until Webpack was upgraded to Webpack 5 and lots of bugs appeared. I have managed to solve all the errors but there is a warning I can't solve. I have seen this post but it's related to Angular so I don't think it helps me much: Critical dependency: require function is used in a way in which dependencies cannot be statically extracted

WARNING in ./node_modules/terser-webpack-plugin/dist/minify.js
Critical dependency: require function is used in a way in which dependencies cannot be statically extracted

This is my webpack.config.js; resolve fields and node-polyfill-webpack-plugin are used to solve Webpack 5 bugs and errors.

    const path = require("path")
    const NodePolyfillPlugin = require("node-polyfill-webpack-plugin")
    const webpack = require('webpack')
    const HtmlWebPackPlugin = require("html-webpack-plugin")
    module.exports = {
      resolve:{
        fallback: {
        "fs": false,
        "path": false,
        "worker_threads":false,
        "child_process":false,
        "http": false,
        "https": false,
        "stream": false,
        "crypto": false,  
        }
      },
      entry: {
        main: './src/js/main.js',
        index:'./src/js/'
      },
      output: {
        path: path.join(__dirname, 'dist'),
        //publicPath: '/',
        filename: '[name].js'
      },
      mode:"development",
      target: 'web',
      devtool: 'source-map',
      module: {
        rules: [
          {
            test: /\.(png|jp(e*)g|svg)$/,  
            use: [{
                loader: 'url-loader',
                options: { 
                    limit: 8000, // Convert images < 8kb to base64 strings
                    name: 'images/[hash]-[name].[ext]'
                } 
            }]
          },
          {
            test: /\.js$/,
            exclude: /node_modules/,
            loader: "babel-loader",
          },
          {
            test: /\.bpmn$/,
            use: 'raw-loader'
          },
          {
            // Loads the javacript into html template provided.
            // Entry point is set below in HtmlWebPackPlugin in Plugins 
            test: /\.html$/,
            use: [
              {
                loader: "html-loader",
                //options: { minimize: true }
              }
            ]
          },
          {
            test: /\.css$/,
            use: [ 'style-loader', 'css-loader' ]
          }
        ]
      },
      plugins: [
        new HtmlWebPackPlugin({
          template: '!!raw-loader!./src/views/pages/index.ejs',
          filename: "./index.ejs",
          excludeChunks: [ 'server', 'main' ]
        }),
        new HtmlWebPackPlugin({
          template: '!!raw-loader!./src/views/pages/bmv.ejs',
          filename: "./bmv.ejs",
          excludeChunks: [ 'server', 'index' ]
        }),
        new webpack.NoEmitOnErrorsPlugin(),
        new NodePolyfillPlugin()
      ]
    }
jonrsharpe
  • 115,751
  • 26
  • 228
  • 437

1 Answers1

0

configure the webpack:

const path = require('path');

module.exports = {
  //...
  resolve: {
    alias: {
      'terser-webpack-plugin': path.resolve(__dirname, 'node_modules/terser-webpack-plugin/dist/minify.js'),
    },
  },
};
Yilmaz
  • 35,338
  • 10
  • 157
  • 202