Invalid configuration object in webpack

Question

I am following Lynda.com - React.js essential training by Eve Porcello. In the video "Building with Webpack", I followed the steps author described exactly, but the "webpack" command failed giving the following error,

Invalid configuration object. Webpack has been initialised using a configuration object that does not match the API schema. - configuration.output.path: The provided value "dist/assets" is not an absolute path!

Following are my webpack.config.js and package.json files.

webpack.config.js

var webpack = require("webpack");

module.exports = {
  entry: "./src/index.js",
  output: {
    path: "dist/assets",
    filename: "bundle.js",
    publicPath: "assets"
  },
  devServer: {
    inline: true,
    contentBase: "./dist",
    port: 3000
  },
  module: {
    loaders: [
      {
        test: /\.js$/,
        exclude: /(node_modules)/,
        loader: "babel-loader",
        query: {
          presets: ["latest", "stage-0", "react"]
        }
      }
    ]
  }
}

package.json

{
  "name": "react-essential",
  "version": "1.0.0",
  "description": "A project focusing on React and related tools",
  "main": "index.js",
  "scripts": {
    "start": "httpster -d ./dist -p 3000"
  },
  "author": "Indu Pillai",
  "license": "MIT",
  "devDependencies": {
    "babel-cli": "^6.18.0",
    "babel-loader": "^6.4.1",
    "babel-preset-latest": "^6.16.0",
    "babel-preset-react": "^6.16.0",
    "babel-preset-stage-0": "^6.16.0",
    "webpack": "^2.3.2",
    "webpack-dev-server": "^2.4.2"
  }
}

I repeated the steps again and again, but it's not working. I'm pretty new to this webpack thing, so I'm not able to find out what the problem really is, and what kind of absolute path it requires. I also tried an absolute path suggested by some answer to another (similar) question, but that didn't work.

Thank you!

