Webpack5: Promise rejection: Could not extract assets

After upgrading to webpack 5, got the error:

λ npm run build

> hrketing.portal@1.6.3 build C:\Projects\topcase\hrketing\src\Web\WebSPA
> cross-env NODE_OPTIONS="--trace-deprecation" webpack --progress --mode production

10% building(node:4352) [DEP_WEBPACK_COMPILATION_NORMAL_MODULE_LOADER_HOOK] DeprecationWarning: Compilation.hooks.normalModuleLoader was moved to NormalModule.getCompilationHooks(compilation).loader
    at getNormalModuleLoader (C:\Projects\topcase\hrketing\src\Web\WebSPA\node_modules\webpack\lib\Compilation.js:297:39)
    at Object.get normalModuleLoader [as normalModuleLoader] (C:\Projects\topcase\hrketing\src\Web\WebSPA\node_modules\webpack\lib\Compilation.js:603:12)
    at C:\Projects\topcase\hrketing\src\Web\WebSPA\node_modules\webpack-manifest-plugin\lib\plugin.js:246:23
    at _next35 (eval at create (C:\Projects\topcase\hrketing\src\Web\WebSPA\node_modules\webpack\node_modules\tapable\lib\HookCodeFactory.js:19:10), <anonymous>:95:1)
    at _next13 (eval at create (C:\Projects\topcase\hrketing\src\Web\WebSPA\node_modules\webpack\node_modules\tapable\lib\HookCodeFactory.js:19:10), <anonymous>:187:1)
    at Hook.eval (eval at create (C:\Projects\topcase\hrketing\src\Web\WebSPA\node_modules\webpack\node_modules\tapable\lib\HookCodeFactory.js:19:10), <anonymous>:245:1)
    at Hook.CALL_DELEGATE [as _call] (C:\Projects\topcase\hrketing\src\Web\WebSPA\node_modules\webpack\node_modules\tapable\lib\Hook.js:14:14)
    at Compiler.newCompilation (C:\Projects\topcase\hrketing\src\Web\WebSPA\node_modules\webpack\lib\Compiler.js:943:26)
    at C:\Projects\topcase\hrketing\src\Web\WebSPA\node_modules\webpack\lib\Compiler.js:984:29
    at Hook.eval [as callAsync] (eval at create (C:\Projects\topcase\hrketing\src\Web\WebSPA\node_modules\webpack\node_modules\tapable\lib\HookCodeFactory.js:33:10), <anonymous>:20:1)
10% building 0/2 entries 2/2 dependencies 0/2 modules[webpack-cli] Promise rejection: Could not extract assets

Config:

/* eslint-env node */
/* eslint-disable import/first */

require('@babel/register')({
  presets: ['@babel/preset-env']
});

import path from 'path';
import dotenv from 'dotenv';
import webpack from 'webpack';

// import DotenvWebpackPlugin from 'dotenv-webpack';

import CircularDependencyPlugin from 'circular-dependency-plugin';
import { CleanWebpackPlugin } from 'clean-webpack-plugin';
import HtmlWebPackPlugin from 'html-webpack-plugin';
import FaviconsWebpackPlugin from 'favicons-webpack-plugin';
import FriendlyErrorsWebpackPlugin from 'friendly-errors-webpack-plugin';
import { WindowsBalloon } from 'node-notifier';
import UnusedWebpackPlugin from 'unused-webpack-plugin';
import ESLintPlugin from 'eslint-webpack-plugin';
import ManifestPlugin from 'webpack-manifest-plugin';

// import { BundleStatsWebpackPlugin } from 'bundle-stats-webpack-plugin';
// import { StatsWriterPlugin } from 'webpack-stats-plugin';


// import glob from 'glob';
// import ExtractCssChunks from 'extract-css-chunks-webpack-plugin';
// import OptimizeCssAssetsPlugin from 'optimize-css-assets-webpack-plugin';
// import PurgecssPlugin from 'purgecss-webpack-plugin';
// import SpeedMeasurePlugin from 'speed-measure-webpack-plugin';

import { getWebpackDevServerOptions } from './configs';

// const isDev = process.env.NODE_ENV !== 'production';

