Invalid configuration object

[matt3188]

Hi there, I just installed the generator and created a new project with the following config:

Please choose your application name my-new-project
Which style language do you want to use? scss
Enable css module support? See https://github.com/gajus/react-css-modules for further info Yes
Enable postcss? Yes

Then ran npm start and got this error.

Invalid configuration object. Webpack has been initialised using a configuration object that does not match the API schema.
 - configuration has an unknown property 'postcss'. These properties are valid:
   object { amd?, bail?, cache?, context?, dependencies?, devServer?, devtool?, entry, externals?, loader?, module?, name?, node?, output?, performance?, plugins?, profile?, recordsInputPath?, recordsOutputPath?, recordsPath?, resolve?, resolveLoader?, stats?, target?, watch?, watchOptions? }
   For typos: please correct them.
   For loader options: webpack 2 no longer allows custom properties in configuration.
     Loaders should be updated to allow passing options via loader options in module.rules.
     Until loaders are updated one can use the LoaderOptionsPlugin to pass these options to the loader:
     plugins: [
       new webpack.LoaderOptionsPlugin({
         // test: /\.xxx$/, // may apply this only for some modules
         options: {
           postcss: ...
         }
       })
     ]

OS - OSX El Capitan
Node - 7.6.0
NPM - 4.3.0
Yeoman - 1.8.5

If you need anymore details please let me know.

[raza2022]

@stylesuxx first Thanks for Great Work!
have you sometimes within your tight schedule (obviously 👍 ) to look at this issue.
@matt3188 have you solved by any way?

[Mxxim]

I also have this issue. So I install [email protected], it still cant work. Which webpack version should I install?

Thank for your attention😊

[stylesuxx]

Crap, I thought I had all webpack 2 related issues. Also this seems to be bubbling up from the base generator.

Will check this asap.

For now, installing [email protected] may solve the problem.

[Mxxim]

I'm so sorry... when I exec npm start, it still cant work. And now happend other error:

/Users/sammy/Workspace/myProject/node_modules/webpack-dev-server/bin/webpack-dev-server.js:365
throw e;
^
TypeError: webpack.validateSchema is not a function
at new Server (/Users/sammy/Workspace/myProject/node_modules/webpack-dev-server/lib/Server.js:25:35)
at startDevServer (/Users/sammy/Workspace/myProject/node_modules/webpack-dev-server/bin/webpack-dev-server.js:358:12)
at processOptions (/Users/sammy/Workspace/myProject/node_modules/webpack-dev-server/bin/webpack-dev-server.js:322:3)
at Object. (/Users/sammy/Workspace/myProject/node_modules/webpack-dev-server/bin/webpack-dev-server.js:430:1)
at Module._compile (module.js:570:32)
at Object.Module._extensions..js (module.js:579:10)
at Module.load (module.js:487:32)
at tryModuleLoad (module.js:446:12)
at Function.Module._load (module.js:438:3)
at Module.runMain (module.js:604:10)

My package.json:

  "devDependencies": {
    "babel-core": "^6.7.6",
    "babel-eslint": "^7.1.0",
    "babel-loader": "^6.2.4",
    "babel-plugin-istanbul": "^3.0.0",
    "babel-plugin-transform-decorators-legacy": "^1.3.4",
    "babel-plugin-transform-object-rest-spread": "^6.8.0",
    "babel-polyfill": "^6.9.0",
    "babel-preset-airbnb": "^2.0.0",
    "babel-preset-es2015-native-modules": "^6.6.0",
    "babel-preset-react": "^6.5.0",
    "chai": "^3.5.0",
    "copyfiles": "^1.0.0",
    "css-loader": "^0.26.0",
    "enzyme": "^2.2.0",
    "eslint": "^3.0.0",
    "eslint-config-airbnb": "^13.0.0",
    "eslint-loader": "^1.3.0",
    "eslint-plugin-import": "^2.2.0",
    "eslint-plugin-jsx-a11y": "^2.2.0",
    "eslint-plugin-react": "^6.0.0",
    "file-loader": "^0.9.0",
    "karma": "^1.0.0",
    "karma-chai": "^0.1.0",
    "karma-coverage": "^1.0.0",
    "karma-junit-reporter": "^1.0.0",
    "karma-mocha": "^1.0.1",
    "karma-mocha-reporter": "^2.0.3",
    "karma-phantomjs-launcher": "^1.0.0",
    "karma-sinon": "^1.0.5",
    "karma-sourcemap-loader": "^0.3.7",
    "karma-webpack": "^1.7.0",
    "mocha": "^3.0.0",
    "node-sass": "^3.7.0",
    "null-loader": "^0.1.1",
    "phantomjs-prebuilt": "^2.1.7",
    "postcss": "^5.0.21",
    "postcss-loader": "^0.9.1",
    "react-addons-test-utils": "^15.0.1",
    "rimraf": "^2.5.2",
    "sass-loader": "^3.2.0",
    "sinon": "^1.17.3",
    "style-loader": "^0.13.1",
    "url-loader": "^0.5.7",
    "webpack-dev-server": "^2.1.0-beta"
  },
  "dependencies": {
    "cross-env": "^3.1.0",
    "react": "^15.0.1",
    "react-css-modules": "^3.7.10",
    "react-dom": "^15.0.1",
    "react-hot-loader": "^3.0.0-beta.6",
    "react-redux": "^5.0.3",
    "redux": "^3.6.0",
    "webpack": "^2.1.0-beta.6"
  }

The easiest way to avoid the issue without updating too much is to change dependency in package.json to "webpack-dev-server": "2.1.0-beta.10" instead of "webpack-dev-server": "^2.1.0-beta", it works!!!

[hnsylitao]

@Mxxim me too

[nicktobolski]

ack this is happening for me too.

[nicktobolski]

I removed postCss: [...] from my /conf/webpack/Base.js as a workaround, but does this mean I'll lose the postcss functionality? If so, how to get it back? Thanks!

[vikasraok]

+1

[MarcoScabbiolo]

In conf/webpack/Base import webpack

const webpack = require('webpack');

Remove the propertypostcss from the webpack configuration:

get defaultSettings() {
  return {
    ...
    postcss: function () {
      return [];
    }
    ...
  };
}

And instead add a plugin that will configure the postcss loader:

  plugins: [
    ...
    new webpack.LoaderOptionsPlugin({
      options: {
        context: __dirname,
        postcss: []
      }
    })
    ...
  ],

Note that you have to add the postcss packages you want to use in the array in the postcss property, like autoprefixer:

const autoprefixer = require('autoprefixer');
...
postcss: [ autoprefixer ]

This issue has been solved in the base generator in this pull request, but it's part of the 4.0 release that still needs some work. All help would be appreciated!