Webpack related warnings and error after upgrading v4.0.3 to v5.0.0

[TobbeLundberg]

Describe the bug

Getting warnings and ultimately an error after upgrading from v4.0.3 to v5

Starting the development server...

(node:62864) [DEP_WEBPACK_COMPILATION_CACHE] DeprecationWarning: Compilation.cache was removed in favor of Compilation.getCache()
(node:62864) [DEP_WEBPACK_TEMPLATE_PATH_PLUGIN_REPLACE_PATH_VARIABLES_HASH] DeprecationWarning: [hash] is now [fullhash] (also consider using [chunkhash] or [contenthash], see documentation for details)
(node:62864) [DEP_WEBPACK_DEPRECATION_ARRAY_TO_SET_INDEXER] DeprecationWarning: chunk.files was changed from Array to Set (indexing Array is deprecated)
(node:62864) [DEP_WEBPACK_CHUNK_ENTRY_MODULE] DeprecationWarning: Chunk.entryModule: Use new ChunkGraph API

And then this (the error is at the end of the output)

Compiled successfully!

You can now view company-web-app in the browser.

  Local:            http://localhost:3000
  On Your Network:  http://192.168.68.107:3000

Note that the development build is not optimized.
To create a production build, use npm run build.

assets by path static/media/*.svg 4.97 MiB
  assets by info 4.63 MiB [immutable] 537 assets
  + 15 assets
assets by path static/media/*.woff 207 KiB
  asset static/media/roboto-v20-latin-900italic.c20d916c1a1b094c1cec.woff 21.8 KiB [emitted] [immutable] [from: node_modules/@company/ui-2/fonts/roboto-v20-latin-900italic.woff] (auxiliary name: main)
  + 9 assets
assets by path static/media/*.woff2 162 KiB
  asset static/media/roboto-v20-latin-900italic.cb5ad999740e9d8a8bd1.woff2 17.1 KiB [emitted] [immutable] [from: node_modules/@company/ui-2/fonts/roboto-v20-latin-900italic.woff2] (auxiliary name: main)
  + 9 assets
assets by path static/js/*.js 31.4 MiB
  asset static/js/bundle.js 30.8 MiB [emitted] (name: main) 1 related asset
  + 2 assets
+ 4 assets
orphan modules 4.28 MiB [orphan] 6340 modules
runtime modules 33 KiB 19 modules
built modules 21.6 MiB (javascript) 5.14 MiB (asset) [built]
  modules by path ./node_modules/ 14.1 MiB (javascript) 4.93 MiB (asset)
    javascript modules 14 MiB 2737 modules
    asset modules 22.3 KiB (javascript) 4.93 MiB (asset) 544 modules
    json modules 30.2 KiB 5 modules
  modules by path ./src/ 7.55 MiB (javascript) 220 KiB (asset)
    javascript modules 6.81 MiB 1274 modules
    asset modules 25.3 KiB (javascript) 220 KiB (asset) 18 modules
    json modules 727 KiB
      ./src/locales/sv.json 238 KiB [built] [code generated]
      + 2 modules
  ./util.inspect (ignored) 15 bytes [built] [code generated]
1 ERROR in child compilations (Use 'stats.children: true' resp. '--stats-children' for more details)
webpack 5.69.1 compiled with 1 error in 52352 ms
No issues found.

And finally, when trying to run the app I get this in my Chrome console

Uncaught Error: Module parse failed: Cannot read properties of undefined (reading 'resource')
File was processed with these loaders:
 * ./node_modules/workerize-loader/dist/rpc-worker-loader.js
 * ./node_modules/babel-loader/lib/index.js
 * ./node_modules/source-map-loader/dist/cjs.js
You may need an additional loader to handle the result of these loaders.
TypeError: Cannot read properties of undefined (reading 'resource')

Did you try recovering your dependencies?

Yes, I've tried deleting node_modules/ and package-lock.json

$ npm --version   
8.1.4

Which terms did you search for in User Guide?

Mostly searched for "1 ERROR in child compilations (Use 'stats.children: true' resp. '--stats-children' for more details)"

Environment

Environment Info:

  current version of create-react-app: 4.0.3
  running from /Users/tobbe/.config/yarn/global/node_modules/create-react-app

  System:
    OS: macOS 12.2
    CPU: (8) arm64 Apple M1
  Binaries:
    Node: 16.14.0 - /usr/local/bin/node
    Yarn: 1.22.17 - /opt/homebrew/bin/yarn
    npm: 8.1.4 - /opt/homebrew/bin/npm
  Browsers:
    Chrome: 98.0.4758.109
    Edge: 98.0.1108.62
    Firefox: 94.0.1
    Safari: 15.3
  npmPackages:
    react: ^17.0.1 => 17.0.2
    react-dom: ^17.0.1 => 17.0.2
    react-scripts: ^5.0.0 => 5.0.0
  npmGlobalPackages:
    create-react-app: Not Found

Steps to reproduce

Unfortunately not able to reproduce outside of our (closed source) code. A fresh cra5 project works fine.

Expected behavior

I expected the upgrade to go smoothly

Actual behavior

Reproducible demo

Sorry, no demo to share 🙁

[TobbeLundberg]

Here are dependencies and a few more things from our package.json

  "dependencies": {
    "@formatjs/cli": "^1.1.22",
    "@formatjs/intl-getcanonicallocales": "^1.5.3",
    "@formatjs/intl-locale": "^2.4.13",
    "@formatjs/intl-numberformat": "^4.2.11",
    "@formatjs/intl-pluralrules": "^4.0.5",
    "@formatjs/intl-relativetimeformat": "^5.2.11",
    "@companyab/boundary-pages": "^1.2.1",
    "@companyab/docs": "^3.2.1",
    "@companyab/company-nets": "^0.6.1",
    "@companyab/company-onfido": "^15.0.0",
    "@companyab/company-pep": "^6.0.1",
    "@companyab/translation-runner": "^1.3.0",
    "@companyab/ui-2": "^37.0.1",
    "@material-ui/core": "^4.11.0",
    "@material-ui/icons": "^4.9.1",
    "@sentry/react": "^5.27.1",
    "@testing-library/jest-dom": "^5.11.6",
    "@testing-library/react": "^11.2.0",
    "@testing-library/user-event": "^12.2.2",
    "@types/body-scroll-lock": "^3.1.0",
    "@types/classnames": "^2.2.11",
    "@types/d3": "^6.3.0",
    "@types/d3-interpolate-path": "^2.0.0",
    "@types/d3-scale": "^2.2.0",
    "@types/google.analytics": "^0.0.41",
    "@types/jest": "^26.0.15",
    "@types/js-cookie": "^2.2.6",
    "@types/jspdf": "^1.3.3",
    "@types/luxon": "^1.26.2",
    "@types/node": "^16.7.8",
    "@types/qrcode.react": "^1.0.1",
    "@types/react": "^16.9.56",
    "@types/react-datepicker": "^3.1.7",
    "@types/react-dom": "^16.9.9",
    "@types/react-flag-icon-css": "^1.0.4",
    "@types/react-helmet": "^6.1.0",
    "@types/react-intl": "^3.0.0",
    "@types/react-linkify": "^1.0.0",
    "@types/react-modal": "^3.12.0",
    "@types/react-router-dom": "^5.1.7",
    "@types/ua-parser-js": "^0.7.35",
    "body-scroll-lock": "^4.0.0-beta.0",
    "core-js": "^3.6.5",
    "d3-interpolate-path": "^2.1.2",
    "elevio": "^1.0.2",
    "fireworks-js": "^1.3.5",
    "framer-motion": "^2.7.2",
    "intersection-observer": "^0.11.0",
    "js-cookie": "^2.2.1",
    "jspdf": "^2.3.0",
    "luxon": "^1.23.0",
    "qrcode.react": "^1.0.1",
    "query-string": "^6.13.1",
    "react": "^17.0.1",
    "react-animate-height": "^2.0.21",
    "react-dom": "^17.0.1",
    "react-flag-icon-css": "^1.0.25",
    "react-helmet": "^6.1.0",
    "react-intersection-observer": "^8.26.2",
    "react-intl": "^5.20.2",
    "react-intl-translations-manager": "^5.0.3",
    "react-linkify": "^1.0.0-alpha",
    "react-modal": "^3.12.1",
    "react-router": "^5.2.0",
    "react-router-dom": "^5.2.0",
    "react-to-print": "^2.10.0",
    "sass": "^1.49.9",
    "typescript": "^4.4.2",
    "ua-parser-js": "^0.7.24"
  },
  "scripts": {
    "// preinstall needed for": "https://github.com/facebook/create-react-app/issues/11773",
    "preinstall": "npx npm-force-resolutions",
    "modify-files": "node ./modify_files.js",
    "analyze": "source-map-explorer 'build/static/js/*.js'",
    "start": "node write_env.js development && react-scripts start",
    "build": "node write_env.js production && react-scripts build && npm run modify-files",
    "test": "react-scripts test",
    "translations": "translation-runner",
    "translations:print-all": "translation-runner --print-all"
  },
  "eslintConfig": {
    "extends": "react-app"
  },
  "devDependencies": {
    "@types/classnames": "^2.2.11",
    "husky": "^3.0.8",
    "lint-staged": "^11.1.2",
    "npm-force-resolutions": "^0.0.10",
    "prettier": "^2.3.2",
    "react-scripts": "^5.0.0",
    "source-map-explorer": "^2.4.2",
    "workerize-loader": "^1.2.0",
    "ws": "^7.2.0"
  },

[TobbeLundberg]

Getting rid of workerize-loader made my app work again. It doesn't support webpack 5