Invalid webpack configuration object

Question

I wanted to access modules like this

var Builder = require('Builder');

instead of

var Builder = require('./app/components/Builder');

So I generated a

webpack.config.js

file using

webpack version 1.12.13

Here is my file

module.exports =
{
  entry :'./app/app.jsx',
  output :{
    path : __dirname,
    filename: './client/bundle.js'
  },
  resolve :{
    root : __dirname,
    alias : {

    },
    extensions : ['.js','.jsx']
  },
  module :{
    loaders : [
      {
          loader :'babel-loader',
          query :{
            presets:['react','es2015']
          },
          test :/\.jsx?$/,
          exclude :/(node_modules|bower_components)/
      }
    ]
  }
}

All was fine until i updated my

webpack to version 3.5.4

and run webpack i get this error in the resolve object

Invalid configuration object. Webpack has been initialised using a configuration object that does not match the API schema.
 - configuration.resolve has an unknown property 'root'. These properties are valid:
   object { alias?, aliasFields?, cachePredicate?, cacheWithContext?, descriptionFiles?, enforceExtension?, enforceModuleExtension?, extensions?, fileSystem?, mainFields?, mainFiles?, moduleExtensions?, modules?, plugins?, resolver?, symlinks?, unsafeCache?, useSyncFileSystemCalls? }

What is the problem and Which change do i have to make ?

Possible duplicate of Set base paths for my files for webpack — Michael Jungo
– Michael Jungo, Commented Aug 13, 2017 at 11:27

thomasmeadows · Accepted Answer · 2017-08-13 13:00:37Z

1

resolve.root is not a valid webpack configuration property. https://webpack.js.org/configuration/resolve/

All you have to do is remove root from the resolve object

module.exports =
{
  entry :'./app/app.jsx',
  output :{
    path : __dirname,
    filename: './client/bundle.js'
  },
  resolve :{
    alias : {

    },
    extensions : ['.js','.jsx']
  },
  module :{
    loaders : [
      {
          loader :'babel-loader',
          query :{
            presets:['react','es2015']
          },
          test :/\.jsx?$/,
          exclude :/(node_modules|bower_components)/
      }
    ]
  }
}

answered Aug 13, 2017 at 13:00

thomasmeadows

1,88113 silver badges15 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

thomasmeadows Over a year ago

Theres several ways to resolve paths. path.resolve is 1 way, you could use an aliases as well. What to do would depend on what your trying to accomplish at compile time in your app.

thomasmeadows Over a year ago

webpack.js.org/guides/migrating/…

henrybbosa Over a year ago

Thanks alot @thomasmeadows

Collectives™ on Stack Overflow

Invalid webpack configuration object

1 Answer 1

3 Comments

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Linked

Related