const PATHS = {
  src: path.resolve(__dirname, 'src'),
  images: path.resolve(__dirname, 'src/assets/images'),
  fonts: path.resolve(__dirname, 'src/assets/fonts'),
  pdfs: path.resolve(__dirname, 'src/assets/pdf')
};

const styleLoader = {
  loader: 'style-loader',
  options: {
    insert: 'head',
    injectType: 'singletonStyleTag'
  }
};

// TODO: ExtractCssChunks
// const extractCssChunksLoader = {
//   loader: ExtractCssChunks.loader,
//   options: {
//     hmr: isDev
//   }
// };

// const moduleExtractCssChunksLoader = {
//   loader: ExtractCssChunks.loader,
//   options: {
//     // esModule: true
//     ...extractCssChunksLoader.options,
//   }
// };


const imageChunkMaxSize = 20;
const cssLoader = {
  loader: 'css-loader',
  options: {
    sourceMap: true
  }
};

const moduleCssLoader = {
  loader: 'css-loader',
  options: {

    // esModule: true,
    ...cssLoader.options,
    modules: true,
    importLoaders: 1
  }
};

const config = {
  mode: 'development',
  devtool: 'source-map',
  entry: {
    main: `${PATHS.src}/index.js`,
    icons: `${PATHS.src}/components/iconControls.js`
  },
  output: {
    // TODO: temp for clean webpack plugin and webpack 5
    // https://github.com/johnagan/clean-webpack-plugin/issues/189
    path: path.resolve(__dirname, 'dist'),
    filename: '[name].[contenthash:8].js',
    chunkFilename: '[name].[chunkhash:8].js'
  },
  resolve: {
    mainFields: ['browser', 'main', 'module'],
    alias: {
      'react-dom': '@hot-loader/react-dom'
    }
  },
  module: {
    rules: [{
      test: /\.(js|jsx)$/,
      exclude: /node_modules/,
      use: ['babel-loader', {
        loader: 'stylelint-custom-processor-loader',
        options: {
          emitWarning: true
        }
      }]
    }, {
      test: /\.css$/,
      include: /\.module\.css$/,
      use: [styleLoader, /* moduleExtractCssChunksLoader, */ moduleCssLoader]
    }, {
      test: /\.css$/,
      exclude: /\.module\.css$/,
      use: [styleLoader, /* extractCssChunksLoader, */ cssLoader]
    }, {
      test: /\.(svg|eot|ttf|otf|woff|woff2)$/,
      include: PATHS.fonts,
      type: 'asset/resource',
      generator: { filename: 'assets/fonts/[name][ext]' }
    }, {
      test: /\.pdf$/,
      include: PATHS.pdfs,
      type: 'asset/resource',
      generator: { filename: 'assets/pdf/[name][ext]' }
    }, {
      test: /\.(png|gif|jpg|jpeg)$/,
      include: PATHS.images,
      type: 'asset',
      parser: { dataUrlCondition: { maxSize: imageChunkMaxSize * 1024 } },
      generator: { filename: 'assets/images/[name][ext]' }
    }, {
      test: /\.txt$/,
      type: 'asset/source'
    }, {
      test: /\.svg$/,
      include: PATHS.images,
      use: 'svg-react-loader'
    }]
  },
  optimization: {
    runtimeChunk: {
      name: 'manifest'
    },
    splitChunks: {
      cacheGroups: {
        defaultVendors: {
          test: /[\\/]node_modules[\\/]/,
          name: 'vendors',
          chunks: 'all'
        }

        // TODO: ExtractCssChunks
        // styles: {
        //   test: /\.css$/,
        //   name: 'styles',
        //   chunks: 'all',
        //   enforce: true
        // }
      }

      // name: true // TODO: move to webpack 5
    }

    // TODO: split node modules
    // splitChunks: {
    //   chunks: 'all',
    //   maxInitialRequests: Infinity,
    //   minSize: 0,
    //   cacheGroups: {
    //     common: {
    //       name: 'common',
    //       minChunks: 2,
    //       chunks: 'all',
    //       reuseExistingChunk: true,
    //       enforce: true,
    //       priority: 10
    //     },
    //     vendors: {
    //       test: /[\\/]node_modules[\\/]/,
    //       name(module) {
    //         const packageName = module.context.match(/[\\/]node_modules[\\/](.*?)([\\/]|$)/)[1];
    //         return `npm.${packageName.replace('@', '_')}`;
    //       },
    //       priority: 20
    //     }
    //   }
    // }

  },
  plugins: [
    new ESLintPlugin(),

    // new webpack.optimize.AggressiveMergingPlugin(),

    // TODO: wait until will be fixed
    // https://github.com/mrsteele/dotenv-webpack/issues/264
    // new DotenvWebpackPlugin({ systemvars: true }),

    new webpack.DefinePlugin({
      'process.env': JSON.stringify(dotenv.config().parsed)
    }),

    new CircularDependencyPlugin({
      failOnError: false,
      exclude: /node_modules/,
      cwd: PATHS.src
    }),

    new CleanWebpackPlugin({ cleanStaleWebpackAssets: false }),
    new HtmlWebPackPlugin({ template: './src/index.html' }),

    new FaviconsWebpackPlugin({
      logo: './src/assets/images/favicon.png',
      favicons: {
        appShortName: 'hrk',
        icons: {
          android: true,
          appleIcon: true,
          appleStartup: true,
          coast: true,
          favicons: true,
          firefox: true,
          windows: true,
          yandex: true
        }
      }
    }),

    // new ExtractCssChunks({
    //   filename: '[name].[contenthash].css',
    //   chunkFilename: '[id].[contenthash].css'
    // }),
    // new PurgecssPlugin({
    //   paths: glob.sync(`${PATHS.src}/**/*`, { nodir: true })
    // }),

    new FriendlyErrorsWebpackPlugin({
      compilationSuccessInfo: {
        messages: ['You application is running here http://localhost:3000'],
        notes: ['Some additionnal notes to be displayed unpon successful compilation']
      },
      onErrors: (severity, errors) => {
        if (severity !== 'error') {
          return;
        }

        const error = errors[0];
        new WindowsBalloon().notify({
          title: 'Webpack compilation error',
          message: `${severity}: ${error.name}`,
          subtitle: error.file || ''
        });
      },

      clearConsole: false
    }),

    new UnusedWebpackPlugin({
      directories: [PATHS.src],
      exclude: [
        '*.spec.js',
        '*.mocks.js',
        'adapters/**/*.js',
        'utils/testUtils.js',
        'assets/images/loaders/**/*.*'
      ]
    }),

    new ManifestPlugin({
      fileName: 'manifest.mappings.js',
      writeToFileEmit: true
    })

    // TODO: migrate to webpack5
    // new BundleStatsWebpackPlugin({ baseline: true }),
    // new StatsWriterPlugin({ stats: { all: true } })
  ]
};

