'webpack fail to build, suddently get: Critical dependency, Can't resolve, Invalid dependencies and more

My webpackwith electron forge was fine, I ran yarn make the command has been successful. I was trying to make icpRender work (through preloader script) when "suddenly" the webpack did stop working and I get tons of errors that, I'd say totally unrelated to what I was working on. What possibly could be the reason? I see something broken in the dependencies but I have no idea why. How do I fix that? I'm pretty sure adding dependencies manually isn't the proper way to do that rather I should focus on the root issue.

I can past only part of the error message due to stackoverflow's body message limit. So the full error is here

the error:

An unhandled error has occurred inside Forge: Compilation errors in the main process: assets by status 123 MiB [cached] 87 assets runtime modules 898 bytes 5 modules orphan modules 3.29 KiB [orphan] 4 modules javascript modules 6.21 MiB cacheable modules 6.21 MiB 1162 modules

  • 29 modules json modules 667 KiB modules by path ./node_modules/dmg-builder/ 86.7 KiB 8 modules modules by path ./node_modules/@babel/ 32.8 KiB 5 modules modules by path ./node_modules/core-js-compat/*.json 334 KiB 4 modules modules by path ./node_modules/ajv/lib/ 3.12 KiB 2 modules modules by path ./node_modules/node-releases/data/ 20.1 KiB ./node_modules/node-releases/data/processed/envs.json 18.6 KiB [built] [code generated] ./node_modules/node-releases/data/release-schedule/release-schedule.json 1.54 KiB [built] [code generated] + 9 modules

[...]

15 warnings have detailed information that is not shown. Use 'stats.errorDetails: true' resp. '--stats-error-details' to show it.

ERROR in ./node_modules/app-builder-lib/out/ProtonFramework.js 72:8-63 Module not found: Error: Can't resolve '@babel/plugin-proposal-function-bind' in 'C:\Users\jack\Desktop\merge\Newton\node_modules\app-builder-lib\out' @ ./node_modules/app-builder-lib/out/packager.js 19:26-54 @ ./node_modules/app-builder-lib/out/index.js 7:19-40 10:17-38 @ ./node_modules/electron-builder/out/index.js 11:24-50 19:24-50 @ ./public/electron.js 4:20-47

ERROR in ./node_modules/app-builder-lib/out/ProtonFramework.js 74:8-69 Module not found: Error: Can't resolve '@babel/plugin-proposal-export-default-from' in 'C:\Users\jack\Desktop\merge\Newton\node_modules\app-builder-lib\out' @ ./node_modules/app-builder-lib/out/packager.js 19:26-54 @ ./node_modules/app-builder-lib/out/index.js 7:19-40 10:17-38 @ ./node_modules/electron-builder/out/index.js 11:24-50 19:24-50 @ ./public/electron.js 4:20-47

ERROR in ./node_modules/app-builder-lib/out/ProtonFramework.js 77:9-68 Module not found: Error: Can't resolve '@babel/plugin-proposal-pipeline-operator' in 'C:\Users\jack\Desktop\merge\Newton\node_modules\app-builder-lib\out' @ ./node_modules/app-builder-lib/out/packager.js 19:26-54 @ ./node_modules/app-builder-lib/out/index.js 7:19-40 10:17-38 @ ./node_modules/electron-builder/out/index.js 11:24-50 19:24-50 @ ./public/electron.js 4:20-47

ERROR in ./node_modules/app-builder-lib/out/ProtonFramework.js 79:8-64 Module not found: Error: Can't resolve '@babel/plugin-proposal-do-expressions' in 'C:\Users\jack\Desktop\merge\Newton\node_modules\app-builder-lib\out' @ ./node_modules/app-builder-lib/out/packager.js 19:26-54 @ ./node_modules/app-builder-lib/out/index.js 7:19-40 10:17-38 @ ./node_modules/electron-builder/out/index.js 11:24-50 19:24-50 @ ./public/electron.js 4:20-47

ERROR in ./node_modules/app-builder-lib/out/ProtonFramework.js 82:8-63 Module not found: Error: Can't resolve '@babel/plugin-proposal-function-sent' in 'C:\Users\jack\Desktop\merge\Newton\node_modules\app-builder-lib\out' @ ./node_modules/app-builder-lib/out/packager.js 19:26-54 @ ./node_modules/app-builder-lib/out/index.js 7:19-40 10:17-38 @ ./node_modules/electron-builder/out/index.js 11:24-50 19:24-50 @ ./public/electron.js 4:20-47

ERROR in ./node_modules/app-builder-lib/out/ProtonFramework.js 85:8-67 Module not found: Error: Can't resolve '@babel/plugin-proposal-throw-expressions' in 'C:\Users\jack\Desktop\merge\Newton\node_modules\app-builder-lib\out' @ ./node_modules/app-builder-lib/out/packager.js 19:26-54 @ ./node_modules/app-builder-lib/out/index.js 7:19-40 10:17-38 @ ./node_modules/electron-builder/out/index.js 11:24-50 19:24-50 @ ./public/electron.js 4:20-47

ERROR in ./node_modules/app-builder-lib/out/ProtonFramework.js 88:8-59 Module not found: Error: Can't resolve '@babel/plugin-syntax-import-meta' in 'C:\Users\jack\Desktop\merge\Newton\node_modules\app-builder-lib\out' @ ./node_modules/app-builder-lib/out/packager.js 19:26-54 @ ./node_modules/app-builder-lib/out/index.js 7:19-40 10:17-38 @ ./node_modules/electron-builder/out/index.js 11:24-50 19:24-50 @ ./public/electron.js 4:20-47

ERROR in ./node_modules/dmg-builder/out/dmgLicense.js 9:22-44 Module not found: Error: Can't resolve 'dmg-license' in 'C:\Users\jack\Desktop\merge\Newton\node_modules\dmg-builder\out' @ ./node_modules/dmg-builder/out/dmg.js 13:21-44 @ ./node_modules/dmg-builder/out/dmgUtil.js 7:12-28 @ ./node_modules/app-builder-lib/out/macPackager.js 63:42-64 @ ./node_modules/app-builder-lib/out/packager.js 377:72-96 @ ./node_modules/app-builder-lib/out/index.js 7:19-40 10:17-38 @ ./node_modules/electron-builder/out/index.js 11:24-50 19:24-50 @ ./public/electron.js 4:20-47

ERROR in ./node_modules/read-config-file/out/main.js 25:17-38 Module not found: Error: Can't resolve 'toml' in 'C:\Users\jack\Desktop\merge\Newton\node_modules\read-config-file\out' @ ./node_modules/app-builder-lib/out/util/config.js 9:27-54 @ ./node_modules/app-builder-lib/out/packager.js 21:17-41 @ ./node_modules/app-builder-lib/out/index.js 7:19-40 10:17-38 @ ./node_modules/electron-builder/out/index.js 11:24-50 19:24-50 @ ./public/electron.js 4:20-47

9 errors have detailed information that is not shown. Use 'stats.errorDetails: true' resp. '--stats-error-details' to show it.

webpack 5.67.0 compiled with 9 errors and 15 warnings in 83110 ms Error: Compilation errors in the main process: assets by status 123 MiB [cached] 87 assets runtime modules 898 bytes 5 modules orphan modules 3.29 KiB [orphan] 4 modules javascript modules 6.21 MiB
cacheable modules 6.21 MiB 1162 modules + 29 modules json modules 667 KiB modules by path ./node_modules/dmg-builder/ 86.7 KiB 8 modules modules by path ./node_modules/@babel/ 32.8 KiB 5 modules
modules by path ./node_modules/core-js-compat/*.json 334 KiB 4 modules modules by path ./node_modules/ajv/lib/ 3.12 KiB 2 modules modules by path ./node_modules/node-releases/data/ 20.1 KiB ./node_modules/node-releases/data/processed/envs.json 18.6 KiB [built] [code generated] ./node_modules/node-releases/data/release-schedule/release-schedule.json 1.54 KiB [built] [code generated] + 9 modules

WARNING in ./node_modules/@babel/core/lib/config/files/import.js 9:9-25 Critical dependency: the request of a dependency is an expression @ ./node_modules/@babel/core/lib/config/files/module-types.js 48:12-39 @ ./node_modules/@babel/core/lib/config/files/configuration.js 69:19-44 @ ./node_modules/@babel/core/lib/config/files/index.js 64:21-47 @ ./node_modules/@babel/core/lib/index.js 189:13-38 @ ./node_modules/app-builder-lib/out/ProtonFramework.js 32:20-42 @ ./node_modules/app-builder-lib/out/packager.js 19:26-54 @ ./node_modules/app-builder-lib/out/index.js 7:19-40 10:17-38 @ ./node_modules/electron-builder/out/index.js 11:24-50 19:24-50 @ ./public/electron.js 4:20-47

WARNING in ./node_modules/app-builder-bin/index.js Invalid dependencies have been reported by plugins or loaders for this module. All reported dependencies need to be absolute paths. Invalid dependencies may lead to broken watching and caching. As best effort we try to convert all invalid values to absolute paths and converting globs into context dependencies, but this is deprecated behavior. Loaders: Pass absolute paths to this.addDependency (existing files), this.addMissingDependency (not existing files), and this.addContextDependency (directories). Plugins: Pass absolute paths to fileDependencies (existing files), missingDependencies (not existing files), and contextDependencies (directories). Globs: They are not supported. Pass absolute path to the directory as context dependencies. The following invalid values have been reported: * "C:/Users/jack/Desktop/merge/Newton/node_modules/app-builder-bin/linux/arm/app-builder"

  • "C:/Users/jack/Desktop/merge/Newton/node_modules/app-builder-bin/linux/arm64/app-builder"
  • "C:/Users/jack/Desktop/merge/Newton/node_modules/app-builder-bin/linux/ia32/app-builder"
  • and more ... @ ./node_modules/builder-util/out/util.js 5:26-52 @ ./node_modules/electron-builder/out/index.js 4:21-44 @ ./public/electron.js 4:20-47

WARNING in ./node_modules/app-builder-lib/out/ProtonFramework.js 38:24-45 Module not found: Error: Can't resolve 'babel-core' in 'C:\Users\jack\Desktop\merge\Newton\node_modules\app-builder-lib\out' @ ./node_modules/app-builder-lib/out/packager.js 19:26-54 @ ./node_modules/app-builder-lib/out/index.js 7:19-40 10:17-38 @ ./node_modules/electron-builder/out/index.js 11:24-50 19:24-50 @ ./public/electron.js 4:20-47

WARNING in ./node_modules/app-builder-lib/out/util/pathManager.js Invalid dependencies have been reported by plugins or loaders for this module. All reported dependencies need to be absolute paths. Invalid dependencies may lead to broken watching and caching. As best effort we try to convert all invalid values to absolute paths and converting globs into context dependencies, but this is deprecated behavior. Loaders: Pass absolute paths to this.addDependency (existing files), this.addMissingDependency (not existing files), and this.addContextDependency (directories). Plugins: Pass absolute paths to fileDependencies (existing files), missingDependencies (not existing files), and contextDependencies (directories). Globs: They are not supported. Pass absolute path to the directory as context dependencies. The following invalid values have been reported: * "C:/Users/jack/Desktop/merge/Newton/node_modules/app-builder-lib/templates/appx/appxmanifest.xml"

  • "C:/Users/jack/Desktop/merge/Newton/node_modules/app-builder-lib/templates/appx/priconfig.xml"
  • "C:/Users/jack/Desktop/merge/Newton/node_modules/app-builder-lib/templates/entitlements.mac.plist"
  • and more ... @ ./node_modules/app-builder-lib/out/ProtonFramework.js 9:22-51 @ ./node_modules/app-builder-lib/out/packager.js 19:26-54 @ ./node_modules/app-builder-lib/out/index.js 7:19-40 10:17-38 @ ./node_modules/electron-builder/out/index.js 11:24-50 19:24-50 @ ./public/electron.js 4:20-47

WARNING in ./node_modules/app-builder-lib/out/winPackager.js 146:39-91 Module not found: Error: Can't resolve 'electron-builder-squirrel-windows' in 'C:\Users\jack\Desktop\merge\Newton\node_modules\app-builder-lib\out' @ ./node_modules/app-builder-lib/out/packager.js 381:72-96 @ ./node_modules/app-builder-lib/out/index.js 7:19-40 10:17-38 @ ./node_modules/electron-builder/out/index.js 11:24-50 19:24-50 @ ./public/electron.js 4:20-47

WARNING in ./node_modules/browserslist/node.js 171:42-49 Critical dependency: require function is used in a way in which dependencies cannot be statically extracted @ ./node_modules/browserslist/index.js 8:10-27 @ ./node_modules/@babel/helper-compilation-targets/lib/index.js 45:20-43 @ ./node_modules/@babel/preset-env/lib/index.js 38:32-76 @ ./node_modules/app-builder-lib/out/ProtonFramework.js 69:29-65 @ ./node_modules/app-builder-lib/out/packager.js 19:26-54 @ ./node_modules/app-builder-lib/out/index.js 7:19-40 10:17-38 @ ./node_modules/electron-builder/out/index.js 11:24-50 19:24-50 @ ./public/electron.js 4:20-47

WARNING in ./node_modules/browserslist/node.js 192:40-47 Critical dependency: require function is used in a way in which dependencies cannot be statically extracted @ ./node_modules/browserslist/index.js 8:10-27 @ ./node_modules/@babel/helper-compilation-targets/lib/index.js 45:20-43 @ ./node_modules/@babel/preset-env/lib/index.js 38:32-76 @ ./node_modules/app-builder-lib/out/ProtonFramework.js 69:29-65 @ ./node_modules/app-builder-lib/out/packager.js 19:26-54 @ ./node_modules/app-builder-lib/out/index.js 7:19-40 10:17-38 @ ./node_modules/electron-builder/out/index.js 11:24-50 19:24-50 @ ./public/electron.js 4:20-47

WARNING in ./node_modules/dmg-builder/out/dmgUtil.js Invalid dependencies have been reported by plugins or loaders for this module. All reported dependencies need to be absolute paths. Invalid dependencies may lead to broken watching and caching. As best effort we try to convert all invalid values to absolute paths and converting globs into context dependencies, but this is deprecated behavior. Loaders: Pass absolute paths to this.addDependency (existing files), this.addMissingDependency (not existing files), and this.addContextDependency (directories). Plugins: Pass absolute paths to fileDependencies (existing files), missingDependencies (not existing files), and contextDependencies (directories). Globs: They are not supported. Pass absolute path to the directory as context dependencies. The following invalid values have been reported: * "C:/Users/jack/Desktop/merge/Newton/node_modules/dmg-builder/templates/background.tiff"

  • "C:/Users/jack/Desktop/merge/Newton/node_modules/dmg-builder/vendor/biplist/init.py"
  • "C:/Users/jack/Desktop/merge/Newton/node_modules/dmg-builder/vendor/dmgbuild/badge.py"
  • and more ... @ ./node_modules/app-builder-lib/out/macPackager.js 63:42-64 @ ./node_modules/app-builder-lib/out/packager.js 377:72-96 @ ./node_modules/app-builder-lib/out/index.js 7:19-40 10:17-38 @ ./node_modules/electron-builder/out/index.js 11:24-50 19:24-50 @ ./public/electron.js 4:20-47 15 warnings have detailed information that is not shown. Use 'stats.errorDetails: true' resp. '--stats-error-details' to show it. [...]

package.json

{
  "name": "ed",
  "version": "0.1.0",
  "description": "ed",
  "author": {
    "name": "jack",
    "email": "[email protected]"
  },
  "private": true,
  "main": ".webpack/main",
  "homepage": "./",
  "license": "MIT",
  "config": {
    "forge": {
      "packagerConfig": {},
      "makers": [
        {
          "name": "@electron-forge/maker-squirrel",
          "config": {
            "name": "ed"
          }
        },
        {
          "name": "@electron-forge/maker-zip",
          "platforms": [
            "darwin"
          ]
        },
        {
          "name": "@electron-forge/maker-deb",
          "config": {}
        },
        {
          "name": "@electron-forge/maker-rpm",
          "config": {}
        }
      ],
      "plugins": [
        [
          "@electron-forge/plugin-webpack",
          {
            "mainConfig": "./webpack.main.config.js",
            "renderer": {
              "nodeIntegration": true,
              "config": "./webpack.renderer.config.js",
              "entryPoints": [
                {
                  "html": "./public/index.html",
                  "js": "./src/index.js",
                  "name": "main_window",
                  "preload": {
                    "js": "./src/preload.js"
                  }
                }
              ]
            }
          }
        ]
      ]
    }
  },
  "dependencies": {
    "electron-squirrel-startup": "^1.0.0",
    "@testing-library/jest-dom": "^5.11.4",
    "@testing-library/react": "^11.1.0",
    "@testing-library/user-event": "^12.1.10",
    "babel-loader": "^8.1.0",
    "clean-web-ui-property-grid": "^1.1.1",
    "common-js": "^0.3.8",
    "commonjs": "^0.0.1",
    "cross-env": "^7.0.3",
    "css-loader": "^6.5.1",
    "history": "^5.0.1",
    "i": "^0.3.7",
    "npm": "^7.24.1",
    "react": "^17.0.2",
    "react-dom": "^17.0.2",
    "react-draggable": "^4.4.4",
    "react-helmet-async": "^1.1.2",
    "react-router-dom": "^5.3.0",
    "react-scripts": "4.0.3",
    "react-tabs": "^3.2.2",
    "react-tinder-card": "^1.4.5",
    "web-vitals": "^1.0.1"
  },
  "scripts": {
    "start": "set PORT=3004 && react-scripts start",
    "make": "electron-forge make",
    "build": "react-scripts build",
    "dist": "yarn run build && electron-builder build",
    "test": "react-scripts test",
    "eject": "react-scripts eject",
    "dev": "concurrently -k \"cross-env BROWSER=none npm start\" \"npm:electron\"",
    "electron": "wait-on tcp:3004 && electron ."
  },
  "eslintConfig": {
    "extends": [
      "react-app",
      "react-app/jest"
    ]
  },
  "browserslist": {
    "production": [
      ">0.2%",
      "not dead",
      "not op_mini all"
    ],
    "development": [
      "last 1 chrome version",
      "last 1 firefox version",
      "last 1 safari version"
    ]
  },
  "devDependencies": {
    "@electron-forge/cli": "^6.0.0-beta.63",
    "@electron-forge/maker-deb": "^6.0.0-beta.63",
    "@electron-forge/maker-rpm": "^6.0.0-beta.63",
    "@electron-forge/maker-squirrel": "^6.0.0-beta.63",
    "@electron-forge/maker-zip": "^6.0.0-beta.63",
    "@electron-forge/plugin-webpack": "6.0.0-beta.63",
    "@vercel/webpack-asset-relocator-loader": "1.7.0",
    "concurrently": "^7.0.0",
    "electron": "^16.0.6",
    "electron-builder": "^22.14.5",
    "electron-is-dev": "^2.0.0",
    "electron-packager": "^15.4.0",
    "wait-on": "^6.0.0"
  }
}


Solution 1:[1]

Maybe node.js version has changed recently at your machine? Install NVM and switch to old version then.

Sometimes removal of node_modules and re-doing npm install helps.

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1 Andrey