Collectives™ on Stack Overflow
Find centralized, trusted content and collaborate around the technologies you use most.
Learn more about Collectives
Teams
Q&A for work
Connect and share knowledge within a single location that is structured and easy to search.
Learn more about Teams
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!
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"],
–
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!
Apparently the word loaders here was replaced by rules, so the correct should be:
module: {
rules: [
–
–
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"]
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.
–
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
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'
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"
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"
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.
