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

Development Tools Automating Your Development with webpack Dev Server

Tyler Laredo
Tyler Laredo
1,844 Points

"nmp start" command not working

I'm getting the following error after typing "nmp start" in the command line:

npm ERR! Darwin 16.3.0 npm ERR! argv "/usr/local/bin/node" "/usr/local/bin/npm" "start" npm ERR! node v6.9.4 npm ERR! npm v3.10.10 npm ERR! file /Users/tylerlaredo/Documents/webpack-workshop/package.json npm ERR! code EJSONPARSE

npm ERR! Failed to parse json npm ERR! Unexpected token 's' at 6:6 npm ERR! "start: webpack-dev-server" npm ERR! ^ npm ERR! File: /Users/tylerlaredo/Documents/webpack-workshop/package.json npm ERR! Failed to parse package.json data. npm ERR! package.json must be actual JSON, not just JavaScript. npm ERR! npm ERR! This is not a bug in npm. npm ERR! Tell the package author to fix their package.json file. JSON.parse

npm ERR! Please include the following file with any support request: npm ERR! /Users/tylerlaredo/Documents/webpack-workshop/npm-debug.log

PoJung Chen
PoJung Chen
5,856 Points

I face the same issue.

9 Answers

Blake Schwartz
Blake Schwartz
4,282 Points

This fixed it: the package.json we're supplied with lists webpack at ^1.13, and webpack-dev-server at ^1.14. I replaced webpack with the version from the setting-up-react-with-webpack package.json:

"webpack": "^1.14.0",

re-ran npm install, and now it works. I figured this out by googling: http://stackoverflow.com/questions/40379139/cannot-find-module-webpack-bin-config-yargs Note that webpack version 2 is now released.

PoJung Chen
PoJung Chen
5,856 Points

Thanks, this solution works for me!

If you are on ubuntu, you can have hard time to run command 'npm start' . You can try to fix it like this

"start": "./node_modules/.bin/webpack --config webpack.config.js --watch"
Andrew Dibb
Andrew Dibb
7,722 Points

I was having trouble as well. Updated to package.json found on repo. And dont forget to

npm install --save-dev babel-core

Here's my package.json:

{
  "name": "webpack-treehouse-example",
  "version": "0.0.1",
  "scripts": {
    "build": "webpack --optimize-minimize",
    "start": "webpack-dev-server"
  },
  "devDependencies": {
    "babel-core": "^6.24.0",
    "babel-loader": "^6.2.4",
    "babel-preset-es2015": "^6.9.0",
    "babel-preset-stage-2": "^6.11.0",
    "html-webpack-plugin": "^2.22.0",
    "node-sass": "^3.8.0",
    "webpack": "^1.13.1",
    "webpack-dev-server": "^1.14.1"
  },
  "dependencies": {
    "jquery": "^3.1.0"
  }
}

Worked for me. Thanks!

In package.json, the start script should be like this:

"start": "webpack-dev-server"

Or possibly with a comma at the end if there are more scripts following. Basically, make sure the file is valid JSON.

Blake Schwartz
Blake Schwartz
4,282 Points

I'm also getting this error (although I'm on windows.) I just completed the "setting up a react app with webpack" video series with Guil Henandez, where we also used webpack with an npm start script, and that ran just fine (this evening) so I don't know what the deal is. I tried re-installing deps and still not working.

Blake Schwartz
Blake Schwartz
4,282 Points

Here is my package.json:

{
  "name": "webpack-treehouse-example",
  "version": "0.0.1",
  "scripts": {
    "build": "webpack --optimize-minimize",
    "start": "webpack-dev-server"
  },
  "devDependencies": {
    "babel-loader": "^6.2.4",
    "babel-preset-es2015": "^6.9.0",
    "babel-preset-stage-2": "^6.11.0",
    "css-loader": "^0.23.1",
    "html-webpack-plugin": "^2.22.0",
    "node-sass": "^3.8.0",
    "sass-loader": "^4.0.0",
    "style-loader": "^0.13.1",
    "webpack": "^1.13.1",
    "webpack-dev-server": "^2.3.0"
  },
  "dependencies": {
    "jquery": "^3.1.0"
  }
}

And webpack.config.js:

var HtmlWebpackPlugin = require("html-webpack-plugin");

var webpackConfig = {
    entry: "./src/index.js",
    output: {
        path: "build",
        filename: "bundle.js"
    },
    module: {
        loaders: [
            {
                loader: "babel-loader",
                test: /\.js$/
            }
        ]
    },
    plugins: [
        new HtmlWebpackPlugin({
            template: "src/index.ejs"
        })
    ]
};

module.exports = webpackConfig;
Amante Reale
Amante Reale
330 Points

Thank you so much saidakhmedbayev! That worked great :)

Alyssa Paulette
seal-mask
.a{fill-rule:evenodd;}techdegree
Alyssa Paulette
Full Stack JavaScript Techdegree Student 4,573 Points

saidakhmedbayev's solution helped get rid of the errors, and webpack-dev-server seems to run, but I can't make a connection on localhost:8080

Ference Bodie
Ference Bodie
4,324 Points

hi people, By running npm start I got an error like this: TypeError: webpack.validateSchema is not a function I have tried different solutions but I am not able to fix it.. Re-installing did not work, I also tried to change te version and npm install --save-dev babel-core did not work..

Can someone help me? I am really stuck.

Thanks in advance