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 Build Your First Application with webpack

Posted by Jim Withington
Jim Withington
12,025 Points

Getting an error that won't let me build

Hey hey!

I'm on the branch lesson 3 part of the webpack workshop, and I'm unable to get the build to work properly. I tried updating node and npm, and still no luck.

It looks like it's trying to run an npm program named webpack-treehouse-example, which of course isn't working. The unfortunately thing is that this means I can't do the rest of the workshop since there are no files built (like the index file, etc.) for me to edit.

Here's the shell output and the log file, in case either one helps.

Thanks!

WithyBook:webpack-workshop jimwithington$ npm run build

> webpack-treehouse-example@0.0.1 build /Users/jimwithington/webpack-workshop
> webpack --optimize-minimize

sh: webpack: command not found

npm ERR! Darwin 15.6.0
npm ERR! argv "/usr/local/bin/node" "/usr/local/bin/npm" "run" "build"
npm ERR! node v4.5.0
npm ERR! npm  v2.15.9
npm ERR! file sh
npm ERR! code ELIFECYCLE
npm ERR! errno ENOENT
npm ERR! syscall spawn
npm ERR! webpack-treehouse-example@0.0.1 build: `webpack --optimize-minimize`
npm ERR! spawn ENOENT
npm ERR!
npm ERR! Failed at the webpack-treehouse-example@0.0.1 build script 'webpack --optimize-minimize'.
npm ERR! This is most likely a problem with the webpack-treehouse-example package,
npm ERR! not with npm itself.
npm ERR! Tell the author that this fails on your system:
npm ERR!     webpack --optimize-minimize
npm ERR! You can get information on how to open an issue for this project with:
npm ERR!     npm bugs webpack-treehouse-example
npm ERR! Or if that isn't available, you can get their info via:
npm ERR!
npm ERR!     npm owner ls webpack-treehouse-example
npm ERR! There is likely additional logging output above.

0 info it worked if it ends with ok
1 verbose cli [ '/usr/local/bin/node',
1 verbose cli   '/usr/local/bin/npm',
1 verbose cli   'info',
1 verbose cli   'webpack-treehouse-example',
1 verbose cli   'versions' ]
2 info using npm@2.15.9
3 info using node@v4.5.0
4 silly mapToRegistry name webpack-treehouse-example
5 silly mapToRegistry using default registry
6 silly mapToRegistry registry https://registry.npmjs.org/
7 silly mapToRegistry data Result {
7 silly mapToRegistry   raw: 'webpack-treehouse-example',
7 silly mapToRegistry   scope: null,
7 silly mapToRegistry   name: 'webpack-treehouse-example',
7 silly mapToRegistry   rawSpec: '',
7 silly mapToRegistry   spec: 'latest',
7 silly mapToRegistry   type: 'tag' }
8 silly mapToRegistry uri https://registry.npmjs.org/webpack-treehouse-example
9 verbose request uri https://registry.npmjs.org/webpack-treehouse-example
10 verbose request no auth needed
11 info attempt registry request try #1 at 4:01:10 PM
12 verbose request id 80997ba87a569e45
13 http request GET https://registry.npmjs.org/webpack-treehouse-example
14 http 404 https://registry.npmjs.org/webpack-treehouse-example
15 verbose headers { 'content-type': 'application/json',
15 verbose headers   'cache-control': 'max-age=0',
15 verbose headers   'content-length': '2',
15 verbose headers   'accept-ranges': 'bytes',
15 verbose headers   date: 'Sat, 27 Aug 2016 23:01:11 GMT',
15 verbose headers   via: '1.1 varnish',
15 verbose headers   age: '0',
15 verbose headers   connection: 'keep-alive',
15 verbose headers   'x-served-by': 'cache-den6024-DEN',
15 verbose headers   'x-cache': 'MISS',
15 verbose headers   'x-cache-hits': '0',
15 verbose headers   'x-timer': 'S1472338871.182265,VS0,VE68',
15 verbose headers   vary: 'Accept-Encoding' }
16 silly get cb [ 404,
16 silly get   { 'content-type': 'application/json',
16 silly get     'cache-control': 'max-age=0',
16 silly get     'content-length': '2',
16 silly get     'accept-ranges': 'bytes',
16 silly get     date: 'Sat, 27 Aug 2016 23:01:11 GMT',
16 silly get     via: '1.1 varnish',
16 silly get     age: '0',
16 silly get     connection: 'keep-alive',
16 silly get     'x-served-by': 'cache-den6024-DEN',
16 silly get     'x-cache': 'MISS',
16 silly get     'x-cache-hits': '0',
16 silly get     'x-timer': 'S1472338871.182265,VS0,VE68',
16 silly get     vary: 'Accept-Encoding' } ]
17 verbose stack Error: Registry returned 404 for GET on https://registry.npmjs.org/webpack-treehouse-example
17 verbose stack     at makeError (/usr/local/lib/node_modules/npm/node_modules/npm-registry-client/lib/request.js:264:12)
17 verbose stack     at CachingRegistryClient.<anonymous> (/usr/local/lib/node_modules/npm/node_modules/npm-registry-client/lib/request.js:242:14)
17 verbose stack     at Request._callback (/usr/local/lib/node_modules/npm/node_modules/npm-registry-client/lib/request.js:172:14)
17 verbose stack     at Request.self.callback (/usr/local/lib/node_modules/npm/node_modules/request/request.js:200:22)
17 verbose stack     at emitTwo (events.js:87:13)
17 verbose stack     at Request.emit (events.js:172:7)
17 verbose stack     at Request.<anonymous> (/usr/local/lib/node_modules/npm/node_modules/request/request.js:1067:10)
17 verbose stack     at emitOne (events.js:82:20)
17 verbose stack     at Request.emit (events.js:169:7)
17 verbose stack     at IncomingMessage.<anonymous> (/usr/local/lib/node_modules/npm/node_modules/request/request.js:988:12)
18 verbose statusCode 404
19 verbose pkgid webpack-treehouse-example
20 verbose cwd /Users/jimwithington/webpack-workshop
21 error Darwin 15.6.0
22 error argv "/usr/local/bin/node" "/usr/local/bin/npm" "info" "webpack-treehouse-example" "versions"
23 error node v4.5.0
24 error npm  v2.15.9
25 error code E404
26 error 404 Registry returned 404 for GET on https://registry.npmjs.org/webpack-treehouse-example
26 error 404
26 error 404 'webpack-treehouse-example' is not in the npm registry.
26 error 404 You should bug the author to publish it (or use the name yourself!)
26 error 404
26 error 404 Note that you can also install from a
26 error 404 tarball, folder, http url, or git url.
27 verbose exit [ 1, true ]

