title: Runtime error appeared after updating to webpack 5. TypeError: Cannot read properties of undefined (reading 'default')
body: <p>After upgrading my webpack from v4 to v5, I got this error that is getting me a hard time debugging.</p>
  <pre><code>Uncaught TypeError: Cannot read properties of undefined (reading 'default')
      at Module.UserEntity (main.9e5d0727.js:3998)
      at Module.&lt;anonymous&gt; (main.9e5d0727.js:5952)
      at __webpack_require__ (runtime-main.9e5d0727.js:28)
      at fn (runtime-main.9e5d0727.js:308)
      at Module.&lt;anonymous&gt; (main.9e5d0727.js:5645)
      at __webpack_require__ (runtime-main.9e5d0727.js:28)
      at fn (runtime-main.9e5d0727.js:308)
      at Module.&lt;anonymous&gt; (main.9e5d0727.js:4022)
      at __webpack_require__ (runtime-main.9e5d0727.js:28)
      at fn (runtime-main.9e5d0727.js:308)
  </code></pre>
  <p>I compared my Sources tab between v4 and v5 webpack versions and I saw a difference in files that are generating using this command <code>cross-env NODE_ENV=local webpack serve --config ./config/webpack.config.js --progress --color</code></p>
  <p><a href="https://i.stack.imgur.com/W9udc.png" rel="nofollow noreferrer">Webpack v4</a> <a href="https://i.stack.imgur.com/FHbGh.png" rel="nofollow noreferrer">Webpack v5</a></p>
  <p>Here is my current <em>webpack.config.js</em></p>
  <pre><code>const path = require('path');
  const process = require('process');
  const NODE_ENV = process.env.NODE_ENV;
  
  const BundleAnalyzerPlugin = require('webpack-bundle-analyzer').BundleAnalyzerPlugin;
  const CopyWebpackPlugin = require('copy-webpack-plugin');
  const HtmlWebpackPlugin = require('html-webpack-plugin');
  const RemoveWebpackPlugin = require('remove-webpack-plugin');
  const TerserPlugin = require('terser-webpack-plugin');
  
  const styledComponentsTransformer = require('typescript-plugin-styled-components').default;
  const webpack = require('webpack');
  
  const configLocal = require(`./environments/env.local.js`);
  const configCommon = require(`./environments/env.common.js`);
  
  const rootPath = process.cwd();
  const resolvePath = path.resolve.bind(rootPath);
  
  const production = ['prod', 'production', 'master'].includes(NODE_ENV) ? 'production' : undefined;
  const stage = ['staging', 'stage'].includes(NODE_ENV) ? 'staging' : undefined;
  const development = ['development', 'dev'].includes(NODE_ENV) ? 'development' : undefined;
  const local = 'local';
  const ENVIRONMENT = production || stage || development || local;
  
  const STAFF_OAUTH = process.env.STAFF_OAUTH || configLocal.STAFF_OAUTH;
  const BACKEND_URL = process.env.BACKEND_URL ? `&quot;${process.env.BACKEND_URL}&quot;` : configLocal.BACKEND_URL;
  
  const environment = {
    ...configCommon,
    ENVIRONMENT: `&quot;${ENVIRONMENT}&quot;`,
    SENTRY_URL: process.env.SENTRY_URL ? `&quot;${process.env.SENTRY_URL}&quot;` : undefined,
    BACKEND_URL,
    STAFF_OAUTH,
    SC_DISABLE_SPEEDY: true
  };
  
  const entryPoint = './src/index.tsx';
  
  const config = {
    mode: production || stage ? 'production' : ENVIRONMENT === local ? 'none' : 'development',
    entry: production ? [entryPoint, require.resolve('./ym')] : entryPoint,
  
    output: {
      path: path.resolve(__dirname, '..', 'build'),
      filename: 'static/js/[name].[fullhash:8].js',
      chunkFilename: 'static/js/[name].[chunkhash:8].js',
      publicPath: '/'
    },
  
    resolve: {
      extensions: ['.tsx', '.ts', '.js', '.jsx'],
      modules: ['node_modules', resolvePath('src')],
      fallback: { fs: false }
    },
  
    module: {
      rules: [
        {
          test: /\.tsx?$/,
          include: resolvePath('src'),
          exclude: /node_modules/,
          use: [
            'thread-loader',
            {
              loader: 'ts-loader',
              options: {
                getCustomTransformers: () =&gt; ({
                  before: [styledComponentsTransformer()]
                }),
                happyPackMode: true,
                transpileOnly: true
              }
            }
          ]
        },
        {
          test: /\.raw\.svg$/,
          use: [
            {
              loader: 'raw-loader',
              options: {
                esModule: false
              }
            }
          ]
        },
        {
          test: /\.(png|svg|jpg|gif)$/,
          exclude: /\.raw\.svg$/,
          loader: 'url-loader',
          options: {
            esModule: false,
            limit: 10000,
            name: 'static/media/[name].[contenthash].[ext]'
          }
        },
        {
          test: /\.css$/,
          use: [
            'style-loader',
            {
              loader: 'css-loader',
              options: {
                importLoaders: 1
              }
            }
          ]
        }
      ]
    },
  
    optimization: {
      minimize: !!(production || stage),
      minimizer: [new TerserPlugin()],
      runtimeChunk: {
        name: entrypoint =&gt; `runtime-${entrypoint.name}`
      },
      splitChunks: {
        cacheGroups: {
          vendor: {
            test: /[\\/]node_modules[\\/]/,
            name: 'vendors',
            chunks: 'all'
          }
        }
      }
    },
  
    ignoreWarnings: [/export .* was not found in/],
  
    plugins: [
      // fix &quot;process is not defined&quot; error
      new webpack.ProvidePlugin({
        process: 'process/browser'
      }),
      new CopyWebpackPlugin({
        patterns: [
          {
            from: path.resolve(__dirname, '..', 'public'),
            to: path.resolve(__dirname, '..', 'build')
          }
        ]
      }),
      new HtmlWebpackPlugin({ template: 'src/index.html' }),
      new webpack.DefinePlugin(environment),
      new RemoveWebpackPlugin([path.resolve(__dirname, '..', 'build'), path.resolve(__dirname, '..', '.cache')], 'hide')
    ],
  
    devServer: {
      static: path.resolve(__dirname, '..'),
      hot: true,
      port: 3000,
      host: 'localhost',
      historyApiFallback: true
      // watchOptions: {
      //   ignored: resolvePath('cypress')
      // }
    },
  
    performance: {
      hints: false
    }
  };
  
  if (ENVIRONMENT === development || ENVIRONMENT === local) {
    config.devtool = 'source-map';
  }
  
  if (ENVIRONMENT === local) {
    const ForkTsCheckerWebpackPlugin = require('fork-ts-checker-webpack-plugin');
  
    config.plugins.push(
      new ForkTsCheckerWebpackPlugin({
        eslint: {
          files: './src/**/*.{ts,tsx,js,jsx}'
        },
        typescript: {
          diagnosticOptions: {
            semantic: true,
            syntactic: true
          }
        }
      })
    );
  } else {
    const WorkboxPlugin = require('workbox-webpack-plugin');
  
    config.plugins.push(
      new WorkboxPlugin.GenerateSW({
        clientsClaim: true,
        skipWaiting: false,
        mode: production || stage ? 'production' : undefined,
        exclude: [/\.map$/, /asset-manifest\.json$/, /LICENSE/]
      })
    );
  }
  
  module.exports = config;
  </code></pre>
  <p>And my <em>package.json</em> file</p>
  <pre><code>{
    &quot;name&quot;: &quot;dispatcher-service-front&quot;,
    &quot;version&quot;: &quot;1.27.0&quot;,
    &quot;license&quot;: &quot;UNLICENSED&quot;,
    &quot;scripts&quot;: {
      &quot;cypress:open&quot;: &quot;cypress open&quot;,
      &quot;start&quot;: &quot;cross-env NODE_ENV=local webpack serve --config ./config/webpack.config.js --progress --color&quot;,
      &quot;start:ci&quot;: &quot;webpack serve --config ./config/webpack.config.js&quot;,
      &quot;build&quot;: &quot;webpack --config ./config/webpack.config.js&quot;,
      &quot;analyze&quot;: &quot;webpack --profile --json &gt; stats.json &amp;&amp; webpack-bundle-analyzer stats.json&quot;
    },
    &quot;husky&quot;: {
      &quot;hooks&quot;: {
        &quot;pre-commit&quot;: &quot;lint-staged&quot;
      }
    },
    &quot;lint-staged&quot;: {
      &quot;*.{ts,tsx}&quot;: &quot;eslint -c .eslintrc.staged.js&quot;
    },
    &quot;dependencies&quot;: {
      &quot;@types/node&quot;: &quot;^16.0.0&quot;,
      &quot;@types/react&quot;: &quot;^16.14.1&quot;,
      &quot;@types/react-dom&quot;: &quot;^16.9.13&quot;,
      &quot;@types/react-infinite-scroller&quot;: &quot;^1.2.1&quot;,
      &quot;@types/react-router-dom&quot;: &quot;^5.1.5&quot;,
      &quot;@types/uuid&quot;: &quot;^8.3.1&quot;,
      &quot;computed-async-mobx&quot;: &quot;^6.1.0&quot;,
      &quot;dayjs&quot;: &quot;^1.10.6&quot;,
      &quot;mobx&quot;: &quot;^5.15.4&quot;,
      &quot;mobx-react&quot;: &quot;^6.2.2&quot;,
      &quot;mobx-utils&quot;: &quot;^5.5.7&quot;,
      &quot;pik-front-utils&quot;: &quot;git+https://gitlab+deploy-token-9:p1C2k__vanbHWx_ntuM_@git.pik.ru/pik-software/pik-front-utils.git#semver:1.0.3&quot;,
      &quot;pik-ui-kit&quot;: &quot;git+https://gitlab+deploy-token-8:gqgws4edpujq2MyATRR7@git.pik.ru/pik-software/pik-ui-kit.git#semver:1.10.3&quot;,
      &quot;process&quot;: &quot;^0.11.10&quot;,
      &quot;react&quot;: &quot;^16.14.0&quot;,
      &quot;react-dom&quot;: &quot;^16.14.0&quot;,
      &quot;react-infinite-scroller&quot;: &quot;^1.2.4&quot;,
      &quot;react-is&quot;: &quot;^17.0.2&quot;,
      &quot;react-router-dom&quot;: &quot;^5.2.0&quot;,
      &quot;reflect-metadata&quot;: &quot;^0.1.13&quot;,
      &quot;sanitize.css&quot;: &quot;^12.0.1&quot;,
      &quot;serializr&quot;: &quot;^2.0.5&quot;,
      &quot;styled-components&quot;: &quot;^5.2.1&quot;,
      &quot;typescript&quot;: &quot;^4.3.0&quot;,
      &quot;typescript-ioc&quot;: &quot;^3.2.2&quot;,
      &quot;uuid&quot;: &quot;^8.3.2&quot;
    },
    &quot;devDependencies&quot;: {
      &quot;@types/styled-components&quot;: &quot;^5.1.11&quot;,
      &quot;@typescript-eslint/eslint-plugin&quot;: &quot;^4.28.2&quot;,
      &quot;@typescript-eslint/parser&quot;: &quot;^4.28.2&quot;,
      &quot;copy-webpack-plugin&quot;: &quot;^9.1.0&quot;,
      &quot;cross-env&quot;: &quot;^7.0.2&quot;,
      &quot;css-loader&quot;: &quot;^6.5.1&quot;,
      &quot;cypress&quot;: &quot;^8.6.0&quot;,
      &quot;cypress-file-upload&quot;: &quot;^5.0.8&quot;,
      &quot;eslint&quot;: &quot;^7.30.0&quot;,
      &quot;eslint-plugin-cypress&quot;: &quot;^2.11.3&quot;,
      &quot;eslint-plugin-import&quot;: &quot;^2.23.4&quot;,
      &quot;eslint-plugin-jsdoc&quot;: &quot;^35.4.1&quot;,
      &quot;eslint-plugin-prefer-arrow&quot;: &quot;^1.2.3&quot;,
      &quot;eslint-plugin-react&quot;: &quot;^7.24.0&quot;,
      &quot;eslint-plugin-react-hooks&quot;: &quot;^4.2.0&quot;,
      &quot;file-loader&quot;: &quot;^6.2.0&quot;,
      &quot;fork-ts-checker-webpack-plugin&quot;: &quot;^6.4.0&quot;,
      &quot;html-webpack-plugin&quot;: &quot;^5.5.0&quot;,
      &quot;husky&quot;: &quot;^4.3.8&quot;,
      &quot;lint-staged&quot;: &quot;^11.0.0&quot;,
      &quot;raw-loader&quot;: &quot;^4.0.2&quot;,
      &quot;remove-webpack-plugin&quot;: &quot;^1.2.2&quot;,
      &quot;style-loader&quot;: &quot;^3.3.1&quot;,
      &quot;terser-webpack-plugin&quot;: &quot;^5.2.5&quot;,
      &quot;thread-loader&quot;: &quot;^3.0.4&quot;,
      &quot;ts-loader&quot;: &quot;^9.2.6&quot;,
      &quot;typescript-plugin-styled-components&quot;: &quot;^2.0.0&quot;,
      &quot;url-loader&quot;: &quot;^4.1.1&quot;,
      &quot;webpack&quot;: &quot;^5.64.0&quot;,
      &quot;webpack-bundle-analyzer&quot;: &quot;^4.5.0&quot;,
      &quot;webpack-cli&quot;: &quot;^4.9.1&quot;,
      &quot;webpack-dev-server&quot;: &quot;^4.5.0&quot;,
      &quot;workbox-webpack-plugin&quot;: &quot;^6.4.1&quot;
    }
  }
  </code></pre>
  <p>My file structure looks like <a href="https://i.stack.imgur.com/N2PK4.png" rel="nofollow noreferrer">this</a></p>
  <p>I changed a few things according to <a href="https://webpack.js.org/migrate/5/" rel="nofollow noreferrer">webpack 5 migration guide</a></p>
  <ol>
  <li><p>In <strong>config.output.filename</strong> i changed
  <code>'static/js/[name].[hash:8].js'</code> =&gt; <code>'static/js/[name].[fullhash:8].js'</code></p>
  </li>
  <li><p>Removed <code>node: { fs: 'empty' }</code> and added <code>fallback: { fs: false }</code> in <strong>config.output.resolve</strong></p>
  </li>
  <li><p><strong>stats.warningFilter</strong> renamed to <strong>ignoreWarnings</strong></p>
  </li>
  <li><p>Added this plugin to fix <em>&quot;process is not defined&quot;</em> error</p>
  <pre><code> new webpack.ProvidePlugin({
     process: 'process/browser'
   }),
  </code></pre>
  </li>
  <li><p>Redirected <strong>index.html</strong> file from <em>public</em> to <em>src</em> folder and changed a corresponding template in <code>HtmlWebpackPlugin</code>. I did that because there was a conflict on this file between <code>CopyWebpackPlugin</code> and <code>HtmlWebpackPlugin</code></p>
  </li>
  <li><p><strong>devServer.contentBase</strong> renamed to <strong>devServer.static</strong></p>
  </li>
  <li><p>Commented <strong>devServer.watchOptions</strong> for now, because <code>watchOptions</code> key is no longer available</p>
  </li>
  <li><p>Removed two plugins <code>new webpack.HotModuleReplacementPlugin()</code> and <code>new HardSourceWebpackPlugin({ cacheDirectory: path.resolve(__dirname, '..', '.cache')</code></p>
  </li>
  </ol>
  <p>That's it. Also, I compared how do files build between v4 and v5 versions using <code>webpack --config ./config/webpack.config.js</code> and there was no difference at all! Except in <em>index.html</em> file script tag were moved to <code>&lt;head&gt;</code></p>
  <p>Thanks for taking your time reading this, I will appreciate any help!</p>