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 trialbenjaminmosery
6,346 PointsWebpack 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
6,346 Pointsbenjaminmosery
6,346 PointsCurrent 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?