11 Answers

Dennis O'Keeffe
Dennis O'Keeffe
32,820 Points
Dennis O'Keeffe
Dennis O'Keeffe
32,820 Points

For anyone taking this course at the moment running into issues, I'd double check these steps:

  1. npm and node are up to date (get the latest at the nodejs website)
  2. You may need to npm install --save-dev babel-core
  3. Do what Brendan suggest and remove the node_modules folder if you have already used npm install before updating

Also - just as a side note: for anyone who wants to use MAMP instead of the webpack-dev-server (in the next lesson) you can run webpack --watch or save that as a script if you would like and then point the MAMP server to the correct folder.

Sebastian Jung
Sebastian Jung
6,882 Points
Sebastian Jung
Sebastian Jung
6,882 Points

second tip helped! Thanks a lot!

William Keith
William Keith
17,827 Points
William Keith
William Keith
17,827 Points

installing babel-core allowed me to build without errors.

Alexander Melo
Alexander Melo
4,297 Points
Alexander Melo
Alexander Melo
4,297 Points

This worked thank you for submiting

Sarah Dillon
Sarah Dillon
10,704 Points
Sarah Dillon
Sarah Dillon
10,704 Points

The second tip is most helpful! Thank you

Adam Wilson
Adam Wilson
6,775 Points

Thanks, when I ran npm run build I got "ERROR in Cannot find module 'babel-core'". running your .2 suggestion fixed this.

Tomáš Komprs
Tomáš Komprs
14,057 Points
Tomáš Komprs
Tomáš Komprs
14,057 Points

Second work for me too! Thanks :D

Brendan Whiting
seal-mask
.a{fill-rule:evenodd;}techdegree seal-36
Brendan Whiting
Front End Web Development Techdegree Graduate 84,738 Points
Brendan Whiting
.a{fill-rule:evenodd;}techdegree seal-36
Brendan Whiting
Front End Web Development Techdegree Graduate 84,738 Points

I had a similar error, even though I had run npm install. I solved it by deleting the 'node modules' folder before running npm install again. I think maybe something went weird when I checked out the new branch, maybe it didn't totally replace and recreate all the files properly, I dunno. But deleting 'node modules' and having it download ALL the dependencies again from scratch did the trick.

jason chan
jason chan
31,009 Points
jason chan
jason chan
31,009 Points

npm install babel-core --save

Got it working too.

Ryan Moody
Ryan Moody
20,499 Points
Ryan Moody
Ryan Moody
20,499 Points

Yeah I got the same error. C'mon tree house...

Jim Withington
Jim Withington
12,025 Points
Jim Withington
Jim Withington
12,025 Points

Thanks y'all -- will try soon!

Sergei Panfilov
Sergei Panfilov
5,718 Points
Sergei Panfilov
Sergei Panfilov
5,718 Points

npm i -D babel-core will do the trick.

I have no idea why it's not listed in package.json dev dependencies.

Arpan Shukla
Arpan Shukla
266 Points
Arpan Shukla
Arpan Shukla
266 Points

This is the best solution. I am not sure why package.json does not have babel-core as one of its dev dependencies.

Chris Shaw
Chris Shaw
26,676 Points
Chris Shaw
Chris Shaw
26,676 Points

Hi Jim Withington,

Have you run the npm install command? If no, please do so as without the module dependencies the build command won't work.

hum4n01d
hum4n01d
25,493 Points
hum4n01d
hum4n01d
25,493 Points

Same issue. Thanks Dennis O'Keeffe

Blake Schwartz
Blake Schwartz
4,282 Points
Blake Schwartz
Blake Schwartz
4,282 Points

Same here - missing babel-core

jlampstack
jlampstack
23,932 Points
jlampstack
jlampstack
23,932 Points

Is there a more up to date work shop for this topic?

michael williams
michael williams
19,492 Points
michael williams
michael williams
19,492 Points

here is a more up too date package for webpack it is version 4.8.1
package gist and also the webpack.config.js to go with it. webpack gist