Error while running npm run dev command in react application

Question

I am new to React.js and i am trying to setup simple react application locally using webpack. while running the npm run dev command im getting below error.

Error getting in command prompt after running npm run dev

F:\ReactApp\react-webpack>npm run dev


> react-webpack@1.0.0 dev F:\ReactApp\react-webpack
> webpack -wd

error: option '-d, --devtool <value>' argument missing

npm ERR! code ELIFECCLE

npm ERR! errno 1

npm ERR! react-webpack@1.0.0 dev: `webpack -wd`

npm ERR! Exit status 1

npm ERR!

npm ERR! Failed at the react-webpack@1.0.0 dev script.

npm ERR! This is probably not a problem with npm. There is likely additional logging output above.

npm ERR! A complete log of this run can be found in:

npm ERR!     C:\Users\nilesh\AppData\Roaming\npm-cache\_logs\2020-10-30T08_33_31
_702Z-debug.log

Below is code in package.json file

{
  "name": "react-webpack",
  "version": "1.0.0",
  "description": "",
  "main": "webpack.config.js",
  "dependencies": {
    "babel-loader": "^6.4.1",
    "babel-preset-es2015": "^6.24.1",
    "babel-preset-react": "^6.24.1",
    "react": "^17.0.1",
    "react-dom": "^17.0.1",
    "webpack": "^5.3.2",
    "webpack-cli": "^4.1.0"
  },
  "devDependencies": {},
  "scripts": {
    "dev": "webpack -wd"
  },
  "author": "",
  "license": "ISC"
}

Below is code for the webpack.config.js file

const path = require('path');

module.exports = {
    entry : './js/app.js',
    output : {
        path: path.join(__dirname,'public'),
        filename: 'bundle.js'

    },
    module :{

        loaders: [
             {
                 test: /\.js$/,
                 exclude: /node_modules/,
                 loader:'babel-loader'
             }
        ]
    }
};

Code in app.js file

import React from "react";
import ReactDOM from "react-dom";

class HelloMessage extends React.Component {
  render() {
    return (
      <div>
        Hello {this.props.name}
      </div>
    );
  }
}
ReactDOM.render(
  <HelloMessage name="Taylor" />,
  document.getElementById('root')
);
   

Here my .babelrc file

{
    "presets":[
        "react",
        "es2015"
    ]
}

I have already install latest version of node.js

Thanks in Advance

Nilesh Kulkarni

Answer 1

You have to specify devtool, either by using -d devtools or by putting

module.exports = {
    ...
    devtool: 'source-map'
    ...
};

in your webpack.config.js .

If you chose to change the webpack.config.js file you don't need the -d option, if you use -d you must specify an argument after or it will throw an error.

Answer 2

As the error message says, you're missing a value for the -d (--devtool) argument. You can find a list of valid values on this list . You can add this directly to your webpack config as follows:

module.exports = {
    ...
    devtool: 'source-map' // or any other valid value here
    ...
};

You only need to have a value for devtool in the config if you want to use a value, similarly you only need to use the -d argument in the CLI if you are going to pass a value through the CLI. If you don't want to use a devtool, remove it from your webpack config and change your dev script to webpack -w . However, for development, you'll likely want sourcemaps, so I'd recommend using devtool: 'source-map' (you'll still want to change your dev script to webpack -w ).