Configuration.resolve has an unknown property 'root'

Question

I get the following error :

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?, descriptionFiles?, enforceExtension?, enforceModuleExtension?, extensions?, fileSystem?, mainFields?, mainFiles?, moduleExtensions?, modules?, plugins?, resolver?, symlinks?, unsafeCache?, useSyncFileSystemCalls? }

I use webpack 2.3.2.

---

My webpack.config.js looks like this :

module.exports= {   entry:'./public/app.jsx',   output: {     path: __dirname,     filename:'./public/bundle.js'   },   resolve: {     root: __dirname,     alias:{       Mod1: 'public/components/mod1.jsx',       Mod2:'public/components/mod2.jsx',       Mod3: 'public/components/mod3.jsx'     },     extensions: ['*','.js','.jsx']   },   module :{     loaders:[{       loader :'babel-loader',       query :{         presets:['react','es2015','es2017']       },       test:/\.jsx?$/,       exclude:/(node_modules|bower_components)/     }]   } }; 

Answer 1

resolve.root is Webpack 1 configuration and doesn't exist for Webpack 2.

For Webpack 2 you can use resolve.modules: https://webpack.js.org/configuration/resolve/#resolve-modules

module.exports= {   entry:'./public/app.jsx',   output: {     path: __dirname,     filename:'./public/bundle.js'   },   resolve: {     modules: [__dirname, 'node_modules'],     alias:{       Mod1: 'public/components/mod1.jsx',       Mod2:'public/components/mod2.jsx',       Mod3: 'public/components/mod3.jsx'     },     extensions: ['*','.js','.jsx']   },   module :{     rules:[{       use : 'babel-loader',       query :{         presets:['react','es2015','es2017']       },       test: /\.jsx?$/,       exclude: /(node_modules|bower_components)/     }]   } }; 

I've also updated module.loaders -> module.rules as this is deprecated in Webpack 2.

Answer 2

Have you tried removing LINE 8? Does it through any errors?

As you've probably guessed it is throwing an error as you are trying to set a property which isn't valid.

There is a chance that the instructions you may have followed when configuring webpack is outdated.

Give it a go without LINE 8 and let me know if the problems persist and we can fix it together.