"TypeError: Cannot read property 'compile' of undefined" when running webpack-dev-server

[GabLeRoux]

docker-compose exec web webpack-dev-server

/app/node_modules/webpack-dev-server/bin/webpack-dev-server.js:405
    throw e;
    ^

TypeError: Cannot read property 'compile' of undefined
    at addCompilerHooks (/app/node_modules/webpack-dev-server/lib/Server.js:71:16)
    at new Server (/app/node_modules/webpack-dev-server/lib/Server.js:81:5)
    at startDevServer (/app/node_modules/webpack-dev-server/bin/webpack-dev-server.js:398:14)
    at processOptions (/app/node_modules/webpack-dev-server/bin/webpack-dev-server.js:361:5)
    at Object.<anonymous> (/app/node_modules/webpack-dev-server/bin/webpack-dev-server.js:504:1)
    at Module._compile (module.js:643:30)
    at Object.Module._extensions..js (module.js:654:10)
    at Module.load (module.js:556:32)
    at tryModuleLoad (module.js:499:12)
    at Function.Module._load (module.js:491:3)

I get this after running instructions from readme, but webpack command dows succeed:

docker-compose exec web webpack

Hash: fa22d2007227fbc4a9ea
Version: webpack 3.11.0
Time: 10251ms
                                                           Asset       Size  Chunks             Chunk Names
                             application-7f3894b1407a30efc22d.js    3.69 kB    0, 1  [emitted]  application
                 stylesheets/application-51d53d8a577eadc9aede.js    2.83 kB       1  [emitted]  stylesheets/application
                application-fe0d71774faee3f186cb985474e389a7.css  115 bytes    0, 1  [emitted]  application
    stylesheets/application-fe0d71774faee3f186cb985474e389a7.css  115 bytes       1  [emitted]  stylesheets/application
                         application-7f3894b1407a30efc22d.js.map    3.51 kB    0, 1  [emitted]  application
            application-fe0d71774faee3f186cb985474e389a7.css.map  332 bytes    0, 1  [emitted]  application
             stylesheets/application-51d53d8a577eadc9aede.js.map    2.76 kB       1  [emitted]  stylesheets/application
stylesheets/application-fe0d71774faee3f186cb985474e389a7.css.map  344 bytes       1  [emitted]  stylesheets/application
                                                   manifest.json  714 bytes          [emitted]
   [0] ./app/javascript/packs/stylesheets/application.scss 41 bytes {0} {1} [built]
   [1] ./app/javascript/packs/application.js 559 bytes {0} [built]
   [2] ./node_modules/css-loader??ref--2-2!./node_modules/postcss-loader/lib??ref--2-3!./node_modules/sass-loader/lib/loader.js??ref--2-4!./app/javascript/packs/stylesheets/application.scss 443 bytes [built]
    + 3 hidden modules
Child extract-text-webpack-plugin node_modules/extract-text-webpack-plugin/dist node_modules/css-loader/index.js??ref--2-2!node_modules/postcss-loader/lib/index.js??ref--2-3!node_modules/sass-loader/lib/loader.js??ref--2-4!app/javascript/packs/stylesheets/application.scss:
       [0] ./node_modules/css-loader??ref--2-2!./node_modules/postcss-loader/lib??ref--2-3!./node_modules/sass-loader/lib/loader.js??ref--2-4!./app/javascript/packs/stylesheets/application.scss 443 bytes {0} [built]
        + 1 hidden module

[GabLeRoux]

Problem is here:

https://github.com/GabLeRoux/rails-webpacker-scss-example/blob/997eb2fb9b1740858fd5a336397dd92ae35d4f2c/package.json#L12

This seems to resolve the problem:

docker-compose exec web yarn add webpack-dev-server@2.11.1 -D

So latest version installed when I did yarn add webpack-dev-server -D installed a too recent version which broke my setup. I may fix this in the example project if I ever come back here 👍 Feel free to send a PR otherwise.

[niteshcse14]

npm i webpack-dev-server@2.9.1 --save dev when terminal shows npm audit fix then do not use this otherwise npm will install latest webpack-dev-server