search

webpack / webpack-dev-server

Serves a webpack app. Updates the browser on changes. Documentation https://webpack.js.org/configuration/dev-server/.
MIT License
7.8k stars 1.44k forks source link

Webpack can't build webpack-dev-server #4963

Closed cale-mcnulty closed 1 year ago

cale-mcnulty commented 1 year ago

Bug report

After upgrading from Webpack 4 to Webpack 5, and updating/reinstalling all plugins and dependencies, webpack serve now errors out on webpack-dev-server

Actual Behavior

webpack serve produces the following output: 

<i> [webpack-dev-server] Project is running at:
<i> [webpack-dev-server] Loopback: http://localhost:8080/
<i> [webpack-dev-server] On Your Network (IPv4): http://10.0.0.46:8080/
<i> [webpack-dev-server] On Your Network (IPv6): http://[fe80::1]:8080/
<i> [webpack-dev-server] Content not from webpack is served from '/Users/calemcnulty/Workspace/few/build' directory
<i> [webpack-dev-server] 404s will fallback to '/index.html'
assets by path build/1.0.0/js/*.js 18.4 MiB
  assets by chunk 8.57 MiB (id hint: vendors)
    assets by status 8.14 MiB [big]
      asset build/1.0.0/js/vendors-node_modules_lodash_round_js-node_modules_react-bootstrap_esm_Accordion_js-node_modul-0cb0af.js 7.22 MiB [emitted] [big] (id hint: vendors)
      asset build/1.0.0/js/vendors-node_modules_react-bootstrap-typeahead_es_index_js-node_modules_react-bootstrap_esm_B-4e96af.js 627 KiB [emitted] [big] (id hint: vendors)
      asset build/1.0.0/js/vendors-node_modules_lodash_cloneDeep_js-node_modules_react-bootstrap_esm_Table_js-node_modul-37f080.js 322 KiB [emitted] [big] (id hint: vendors)
    asset build/1.0.0/js/vendors-node_modules_multiselect-react-dropdown_dist_index_js.js 94.7 KiB [emitted] (id hint: vendors)
    asset build/1.0.0/js/vendors-node_modules_lodash_round_js-node_modules_react-bootstrap_esm_Badge_js-node_modules_r-ac5fde.js 85.7 KiB [emitted] (id hint: vendors)
    asset build/1.0.0/js/vendors-node_modules_react-bootstrap_esm_Accordion_js-node_modules_react-bootstrap_esm_Button-5ac932.js 83.3 KiB [emitted] (id hint: vendors)
    asset build/1.0.0/js/vendors-node_modules_react-bootstrap_esm_Form_js.js 78 KiB [emitted] (id hint: vendors)
    asset build/1.0.0/js/vendors-node_modules_loadable_component_dist_loadable_esm_js.js 46.8 KiB [emitted] (id hint: vendors)
    asset build/1.0.0/js/vendors-node_modules_react-bootstrap_esm_Modal_js.js 45.8 KiB [emitted] (id hint: vendors)
  + 15 assets
asset index.html 192 KiB [emitted]
asset build/1.0.0/css/main.css 36.8 KiB [emitted] (name: main)
Entrypoint main [big] 8.31 MiB = build/1.0.0/css/main.css 36.8 KiB build/1.0.0/js/main.js 8.28 MiB
orphan modules 452 KiB (javascript) 937 bytes (runtime) [orphan] 326 modules
runtime modules 6.45 KiB 15 modules
modules by path ./node_modules/ 5.14 MiB 1260 modules
modules by path ./src/client/ 673 KiB (javascript) 32.7 KiB (css/mini-extract)
  javascript modules 668 KiB 68 modules
  css modules 32.7 KiB
    modules by path ./src/client/assets/styles/modules/*.css 31.2 KiB
      css ./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[1].use[1]!./src/client/assets/styles/modules/general.css 12.2 KiB [built] [code generated]
      css ./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[1].use[1]!./src/client/assets/styles/modules/form.css 3.55 KiB [built] [code generated]
      css ./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[1].use[1]!./src/client/assets/styles/modules/map.css 1.04 KiB [built] [code generated]
      + 5 modules
    css ./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[1].use[1]!./node_modules/postcss-loader/dist/cjs.js??ruleSet[1].rules[1].use[2]!./src/client/assets/styles/main.css 272 bytes [built] [code generated]
    css ./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[1].use[1]!./node_modules/postcss-loader/dist/cjs.js??ruleSet[1].rules[1].use[2]!./src/client/assets/styles/main.css (1) 1.26 KiB [built] [code generated]
  ./src/client/modules/state_map.json 4.38 KiB [built] [code generated]

ERROR in ./node_modules/webpack-dev-server/client/overlay.js 207:12-17
Module not found: Error: Can't resolve 'imports' in '/Users/calemcnulty/Workspace/few/node_modules/webpack-dev-server/client'
resolve 'imports' in '/Users/calemcnulty/Workspace/few/node_modules/webpack-dev-server/client'
  Parsed request is a module
  using description file: /Users/calemcnulty/Workspace/few/node_modules/webpack-dev-server/package.json (relative path: ./client)
    resolve as module
      /Users/calemcnulty/Workspace/few/node_modules/webpack-dev-server/client/node_modules doesn't exist or is not a directory
      looking for modules in /Users/calemcnulty/Workspace/few/node_modules/webpack-dev-server/node_modules
        single file module
          using description file: /Users/calemcnulty/Workspace/few/node_modules/webpack-dev-server/package.json (relative path: ./node_modules/imports)
            no extension
              /Users/calemcnulty/Workspace/few/node_modules/webpack-dev-server/node_modules/imports doesn't exist
            .js
              /Users/calemcnulty/Workspace/few/node_modules/webpack-dev-server/node_modules/imports.js doesn't exist
        /Users/calemcnulty/Workspace/few/node_modules/webpack-dev-server/node_modules/imports doesn't exist
      /Users/calemcnulty/Workspace/few/node_modules/node_modules doesn't exist or is not a directory
      looking for modules in /Users/calemcnulty/Workspace/few/node_modules
        single file module
          using description file: /Users/calemcnulty/Workspace/few/package.json (relative path: ./node_modules/imports)
            no extension
              /Users/calemcnulty/Workspace/few/node_modules/imports doesn't exist
            .js
              /Users/calemcnulty/Workspace/few/node_modules/imports.js doesn't exist
        /Users/calemcnulty/Workspace/few/node_modules/imports doesn't exist
      /Users/calemcnulty/Workspace/node_modules doesn't exist or is not a directory
      /Users/calemcnulty/node_modules doesn't exist or is not a directory
      /Users/node_modules doesn't exist or is not a directory
      /node_modules doesn't exist or is not a directory
 @ ./node_modules/webpack-dev-server/client/index.js?protocol=ws%3A&hostname=0.0.0.0&port=8080&pathname=%2Fws&logging=info&overlay=true&reconnect=10&hot=false&live-reload=true 12:0-60 136:46-59 251:27-40 282:28-41

ERROR in ./node_modules/webpack-dev-server/client/overlay.js
Cannot read properties of undefined (reading 'module')
TypeError: Cannot read properties of undefined (reading 'module')
    at ProvidedDependencyTemplate.apply (/Users/calemcnulty/Workspace/few/node_modules/webpack/lib/dependencies/ProvidedDependency.js:134:61)
    at JavascriptGenerator.sourceDependency (/Users/calemcnulty/Workspace/few/node_modules/webpack/lib/javascript/JavascriptGenerator.js:206:12)
    at JavascriptGenerator.sourceModule (/Users/calemcnulty/Workspace/few/node_modules/webpack/lib/javascript/JavascriptGenerator.js:112:9)
    at JavascriptGenerator.generate (/Users/calemcnulty/Workspace/few/node_modules/webpack/lib/javascript/JavascriptGenerator.js:98:8)
    at NormalModule.codeGeneration (/Users/calemcnulty/Workspace/few/node_modules/webpack/lib/NormalModule.js:1208:22)
    at /Users/calemcnulty/Workspace/few/node_modules/webpack/lib/Compilation.js:3338:22
    at /Users/calemcnulty/Workspace/few/node_modules/webpack/lib/Cache.js:91:34
    at Array.<anonymous> (/Users/calemcnulty/Workspace/few/node_modules/webpack/lib/cache/MemoryCachePlugin.js:45:13)
    at /Users/calemcnulty/Workspace/few/node_modules/webpack/lib/Cache.js:91:19
    at Hook.eval [as callAsync] (eval at create (/Users/calemcnulty/Workspace/few/node_modules/tapable/lib/HookCodeFactory.js:33:10), <anonymous>:19:1)
 @ ./node_modules/webpack-dev-server/client/index.js?protocol=ws%3A&hostname=0.0.0.0&port=8080&pathname=%2Fws&logging=info&overlay=true&reconnect=10&hot=false&live-reload=true 12:0-60 136:46-59 251:27-40 282:28-41

webpack 5.88.2 compiled with 2 errors in 2767 ms

Expected Behavior

Well, not this. It was expected to build. I know the template says that's not a helpful response, but I'm not sure how to make it more helpful.

How Do We Reproduce?

Unfortunately I can't share the repo, although I've shared the configuration files (webpack.config.js, babel.config.js, package.json, package-lock.json).

Please paste the results of npx webpack-cli info here, and mention other relevant information

System: OS: macOS 12.6 CPU: (8) arm64 Apple M1 Pro Memory: 350.50 MB / 16.00 GB Binaries: Node: 20.4.0 - ~/.nvm/versions/node/v20.4.0/bin/node npm: 9.7.2 - ~/.nvm/versions/node/v20.4.0/bin/npm Browsers: Brave Browser: 114.1.52.130 Chrome: 115.0.5790.114 Safari: 15.6.1 Packages: babel-loader: ^9.1.3 => 9.1.3 css-loader: ^6.8.1 => 6.8.1 css-minimizer-webpack-plugin: ^5.0.1 => 5.0.1 html-webpack-plugin: ^5.5.3 => 5.5.3 postcss-loader: ^7.3.3 => 7.3.3 terser-webpack-plugin: ^5.3.9 => 5.3.9 webpack: ^5.88.2 => 5.88.2 webpack-cli: ^5.1.4 => 5.1.4 webpack-dev-server: ^4.15.1 => 4.15.1

config.tgz

snitin315 commented 1 year ago

Thank you for the issue. However, we can't help without a minimal reproduction of the error.

cale-mcnulty commented 1 year ago

I suspected as much; the error messages return no results on google, ddg, or stack overflow. The error seems low level enough to be independent of our particular code stack, yet the only other person who appears to have experienced it is a colleague working on a project that branched off this one. He eventually gave up and rebuilt his project around vite, which unfortunately won't work for this one.

Fair to close the ticket, but a suggestion of where to look for a solution would be greatly appreciated.