npm err missing script webpack-dev-server

Question

I'm making a Reactjs app with wepback and i can't figure out why npm run webpack-dev-server is not working.

I installed the package and even installed it globally. every time i'm getting the same error as mentioned.

my webpack.config.js:

var webpack = require('webpack');
var path = require('path');
var dev = require('webpack-dev-server');


var BUILD_DIR = path.resolve(__dirname, 'src/client/public');
var APP_DIR = path.resolve(__dirname, 'src/client/app');

var config = {
  entry: APP_DIR + '/index.js',
  output: {
    path: BUILD_DIR,
    filename: 'bundle.js'
  },
    devServer: {
    inline:true,
    port: 8008
  },
    module : {
        loaders : [
            {
                test : /\.jsx?/,
                include : APP_DIR,
                loader : 'babel-loader'
            },
            {
                test: /\.css$/,
                loader: 'style-loader!css-loader'
            }
        ]
    }
};

module.exports = config;

and my package.json:

{
  "name": "redditgallery",
  "version": "1.0.0",
  "description": "Wix project",
  "main": "index.js",
  "scripts": {
    "dev": "webpack -d --watch",
    "build": "webpack -p",
    "ser": "wepback-dev-server -d"
  },
  "repository": {
    "type": "git",
    "url": "git+https://github.com/tamirhuber/RedditGallery.git"
  },
  "author": "Tamir Huber",
  "license": "UNLICENSED",
  "bugs": {
    "url": "https://github.com/tamirhuber/RedditGallery/issues"
  },
  "homepage": "https://github.com/tamirhuber/RedditGallery#readme",
  "dependencies": {
    "babel-loader": "^7.0.0",
    "babel-preset-es2015": "^6.24.1",
    "babel-preset-react": "^6.24.1",
    "react": "^15.5.4",
    "react-dom": "^15.5.4",
    "webpack": "^2.4.1"
  },
  "devDependencies": {
    "babel-core": "^6.24.1",
    "babel-loader": "^7.0.0",
    "css-loader": "^0.28.0",
    "style-loader": "^0.16.1"
  }
}

this is the error:

npm ERR! Windows_NT 10.0.14393
npm ERR! argv "C:\\Program Files\\nodejs\\node.exe" "C:\\Program Files\\nodejs\\node_modules\\npm\\bin\\npm-cli.js" "run" "webpack-dev-server"
npm ERR! node v6.10.2
npm ERR! npm  v3.10.10

npm ERR! missing script: webpack-dev-server
npm ERR!
npm ERR! If you need help, you may report this error at:
npm ERR!     <https://github.com/npm/npm/issues>

npm ERR! Please include the following file with any support request:
npm ERR!     C:\redditGallery\npm-debug.log

any thoughts?

Solution 1

replace your script tag with this in package.json and run it with npm start

"start": "webpack-dev-server --hot"

install the dependency using npm install webpack-dev-server --save

Solution 2

The webpack-dev-server is run through webpack when you start webpack. You don't need to start the dev server specifically.

When you type npm run whatever npm goes into your package.json file and looks for the scripts part. There it will look for whatever and run that command. You don't have any webpack-dev-server in your scripts, that's why it's saying it can't find it.

If you want to be able to type npm run webpack-dev-server you have to put webpack-dev-server inside your scripts in package.json. I think you can also simply run webpack-dev-server if you install it globally like this npm install webpack-dev-server -g

Solution 3

You might need so install webpack and webpack-dev-server for your script to work. So:

npm install webpack webpack-dev-server --save-dev

Then everything you have installed locally and globally you can use it when you run any of the npm scripts, as the .bin/ folder gets mounted in the process.

Another thing you have to have in mind is, if the webpack config is into another folder, you need to pass the --config path/to/config parameter.

npm run ser

Run the command above and it should work.

Comments

[Suraj Rao]

you have "ser": "wepback-dev-server -d" and no webpack-dev-server in devdependencies...

[Jozcar]

I was having the same issue, and I used this: devServer: { contentBase: path.join(__dirname, "dist"), compress: true, port: 9000 } in my webpack.config file and it work.