Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial

JavaScript Automating Your Development with webpack Dev Server

benjaminmosery
benjaminmosery
6,346 Points
Posted by benjaminmosery
benjaminmosery
6,346 Points

Webpack Dev Server Not Working (Outdated!)

I am having trouble running the Webpack Dev Server according to the instructions in the video. When I type 'npm start' in Node.js, I get the following error:

(node:8696) DeprecationWarning: Tapable.plugin is deprecated. Use new API on `.hooks` instead
(node:8696) DeprecationWarning: Tapable.apply is deprecated. Call apply on the plugin directly instead
i ｢wds｣: Project is running at http://localhost:8080/
i ｢wds｣: webpack output is served from /
× ｢wdm｣: Hash: 1b05b790a1052b1fbb95
Version: webpack 4.5.0
Time: 567ms
Built at: 2018-4-17 16:37:03
 2 assets
Entrypoint main = bundle.js
   [0] ./src/index.js 213 bytes {0} [built] [failed] [1 error]
   [1] ./node_modules/webpack-dev-server/client?http://localhost:8080 213 bytes {0} [built] [failed] [1 error]
   [2] multi ./node_modules/webpack-dev-server/client?http://localhost:8080 ./src/index.js 40 bytes {0} [built]

WARNING in configuration
The 'mode' option has not been set, webpack will fallback to 'production' for this value. Set 'mode' option to 'development' or 'production' to enable defaults for each environment.
You can also set it to 'none' to disable any default behavior. Learn more: https://webpack.js.org/concepts/mode/

ERROR in ./src/index.js
Module build failed: TypeError: Cannot read property 'babel' of undefined
    at Object.module.exports (C:\Users\bmose\Webpack\Dev Server\node_modules\babel-loader\lib\index.js:103:36)
 @ multi ./node_modules/webpack-dev-server/client?http://localhost:8080 ./src/index.js

ERROR in ./node_modules/webpack-dev-server/client?http://localhost:8080
Module build failed: TypeError: Cannot read property 'babel' of undefined
    at Object.module.exports (C:\Users\bmose\Webpack\Dev Server\node_modules\babel-loader\lib\index.js:103:36)
 @ multi ./node_modules/webpack-dev-server/client?http://localhost:8080 ./src/index.js

ERROR in   Error: Child compilation failed:
  Module build failed: TypeError: Cannot read property 'babel' of undefined


  - TypeError: Cannot read property 'babel' of undefined

  - compiler.js:76
    [Dev Server]/[html-webpack-plugin]/lib/compiler.js:76:16

  - Compiler.js:240 compile
    [bmose]/[webpack]/lib/Compiler.js:240:11

  - Compiler.js:485 hooks.afterCompile.callAsync.err
    [bmose]/[webpack]/lib/Compiler.js:485:14


  - Hook.js:35 AsyncSeriesHook.lazyCompileHook [as _callAsync]
    [bmose]/[tapable]/lib/Hook.js:35:21

  - Compiler.js:482 compilation.seal.err
    [bmose]/[webpack]/lib/Compiler.js:482:30


  - Hook.js:35 AsyncSeriesHook.lazyCompileHook [as _callAsync]
    [bmose]/[tapable]/lib/Hook.js:35:21

  - Compilation.js:972 hooks.optimizeAssets.callAsync.err
    [bmose]/[webpack]/lib/Compilation.js:972:35


  - Hook.js:35 AsyncSeriesHook.lazyCompileHook [as _callAsync]
    [bmose]/[tapable]/lib/Hook.js:35:21

  - Compilation.js:963 hooks.optimizeChunkAssets.callAsync.err
    [bmose]/[webpack]/lib/Compilation.js:963:32


  - index.js:266
    [bmose]/[uglifyjs-webpack-plugin]/dist/index.js:266:11

  - index.js:63 _class.runTasks
    [bmose]/[uglifyjs-webpack-plugin]/dist/uglify/index.js:63:9

  - index.js:186 UglifyJsPlugin.optimizeFn
    [bmose]/[uglifyjs-webpack-plugin]/dist/index.js:186:16


  - Hook.js:35 AsyncSeriesHook.lazyCompileHook [as _callAsync]
    [bmose]/[tapable]/lib/Hook.js:35:21

  - Compilation.js:958 hooks.additionalAssets.callAsync.err
    [bmose]/[webpack]/lib/Compilation.js:958:36


  - Hook.js:35 AsyncSeriesHook.lazyCompileHook [as _callAsync]
    [bmose]/[tapable]/lib/Hook.js:35:21

  - Compilation.js:954 hooks.optimizeTree.callAsync.err
    [bmose]/[webpack]/lib/Compilation.js:954:32


Child html-webpack-plugin for "index.html":
     1 asset
    Entrypoint undefined = index.html
       [0] ./node_modules/lodash/lodash.js 213 bytes {0} [built] [failed] [1 error]
       [1] ./node_modules/html-webpack-plugin/lib/loader.js!./src/index.ejs 2.34 KiB {0} [built]

    ERROR in ./node_modules/lodash/lodash.js
    Module build failed: TypeError: Cannot read property 'babel' of undefined
        at Object.module.exports (C:\Users\bmose\Webpack\Dev Server\node_modules\babel-loader\lib\index.js:103:36)
     @ ./node_modules/html-webpack-plugin/lib/loader.js!./src/index.ejs 1:8-51
i ｢wdm｣: Failed to compile.

I beleive webpack's configuration files or node_modules may be outdated. I've tried everything in the forums but no luck as of yet. Any suggestions would be helpful, as the majority of individuals trying this video have already noted that the instructions and dependencies are outdated.

benjaminmosery
benjaminmosery
6,346 Points
benjaminmosery
benjaminmosery
6,346 Points

Current solutions implemented:

Updating Webpack: Removing/Upgrading files Remove the local webpack by typing npm uninstall webpack

Install the latest version of Webpack by typing npm install --save-dev webpack@latest

Install Babel-core by typing npm install --save babel-core

Note: You can update ALL files in a package.json file by typing ncu -a

NOTE: UPDATE NPM GLOBALLY BY TYPING npm i npm@latest -g

As of now, Webpack compiles the code but the browser on the page does not register changes made to the index.js file. Suggestions?