CODEWITHSUNDEEP
javascriptjsonreactjsnpmwebpack
Indu Pillai
Indu Pillai

Reputation: 377

Invalid configuration object in webpack

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!

Upvotes: 21

Views: 36842

Answers (11)

Kmaschta
Kmaschta

Reputation: 2429

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

Upvotes: 2

Shakiba Moshiri
Shakiba Moshiri

Reputation: 23774

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

Upvotes: 0

Leo Leao
Leo Leao

Reputation: 161

replace ~loaders~ by ~rules~

module: {
    loaders: [
        {

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

module: {
    rules: [
        {

Upvotes: 4

Jean-Louis Brunet
Jean-Louis Brunet

Reputation: 309

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

Upvotes: 20

Dushan
Dushan

Reputation: 762

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'),

Upvotes: 0

Rakesh Jain
Rakesh Jain

Reputation: 235

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

Upvotes: 0

paulular
paulular

Reputation: 21

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

Upvotes: 1

y4h2
y4h2

Reputation: 3383

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

Upvotes: 0

rgjr
rgjr

Reputation: 59

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!

Upvotes: 5

the_haystacker
the_haystacker

Reputation: 1625

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'
    }
};

Upvotes: 0

Naveed Aheer
Naveed Aheer

Reputation: 1825

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.

Upvotes: 1

Related Questions