CODEWITHSUNDEEP
javascriptreactjswebpackbabeljs
Brian L.
Brian L.

Reputation: 81

Invalid configuration object error from Webpack 2.4.1

I've been trying to compile my React app with Webpack and I received an error:

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 am sure my files in the directory are in the correct place. Here is the rundown of both webpack.config.js and package.json:

package.json 

 {
  "name": "webpack_practice",
  "version": "1.0.0",
  "description": "Practicing webpack setup",
  "main": "server.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "start": "node server.js"
  },
  "author": "John Doe",
  "license": "ISC",
  "dependencies": {
    "express": "^4.15.2",
    "react": "^0.14.7",
    "react-dom": "^0.14.7"
  },
  "devDependencies": {
    "babel-core": "^6.5.1",
    "babel-loader": "^6.2.2",
    "babel-preset-es2015": "^6.5.0",
    "babel-preset-react": "^6.5.0",
    "webpack": "^2.4.1"
  }
}

webpack.config.js 

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

The error started when I added the alias under resolve.

Upvotes: 0

Views: 108

Answers (1)

jwoos
jwoos

Reputation: 149

resolve.root is a webpack 1 option - which has been deprecated now. You are encouraged to use webpack 2 (which is what your package.json shows).

Referring to: https://webpack.js.org/guides/migrating/#resolve-root-resolve-fallback-resolve-modulesdirectories, you can see that the option was removed in favor of the option modules.

Upvotes: 1

Related Questions