Possible duplicate of [Invalid configuration object output.path is not an absolute path](http://stackoverflow.com/questions/43028487/invalid-configuration-object-output-path-is-not-an-absolute-path) — Michael Jungo, Mar 27 '17 at 19:59

score 20 · Answer 1 · edited Oct 13 '17 at 22:39

20

This will compile with latest webpack - as of Apr 10, 2017:

var webpack = require("webpack");

module.exports = {
    entry: __dirname + "/src/index.js",
    output: {
        path: __dirname + "/dist/assets",
        filename: "bundle.js",
        publicPath: "assets"
    },
    devServer: {
        inline: true,
        contentBase: __dirname + "/dist",
        port: 3000
    },
    module: {
        rules: [{
            test: /\.js$/,
            loader: ["babel-loader"],
        }]
    }
}

edited Oct 13 '17 at 22:39

Gene Parcellano

5,799
5
36
43

answered Apr 11 '17 at 02:50

Jean-Louis Brunet

309
1
3

I had to remove the [ ] around the "babel-loader". – Ctpelnar1988 Sep 23 '17 at 20:33
"replace ~loaders~ by ~rules~", as Leo Leao says below, is the actual answer. This code block doesn't explain that at all. – Andrew Koster Apr 03 '19 at 20:53

rgjr · Answer 2 · 2017-04-11T17:40:15.410

I am doing the same course as you and I had to do the following to get Webpack to output the bundle.js file correctly:

Uninstall the latest webpack (2, if you just used npm install webpack)
Then in terminal run npm install -g webpack@1.13.3 (she recommends using sudo npm install -g so it's up to you on that one to use sudo or not)
The next issue few issues webpack was throwing may only apply to me but I had to require('path') because I got non-resolving path errors, and also had to npm install babel-loader because it wasn't being loaded through the package.json file for whatever reason, that also needed a path.resolve addition for the node_modules folder

My webpack.config file looks like the following now:

const webpack = require('webpack');
const path = require('path');

module.exports = {
    entry: path.resolve(__dirname, './src/index'),
    output: {
        path: path.resolve(__dirname, './dist/assets'),
        filename: 'bundle.js',
        publicPath: 'assets'
    },
    devServer: {
        inline: true,
        contentBase: path.resolve(__dirname, './dist'),
        port: 3000
    },
    module: {
        loaders: [{
            test: /\.js$/,
            exclude: /(node_modules)/,
            loader: path.resolve(__dirname, './node_modules/babel-loader'),
            query: {
                presets: ['latest', 'stage-0', 'react']
            }
        }]
    }
}

Finally, running webpack --display-error-details showed me what the errors were, but the config file I pasted here worked for me in the end.

It should be noted that this will (hopefully) allow you to finish the course itself, but it won't help you learn what was updated or needs to be migrated in order to stay current and use Webpack 2. There are other answers here that deal with migrating that should be looked into as well.

Hope this helps you!

score 4 · Answer 3 · answered May 14 '18 at 23:54

4

replace ~loaders~ by ~rules~

module: {
    loaders: [
        {

Apparently the word loaders here was replaced by rules, so the correct should be:

module: {
    rules: [
        {

answered May 14 '18 at 23:54

Leo Leao

161
1
5

THANK YOU! There are old examples all over the Internet which use "loaders" instead of "rules", and this is the fix. – Andrew Koster Apr 03 '19 at 20:51
For anyone doing the full stack javascript tutorial with Sumar Buma who ran into this problem this fixed it for me. – ANimator120 Sep 03 '20 at 07:04

Kmaschta · Answer 4 · 2018-10-01T14:04:56.197

2

This tutoriel was done with the version 1 of Webpack but you uses a most recent version 2.

You can follow this migration guide to make your code run: https://webpack.js.org/migrate/3/

Here is your upgraded configuration

var webpack = require("webpack");
var folder = __dirname;

module.exports = {
  entry: "./src/index.js",
  output: {
    path: folder + "dist/assets",
    filename: "bundle.js",
    publicPath: "/assets"
  },
  devServer: {
    inline: true,
    contentBase: folder + "dist",
    port: 3000
  },
  module: {
    rules: [
      {
        test: /\.js$/,
        exclude: /(node_modules)/,
        use: "babel-loader",
        query: {
          presets: ["latest", "stage-0", "react"]
        }
      }
    ]
  }
}

edited Oct 01 '18 at 14:04

answered Mar 27 '17 at 14:57

Kmaschta

2,369
1
18
36

What was the error? I could have make a mistake with my code. – Kmaschta Mar 27 '17 at 16:49
1

Migration Guide linked to is a 404. – Phil Sep 30 '18 at 05:58
I've updated the link to the new migration guide: https://webpack.js.org/migrate/3/ – Kmaschta Oct 01 '18 at 14:05

score 1 · Answer 5 · answered Mar 27 '17 at 15:03

1

Webpack is little difficult than create-react-app. the simplest and easiest way to create react projects by using following commands by https://facebook.github.io/react/docs/installation.html

npm install -g create-react-app
create-react-app hello-world
cd hello-world
npm start

You can follow all react code from the course but expect webpack because create-react-app compile jsx code and do every thing of webpack etc.

answered Mar 27 '17 at 15:03

Naveed Aheer

1,715
6
25
40

Thank You, I know that method, but I want to follow the tutorial in the exact steps they did. – Indu Pillai Mar 27 '17 at 18:35

score 1 · Answer 6 · answered May 04 '17 at 22:15

As a side note, in the exercise files, the instructor uses this syntax for the babel loader:

loaders: [
    {
        test: /\.js$/,
        exclude: /(node_modules)/,
        loader: ["babel-loader"],
        query: {
            presets: ["latest", "stage-0", "react"]
        }
    },
]

which fails on webpack 2.5.0 with an error:

Error: options/query cannot be used with loaders (use options for each array item)

This is solved by removing the brackets around "babel-loader":

loader: "babel-loader", //no brackets - not an array

or by specifying the loader and its corresponding options through the "use" syntax:

loaders: [
    {
        test: /\.js$/,
        exclude: /(node_modules|bower_components)/,
        use: {
            loader: 'babel-loader',
            options: {
                presets: ['latest', 'stage-0', 'react']
            }
        }
    }
]

Hopefully they get that fixed over there at Lynda! These new technologies evolve so rapidly! For more info on the babel-loader: https://github.com/babel/babel-loader

score 0 · Answer 7 · answered Apr 02 '17 at 14:17

when you migrate into new version of webpack, this error will occur. For solving this your have to provide absolute path to your directory like this

module.exports = {
    entry: __dirname + '/src/index.js',
    output: {
        path: __dirname + '/dist',
        filename: 'bundle.js'
    }
};

score 0 · Answer 8 · answered Apr 18 '17 at 02:50

You need to define the output.path as absolute path

You can add the following line in the front of webpack.config.js

 var path = require('path')

and change the output to the following

 output: {
   path: path.resolve(__dirname, "dist/assets"),
   filename: "bundle.js",
   publicPath: "assets"
 }

score 0 · Answer 9 · answered Aug 08 '17 at 19:57

To make this work with latest version of webpack v3 you need to make few chages to webpack.config.js file. Your code should look like this after updating

            var webpack = require("webpack");
            var path = require('path')

            module.exports = {
                entry: path.resolve(__dirname + "/src/index.js"),
                output: {
                    path: path.resolve(__dirname + "/dist/assets"),
                    filename: "bundle.js",
                    publicPath: "assets"
                },
                devServer: {
                    inline: true,
                    contentBase: __dirname + '/dist',
                    port: 3000
                },
                module: {
                    loaders: [
                        {
                            test: /\.js$/,
                            exclude: /(node_modules)/,
                    use: {
                    loader: "babel-loader",
                            options: {
                                presets: ["latest", "stage-0", "react"]
                            }
                        }
                }
                    ]
                }
            }

and your package.json file should look like this

    {
      "name": "activity-counter-application",
      "version": "1.0.0",
      "description": "A project focusing on building Activity Counter using React and related tools",
      "main": "./index.js",
      "scripts": {
        "start": "./node_modules/.bin/webpack-dev-server"
      },
      "author": "RJ",
      "license": "MIT",
      "devDependencies": {
        "babel-cli": "^6.24.1",
        "babel-core": "^6.25.0",
        "babel-loader": "^7.1.1",
        "babel-preset-latest": "^6.24.1",
        "babel-preset-react": "^6.24.1",
        "babel-preset-stage-0": "^6.24.1",
        "webpack": "^3.5.1",
        "webpack-dev-server": "^2.7.0"
      },
      "dependencies": {
        "react": "^15.6.1",
        "react-dom": "^15.6.1"
      }
    }

Dushan · Answer 10 · 2017-08-25T07:02:56.167

0

Make sure that you added the const path = require('path'); to the top of your webpack.config.js file and path should be like path: path.resolve(__dirname, 'dist/assets'),

edited Aug 25 '17 at 07:02

answered Aug 25 '17 at 06:57

Dushan

672
7
13

score 0 · Answer 11 · answered Jul 10 '18 at 12:00

I had the same problem and a little more. So I created a shell script to make the installation process simpler and faster.

for Linux Users

try this bash script auto_conf_wb and it

downloads
installs
configure webpack
configure babel
configure sever

for you.

Note that is only for using ES6+, webpack, babel together.

Invalid configuration object in webpack

11 Answers11