Collectives™ on Stack Overflow

Find centralized, trusted content and collaborate around the technologies you use most.

Teams

Q&A for work

Connect and share knowledge within a single location that is structured and easy to search.

I'm going through an online course and when i try to run my server i get this error but can't work out why:

/Applications/XAMPP/xamppfiles/htdocs/projects/distdesign/node_modules/webpack/lib/webpack.js:19
        throw new WebpackOptionsValidationError(webpackOptionsValidationErrors);
WebpackOptionsValidationError: Invalid configuration object. Webpack has been initialised using a configuration object that does not match the API schema.
 - configuration has an unknown property 'devtools'. These properties are valid:
   object { amd?, bail?, cache?, context?, dependencies?, devServer?, devtool?, entry, externals?, loader?, module?, name?, node?, output?, parallelism?, performance?, plugins?, profile?, recordsInputPath?, recordsOutputPath?, recordsPath?, resolve?, resolveLoader?, stats?, target?, watch?, watchOptions? }
   For typos: please correct them.
   For loader options: webpack 2 no longer allows custom properties in configuration.
     Loaders should be updated to allow passing options via loader options in module.rules.
     Until loaders are updated one can use the LoaderOptionsPlugin to pass these options to the loader:
     plugins: [
       new webpack.LoaderOptionsPlugin({
         // test: /\.xxx$/, // may apply this only for some modules
         options: {
           devtools: ...
 - configuration.resolve.extensions[0] should not be empty.
    at webpack (/Applications/XAMPP/xamppfiles/htdocs/projects/distdesign/node_modules/webpack/lib/webpack.js:19:9)
    at Object.<anonymous> (/Applications/XAMPP/xamppfiles/htdocs/projects/distdesign/server/index.js:9:27)
    at Module._compile (module.js:573:30)
    at loader (/Applications/XAMPP/xamppfiles/htdocs/projects/distdesign/node_modules/babel-register/lib/node.js:144:5)
    at Object.require.extensions.(anonymous function) [as .js] (/Applications/XAMPP/xamppfiles/htdocs/projects/distdesign/node_modules/babel-register/lib/node.js:154:7)
    at Module.load (module.js:507:32)
    at tryModuleLoad (module.js:470:12)
    at Function.Module._load (module.js:462:3)
    at Function.Module.runMain (module.js:609:10)
    at Object.<anonymous> (/Applications/XAMPP/xamppfiles/htdocs/projects/distdesign/node_modules/babel-cli/lib/_babel-node.js:154:22)
[nodemon] app crashed - waiting for file changes before starting...
This is my webpack config file:
import path from 'path';
export default {
    devtools: 'eval-source-map',
    entry: path.join(__dirname, '/client/index.js'),
    output: {
        path: '/'
    module: {
        loaders: [
                test: /\.js$/,
                include: path.join(__dirname, 'client'),
                loaders: [ 'babel' ]
    resolve: {
        extensions: [ '', '.js' ]
First, give to us the information about the name of your webpack config file. The default name is: webpack.config.babel.js
Second, I did some changes in your webpack file, before copy and paste the snippet run: npm install webpack@2.3 babel-preset-es2015 babel-preset-react babel-loader or 

yarn add webpack@2.3 babel-preset-es2015 babel-preset-reac babel-loader, after that try my snippet:
import path from 'path';
import webpack from 'webpack';
const config =  {
    devtools: 'eval-source-map',
    entry: path.join(__dirname, '/client/index.js'),
    output: {
        path: '/'
    module: {
        rules: [
                test: /\.jsx$/,
                include: path.join(__dirname, 'client'),
                loader: 'babel-loader',
                options: {
                  presets: [['es2015', { modules: false }], 'react'],
    resolve: {
        extensions: [ '', '.js' ]
module.exports = config;
If still not work, bring your package.json file and the output error.
I hope it helps
I met the same problem when I use the latest webpack and the latest webpack-dev-server.
I have used older version ,and the problem is fixed.
package.json
"devDependencies": {
    "webpack": "^1.12.13",
    "webpack-dev-server": "^1.14.1"
        
Thanks for contributing an answer to Stack Overflow!
Please be sure to answer the question. Provide details and share your research!
But avoid …
Asking for help, clarification, or responding to other answers.
Making statements based on opinion; back them up with references or personal experience.
To learn more, see our tips on writing great answers.