module.exports = env => {
  process.env.BABEL_ENV ||= env;
  if (env && env.cli) {
    global.console.log(`Running cli webpack-dev-server: ${JSON.stringify(env || 'not specified')}`);
    config.devServer = getWebpackDevServerOptions();
    config.devtool = 'cheap-source-map';
  }

  // TODO: try in webpack5, previously was [hash] error
  // const smp = new SpeedMeasurePlugin();
  const smp = null;
  return smp ? smp.wrap(config) : config;
};

package.js:

{
  "name": "hrketing.portal",
  "author": {
    "name": "hrketing",
    "email": "[e-mail]",
    "url": "https://hrketing.ru"
  },
  "description": "hrketing - corporate services for employees",
  "version": "1.6.3",
  "keywords": [
    "hrketing",
    "redux",
    "webpack v5",
    "react v16",
    "react-router v5",
    "react-hot-loader v4"
  ],
  "private": true,
  "license": "ISC",
  "repository": {
    "type": "git",
    "url": "https://gitlab.itopcase.ru/Hrketing/HRketing"
  },
  "bugs": {
    "url": "https://hrk.atlassian.net/browse/PO",
    "url-rmine": "https://rmine.net/projects/dhr-businesstravel/issues"
  },
  "main": "server.js",
  "scripts": {
    "start:server": "node server.js",
    "start:dev": "npm run build:dev && npm run inspect",
    "start": "npm run build && npm run start:server",
    "inspect": "npm run nodemon:base -- --inspect server.js",
    "build": "cross-env NODE_OPTIONS=\"--trace-deprecation\" webpack --progress --mode production",
    "build:dev": "webpack --progress --profile",
    "watch": "npm run nodemon:base -- --exec \"webpack serve --env cli --progress\"",
    "nodemon:base": "nodemon --watch .env --watch .eslintrc.js --watch .stylelintrc --watch .babelrc --watch server.js --watch configs/index.js --watch configs/server.production.js --watch webpack.config.babel.js",
    "webpack:migrate": "webpack migrate webpack.config.babel.js",
    "lock-resolutions": "npx npm-force-resolutions",
    "test": "jest",
    "test:watch": "node --inspect=9999 ./node_modules/jest/bin/jest -i --watch",
    "test:coverage": "jest --coverage --colors",
    "lint:js": "eslint src",
    "lint:css": "stylelint src/**/*.js",
    "lint:all": "npm run lint:js && npm run lint:css",
    "lint:js:fix": "npm run lint:js -- --fix",
    "lint:css:fix": "npm run lint:css -- --fix",
    "lint:all:fix": "npm run lint:js:fix && npm run lint:css:fix",
    "lint:nibble": "eslint-nibble --ext .jsx,.js src",
    "release": "standard-version",
    "release:dry": "npm run release -- --dry-run",
    "release:patch": "npm run release -- --no-verify --release-as patch",
    "release:minor": "npm run release -- --no-verify --release-as minor",
    "release:major": "npm run release -- --no-verify --release-as major",
    "release:patch:alpha": "npm run release -- --no-verify --release-as patch --prerelease alpha",
    "release:minor:alpha": "npm run release -- --no-verify --release-as minor --prerelease alpha",
    "release:major:alpha": "npm run release -- --no-verify --release-as major --prerelease alpha",
    "release:patch:beta": "npm run release -- --no-verify --release-as patch --prerelease beta",
    "release:minor:beta": "npm run release -- --no-verify --release-as minor --prerelease beta",
    "release:major:beta": "npm run release -- --no-verify --release-as major --prerelease beta",
    "analyze:stats": "run-s webpack:stats bundle-analyzer",
    "webpack:stats": "webpack -p --mode production --bail --json > dist/stats.json",
    "bundle-analyzer": "webpack-bundle-analyzer dist/stats.json",
    "ncu": "ncu",
    "packages:list": "npm outdated & ncu",
    "packages:update": "ncu -u",
    "ntl": "npx ntl",
    "extract-messages": "set NODE_ENV=production && babel ./src >NUL",
    "svg": "svgo --config ./.svgo.json",
    "flow": "flow",
    "flow:install": "flow-typed install",
    "flow-coverage": "flow-coverage-report"
  },
  "devDependencies": {
    "@babel/cli": "^7.12.1",
    "@babel/core": "^7.12.3",
    "@babel/eslint-parser": "^7.12.1",
    "@babel/plugin-proposal-class-properties": "^7.12.1",
    "@babel/plugin-proposal-decorators": "^7.12.1",
    "@babel/plugin-proposal-do-expressions": "^7.12.1",
    "@babel/plugin-proposal-export-default-from": "^7.12.1",
    "@babel/plugin-proposal-export-namespace-from": "^7.12.1",
    "@babel/plugin-proposal-function-bind": "^7.12.1",
    "@babel/plugin-proposal-function-sent": "^7.12.1",
    "@babel/plugin-proposal-json-strings": "^7.12.1",
    "@babel/plugin-proposal-logical-assignment-operators": "^7.12.1",
    "@babel/plugin-proposal-nullish-coalescing-operator": "^7.12.1",
    "@babel/plugin-proposal-numeric-separator": "^7.12.1",
    "@babel/plugin-proposal-optional-chaining": "^7.12.1",
    "@babel/plugin-proposal-pipeline-operator": "^7.12.1",
    "@babel/plugin-proposal-throw-expressions": "^7.12.1",
    "@babel/plugin-syntax-dynamic-import": "^7.8.3",
    "@babel/plugin-syntax-import-meta": "^7.10.4",
    "@babel/plugin-transform-flow-strip-types": "^7.12.1",
    "@babel/preset-env": "^7.12.1",
    "@babel/preset-flow": "^7.12.1",
    "@babel/preset-react": "^7.12.1",
    "@webpack-cli/migrate": "^1.0.2",
    "babel-jest": "^26.6.1",
    "babel-loader": "^8.1.0",
    "babel-plugin-import": "^1.13.1",
    "babel-plugin-macros": "^2.8.0",
    "babel-plugin-module-resolver": "^4.0.0",
    "babel-plugin-react-intl": "^8.2.10",
    "babel-plugin-styled-components": "^1.11.1",
    "babel-plugin-transform-react-remove-prop-types": "^0.4.24",
    "browserslist": "^4.14.5",
    "bundle-stats-webpack-plugin": "^2.3.0",
    "circular-dependency-plugin": "^5.2.2",
    "clean-webpack-plugin": "^3.0.0",
    "cross-env": "^7.0.2",
    "css-loader": "^5.0.0",
    "dotenv-webpack": "^5.0.1",
    "eslint": "^7.2.0",
    "eslint-config-airbnb": "^18.2.0",
    "eslint-import-resolver-babel-module": "^5.2.0",
    "eslint-import-resolver-node": "^0.3.4",
    "eslint-nibble": "^6.0.0",
    "eslint-plugin-babel": "^5.3.1",
    "eslint-plugin-flowtype": "^5.2.0",
    "eslint-plugin-formatjs": "^2.8.0",
    "eslint-plugin-import": "^2.21.2",
    "eslint-plugin-jsx-a11y": "^6.3.0",
    "eslint-plugin-module-resolver": "^1.0.0",
    "eslint-plugin-react": "^7.20.0",
    "eslint-plugin-react-hooks": "^4.0.0",
    "eslint-webpack-plugin": "^2.1.0",
    "fast-async": "^6.3.8",
    "favicons-webpack-plugin": "^5.0.0-alpha.3",
    "flow-bin": "^0.137.0",
    "flow-coverage-report": "^0.8.0",
    "flow-typed": "^3.2.1",
    "friendly-errors-webpack-plugin": "^1.7.0",
    "git-revision-webpack-plugin": "^3.0.6",
    "html-webpack-plugin": "^5.0.0-alpha.10",
    "husky": "^4.3.0",
    "image-trace-loader": "^1.0.2",
    "jest": "^26.6.1",
    "lint-staged": "^10.5.0",
    "node-notifier": "^8.0.0",
    "nodemon": "^2.0.6",
    "npm-check-updates": "^9.2.3",
    "npm-force-resolutions": "0.0.3",
    "npm-run-all": "^4.1.5",
    "prettier": "^2.1.2",
    "standard-version": "^9.0.0",
    "style-loader": "^2.0.0",
    "stylelint": "^13.7.2",
    "stylelint-a11y": "^1.2.3",
    "stylelint-config-airbnb": "0.0.0",
    "stylelint-config-idiomatic-order": "^8.1.0",
    "stylelint-config-prettier": "^8.0.2",
    "stylelint-config-rational-order": "^0.1.2",
    "stylelint-config-recommended": "^3.0.0",
    "stylelint-config-standard": "^20.0.0",
    "stylelint-config-styled-components": "^0.1.1",
    "stylelint-custom-processor-loader": "^0.6.0",
    "stylelint-order": "^4.1.0",
    "stylelint-prettier": "^1.1.2",
    "stylelint-processor-styled-components": "^1.10.0",
    "stylelint-scss": "^3.18.0",
    "svg-react-loader": "^0.4.6",
    "svgo": "^1.3.2",
    "unused-webpack-plugin": "^2.4.0",
    "webpack": "^5.4.0",
    "webpack-bundle-analyzer": "^3.9.0",
    "webpack-cli": "^4.1.0",
    "webpack-dev-server": "^3.11.0",
    "webpack-manifest-plugin": "^3.0.0-rc.0",
    "webpack-stats-plugin": "^1.0.2"
  },
  "dependencies": {
    "dotenv": "^8.2.0",
    "@babel/register": "^7.12.1",
    "@formatjs/intl-relativetimeformat": "^7.3.1",
    "@fortawesome/fontawesome-svg-core": "^1.2.32",
    "@fortawesome/free-brands-svg-icons": "^5.15.1",
    "@fortawesome/free-regular-svg-icons": "^5.15.1",
    "@fortawesome/free-solid-svg-icons": "^5.15.1",
    "@fortawesome/react-fontawesome": "^0.1.12",
    "@hot-loader/react-dom": "^16.11.0",
    "@sentry/browser": "^5.27.2",
    "antd": "^3.26.7",
    "axios": "^0.19.2",
    "bootstrap": "^4.4.1",
    "connect-timeout": "^1.9.0",
    "connected-react-router": "^6.6.1",
    "core-js": "^3.6.5",
    "date-fns": "^2.9.0",
    "date-fns-tz": "^1.0.9",
    "express": "^4.17.1",
    "final-form": "^4.18.6",
    "final-form-arrays": "^3.0.2",
    "final-form-calculate": "^1.3.1",
    "flat": "^5.0.2",
    "history": "^4.10.1",
    "http-proxy-middleware": "^1.0.6",
    "intl": "^1.2.5",
    "intl-pluralrules": "^1.1.1",
    "jsonwebtoken": "^8.5.1",
    "jwt-decode": "^3.0.0",
    "logrocket": "^1.0.14",
    "morgan": "^1.10.0",
    "morphism": "^1.12.3",
    "normalizr": "^3.6.1",
    "path": "^0.12.7",
    "prop-types": "^15.7.2",
    "qs": "^6.9.4",
    "rc-slider": "^8.7.1",
    "re-reselect": "^3.4.0",
    "react": "^16.12.0",
    "react-countdown": "^2.2.0",
    "react-datepicker": "^2.11.0",
    "react-dom": "^16.12.0",
    "react-final-form": "^6.3.3",
    "react-flip-toolkit": "^7.0.7",
    "react-gtm-module": "^2.0.8",
    "react-helmet": "^5.2.1",
    "react-hot-loader": "4.12.6",
    "react-id-swiper": "^2.4.0",
    "react-intl": "^3.11.0",
    "react-loadable": "^5.5.0",
    "react-modal": "^3.11.1",
    "react-redux": "^7.1.3",
    "react-responsive-modal": "^4.0.1",
    "react-router-dom": "^5.1.2",
    "react-select": "^3.0.8",
    "react-table": "7.0.0-beta.0",
    "react-text-mask": "^5.4.3",
    "react-tooltip": "^3.11.2",
    "react-yandex-maps": "^4.2.0",
    "recompose": "^0.30.0",
    "redux": "^4.0.5",
    "redux-actions": "^2.6.5",
    "redux-auth-wrapper": "^3.0.0",
    "redux-devtools-extension": "^2.13.8",
    "redux-form": "^8.2.6",
    "redux-immutable-state-invariant": "^2.1.0",
    "redux-logger": "^3.0.6",
    "redux-reset": "^0.3.0",
    "redux-thunk": "^2.3.0",
    "reselect": "^4.0.0",
    "response-time": "^2.3.2",
    "shortid": "^2.2.16",
    "styled-components": "^5.0.0",
    "swiper": "^5.3.0",
    "text-mask-addons": "^3.8.0",
    "winston": "^3.3.3"
  },
  "husky": {
    "hooks": {
      "pre-commit": "lint-staged"
    }
  },
  "lint-staged": {
    "*.(css|scss)": [
      "stylelint --fix"
    ],
    "*.(js|jsx)": "eslint --cache --fix"
  },
  "resolutions": {
    "chokidar": "^3.4.3"
  }
}

[AnderssonChristian]

@jantimon based on the correspondence in the webpack issue you linked to, you are able to proceed with your work on webpack 5 support now? 😄👍

[jantimon]

Unfortunately I can’t get the child compiler to work with webpack@5
I am not able to extract the assets in a consistent way as the library options seem to have no effect: https://github.com/webpack/webpack/issues/11909