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!

Solution 1

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"],
        }]
    }
}

Solution 2

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:

1. Uninstall the latest webpack (2, if you just used npm install webpack)
2. Then in terminal run npm install -g [email protected] (she recommends using sudo npm install -g so it's up to you on that one to use sudo or not)
3. 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

4. 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']
               }
           }]
       }
   }
   

5. 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!

Solution 3

replace ~loaders~ by ~rules~

module: {
    loaders: [
        {

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

module: {
    rules: [
        {

Solution 4

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"]
        }
      }
    ]
  }
}

Solution 5

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.

View more solutions