title: Migrating to webpack 5 : Cannot read property 'prototype' of undefined
body: <p>I have been on this bug for several days and nothing that has been written about on the internet helped me.</p>
  <p>It occured after I migrated to webpack5 from version 4.</p>
  <p>Here is the error:
  <a href="https://i.stack.imgur.com/T8K13.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/T8K13.png" alt="enter image description here" /></a></p>
  <p>here is where it occurs precisely:</p>
  <pre><code>
       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 :
  
  </code></pre>
  <pre><code>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, {
  </code></pre>
  <p>So the problem is supposed to be the require stream. But I installed it already.</p>
  <p>Here is my package.json:</p>
  <pre><code>
           {
    
          &quot;start:dev&quot;: &quot;webpack serve&quot;,
         
        },
        &quot;engines&quot;: {
          &quot;node&quot;: &quot;14.17.1&quot;
        },
       
        &quot;keywords&quot;: [
       
  
        &quot;dependencies&quot;: {
  
          &quot;axios&quot;: &quot;^0.19.2&quot;,
          &quot;base64-js&quot;: &quot;^1.5.1&quot;,
          &quot;browserify-zlib&quot;: &quot;^0.2.0&quot;,
          &quot;chart.js&quot;: &quot;^2.7.1&quot;,
          &quot;clipboard&quot;: &quot;^1.6.1&quot;,
          &quot;compression&quot;: &quot;^1.6.2&quot;,
          &quot;compression-webpack-plugin&quot;: &quot;^8.0.1&quot;,
          &quot;core-js&quot;: &quot;^3.15.1&quot;,
          &quot;dotenv-webpack&quot;: &quot;^7.0.3&quot;,
          &quot;es6-promise&quot;: &quot;^4.0.5&quot;,
          &quot;exceljs&quot;: &quot;^1.15.0&quot;,
          &quot;express&quot;: &quot;^4.14.0&quot;,
          &quot;file-saver&quot;: &quot;^2.0.1&quot;,
          &quot;firebase&quot;: &quot;^8.6.8&quot;,
          &quot;fs&quot;: &quot;0.0.1-security&quot;,
          &quot;gsap&quot;: &quot;^1.19.1&quot;,
          &quot;helmet&quot;: &quot;^3.4.0&quot;,
          &quot;if-env&quot;: &quot;^1.0.0&quot;,
          &quot;ipaddr.js&quot;: &quot;^1.9.1&quot;,
          &quot;isomorphic-fetch&quot;: &quot;^2.2.1&quot;,
          &quot;jspdf&quot;: &quot;^2.3.1&quot;,
          &quot;jspdf-autotable&quot;: &quot;^3.5.14&quot;,
          &quot;lodash.at&quot;: &quot;^4.6.0&quot;,
          &quot;marked&quot;: &quot;^0.3.6&quot;,
          &quot;moment&quot;: &quot;^2.15.1&quot;,
          &quot;moment-timezone&quot;: &quot;^0.5.25&quot;,
          &quot;promise-polyfill&quot;: &quot;^6.0.2&quot;,
          &quot;prop-types&quot;: &quot;^15.7.2&quot;,
          &quot;react&quot;: &quot;^15.6.0&quot;,
          &quot;react-chartjs-2&quot;: &quot;^2.6.4&quot;,
          &quot;react-datepicker&quot;: &quot;^0.55.0&quot;,
          &quot;react-dom&quot;: &quot;^15.6.0&quot;,
          &quot;react-popper&quot;: &quot;^1.0.0-beta.6&quot;,
          &quot;react-redux&quot;: &quot;^5.0.1&quot;,
          &quot;react-router&quot;: &quot;^3.0.0&quot;,
          &quot;readable-stream&quot;: &quot;^2.0.2&quot;,
          &quot;redux&quot;: &quot;^3.5.2&quot;,
          &quot;redux-logger&quot;: &quot;^2.0.0&quot;,
          &quot;redux-thunk&quot;: &quot;^2.1.0&quot;,
          &quot;sockjs-client&quot;: &quot;^1.1.4&quot;,
          &quot;stream&quot;: &quot;0`enter code here`.0.2&quot;,
          &quot;string.prototype.endswith&quot;: &quot;^0.2.0&quot;,
          &quot;string.prototype.startswith&quot;: &quot;^0.2.0&quot;,
          &quot;tapable&quot;: &quot;1.0.0-beta.5&quot;,
          &quot;tslib&quot;: &quot;^2.3.0&quot;,
          &quot;ua-parser-js&quot;: &quot;^0.7.12&quot;,
          &quot;webfontloader&quot;: &quot;^1.6.27&quot;,
          &quot;whatwg-fetch&quot;: &quot;^3.6.2&quot;
        },
        &quot;devDependencies&quot;: {
          &quot;@babel/cli&quot;: &quot;^7.6.0&quot;,
          &quot;@babel/core&quot;: &quot;^7.6.0&quot;,
          &quot;@babel/node&quot;: &quot;^7.6.1&quot;,
          &quot;@babel/plugin-proposal-class-properties&quot;: &quot;^7.13.0&quot;,
          &quot;@babel/plugin-proposal-nullish-coalescing-operator&quot;: &quot;^7.8.3&quot;,
          &quot;@babel/plugin-proposal-object-rest-spread&quot;: &quot;^7.5.5&quot;,
          &quot;@babel/plugin-proposal-optional-chaining&quot;: &quot;^7.9.0&quot;,
          &quot;@babel/polyfill&quot;: &quot;^7.12.1&quot;,
          &quot;@babel/preset-env&quot;: &quot;^7.6.0&quot;,
          &quot;@babel/preset-react&quot;: &quot;^7.0.0&quot;,
          &quot;@babel/register&quot;: &quot;^7.11.5&quot;,
          &quot;app-require&quot;: &quot;^0.1.1&quot;,
          &quot;autoprefixer&quot;: &quot;^10.2.6&quot;,
          &quot;babel-eslint&quot;: &quot;^8.2.6&quot;,
          &quot;babel-jest&quot;: &quot;^24.9.0&quot;,
          &quot;babel-loader&quot;: &quot;^8.0.6&quot;,
          &quot;babel-polyfill&quot;: &quot;^6.26.0&quot;,
          &quot;buffer&quot;: &quot;^6.0.3&quot;,
          &quot;chai&quot;: &quot;^4.2.0&quot;,
          &quot;classnames&quot;: &quot;^2.2.5&quot;,
          &quot;copy-webpack-plugin&quot;: &quot;^9.0.0&quot;,
          &quot;crypto-browserify&quot;: &quot;^3.12.0&quot;,
          &quot;css-loader&quot;: &quot;^5.2.6&quot;,
          &quot;dotenv&quot;: &quot;^4.0.0&quot;,
          &quot;eslint&quot;: &quot;^5.16.0&quot;,
          &quot;eslint-config-prettier&quot;: &quot;^6.3.0&quot;,
          &quot;eslint-plugin-prettier&quot;: &quot;^3.1.1&quot;,
          &quot;eslint-plugin-react&quot;: &quot;^7.16.0&quot;,
          &quot;file-loader&quot;: &quot;^6.2.0&quot;,
          &quot;firebase-admin&quot;: &quot;^9.10.0&quot;,
          &quot;forever&quot;: &quot;^0.15.3&quot;,
          &quot;html-webpack-plugin&quot;: &quot;^5.3.2&quot;,
          &quot;jest&quot;: &quot;^24.9.0&quot;,
          &quot;loglevel&quot;: &quot;^1.6.4&quot;,
          &quot;mini-css-extract-plugin&quot;: &quot;^1.6.0&quot;,
          &quot;mocha&quot;: &quot;^6.2.0&quot;,
          &quot;node-sass&quot;: &quot;^4.14.1&quot;,
          &quot;normalize.css&quot;: &quot;^7.0.0&quot;,
          &quot;postcss-loader&quot;: &quot;^3.0.0&quot;,
          &quot;prettier&quot;: &quot;^1.18.2&quot;,
          &quot;raw-loader&quot;: &quot;^0.5.1&quot;,
          &quot;react-hot-loader&quot;: &quot;^4.13.0&quot;,
          &quot;redux-devtools&quot;: &quot;^3.3.1&quot;,
          &quot;resolve-url-loader&quot;: &quot;^4.0.0&quot;,
          &quot;sass-loader&quot;: &quot;^12.1.0&quot;,
          &quot;style-loader&quot;: &quot;^2.0.0&quot;,
          &quot;terser-webpack-plugin&quot;: &quot;^5.1.3&quot;,
          &quot;url-loader&quot;: &quot;^4.1.1&quot;,
          &quot;util&quot;: &quot;^0.12.4&quot;,
          &quot;webpack&quot;: &quot;^5.40.0&quot;,
          &quot;webpack-bundle-analyzer&quot;: &quot;^4.4.2&quot;,
          &quot;webpack-cli&quot;: &quot;^4.7.2&quot;,
          &quot;webpack-dev-server&quot;: &quot;^3.11.2&quot;
        }
      }
      ```
  
  And here is my webpack config:
  
  ```.
  
          const webpack = require('webpack');
      const path = require(&quot;path&quot;);
      
      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 || &quot;development&quot;
      const simulateProd = process.env.SIMULATE_PROD
      const isProdEnv = nodeEnv === 'production'
      const isNotDevEnv = nodeEnv !== &quot;development&quot;
      
      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
            &quot;style-loader&quot;,
            // Translates CSS into CommonJS
            {
              loader: 'css-loader',
              options: {
                url : false
              }
            },
            // Compiles Sass to CSS
            &quot;sass-loader&quot;,
          ],
        },
        {
          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: &quot;bundle.js&quot;,
        },
        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: {
            &quot;buffer&quot;: false,
            &quot;fs&quot;: false,
            &quot;os&quot;: false,
            &quot;path&quot;: false,
            &quot;zlib&quot;: false,
            &quot;stream&quot;: false,
            &quot;crypto&quot;: false,
      
          } ,
        },
        plugins,
        optimization : {
          moduleIds: 'named',
        },
        devServer: {
          contentBase: isNotDevEnv ? buildPath : sourcePath,
          historyApiFallback: true,
          port: 8080,
          compress: isNotDevEnv,
          inline: !isNotDevEnv,
          hot: !isNotDevEnv,
          host: &quot;localhost&quot;,
          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',
            },
          },
        },
      };    
  
  </code></pre>
  <p>I tried a lot of things with the fallbacks but without succes. Of course that I removed package.lock and node-modules and then installed but same thing. I also installed excel-js again.</p>
  <p>I am waiting for a miracle now! Thanks</p>