Issue with webpack configuration

Question

Issue with webpack configuration

valyefimov opened this issue 8 years ago · comments

Just downloaded the latest version and when running npm start command get this

> npm run server:dev


> angular2-webpack-starter@5.0.5 server:dev /development/angular2-webpack-starter
> webpack-dev-server --config config/webpack.dev.js --progress --profile --watch --content-base src/


/www/development/angular2-webpack-starter/node_modules/webpack/lib/webpack.js:16
        throw new WebpackOptionsValidationError(webpackOptionsValidationErrors);
        ^
WebpackOptionsValidationError: Invalid configuration object. Webpack has been initialised using a configuration object that does not match the API schema.
 - configuration has an unknown property 'debug'. These properties are valid:
   object { amd?, bail?, cache?, context?, dependencies?, devServer?, devtool?, entry, externals?, loader?, module?, name?, node?, output?, 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({
         options: {
           debug: ...
         }
       })
     }
 - configuration.module has an unknown property 'postLoaders'. These properties are valid:
   object { exprContextCritical?, exprContextRecursive?, exprContextRegExp?, exprContextRequest?, loaders?, noParse?, rules?, unknownContextCritical?, unknownContextRecursive?, unknownContextRegExp?, unknownContextRequest?, wrappedContextCritical?, wrappedContextRecursive?, wrappedContextRegExp? }
   Options affecting the normal modules (`NormalModuleFactory`).
 - configuration.node['crypto'] should be one of these:
   false | true | "mock"
 - configuration.node.global should be a boolean.
 - configuration.resolve has an unknown property 'modulesDirectories'. These properties are valid:
   object { alias?, aliasFields?, cachePredicate?, descriptionFiles?, enforceExtension?, enforceModuleExtension?, extensions?, fileSystem?, mainFields?, mainFiles?, moduleExtensions?, modules?, plugins?, resolver?, symlinks?, unsafeCache? }
 - configuration.resolve.extensions[0] should not be empty.
    at webpack (/development/angular2-webpack-starter/node_modules/webpack/lib/webpack.js:16:9)
    at processOptions (/development/angular2-webpack-starter/node_modules/webpack-dev-server/bin/webpack-dev-server.js:269:17)
    at Object.<anonymous> (/www/development/angular2-webpack-starter/node_modules/webpack-dev-server/bin/webpack-dev-server.js:297:1)
    at Module._compile (module.js:556:32)
    at Object.Module._extensions..js (module.js:565:10)
    at Module.load (module.js:473:32)
    at tryModuleLoad (module.js:432:12)
    at Function.Module._load (module.js:424:3)
    at Module.runMain (module.js:590:10)
    at run (bootstrap_node.js:394:7)
    at startup (bootstrap_node.js:149:9)
    at bootstrap_node.js:509:3

Niyaz Hussain · Answer 1 · Thu Sep 22 2016 00:27:35 GMT+0800 (China Standard Time)

Might be your webpack node_modules updated to latest version , so please refer the new webpack conffig methods

Christian Ja · Answer 2 · Thu Sep 22 2016 01:50:16 GMT+0800 (China Standard Time)

#1018 should fix this temporary

Shahinur Islam · Answer 3 · Thu Sep 22 2016 11:35:38 GMT+0800 (China Standard Time)

Uninstall the latest webpack version and install "webpack": "2.1.0-beta.21" to solve the issue.

li.li · Answer 4 · Thu Sep 22 2016 11:41:16 GMT+0800 (China Standard Time)

similar issue here,

        throw new WebpackOptionsValidationError(webpackOptionsValidationErrors);
        ^
WebpackOptionsValidationError: Invalid configuration object. Webpack has been initialised using a configuration object that does not match the API schema.
 - configuration has an unknown property 'tslint'. These properties are valid:
   object { amd?, bail?, cache?, context?, dependencies?, devServer?, devtool?, entry, externals?, loader?, module?, name?, node?, output?, 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: {
           tslint: ...
         }
       })
     }
 - configuration.module has an unknown property 'postLoaders'. These properties are valid:
   object { exprContextCritical?, exprContextRecursive?, exprContextRegExp?, exprContextRequest?, loaders?, noParse?, rules?, unknownContextCritical?, unknownContextRecursive?, unknownContextRegExp?, unknownContextRequest?, wrappedContextCritical?, wrappedContextRecursive?, wrappedContextRegExp? }
   Options affecting the normal modules (`NormalModuleFactory`).
 - configuration.node.global should be a boolean.
 - configuration.resolve has an unknown property 'modulesDirectories'. These properties are valid:
   object { alias?, aliasFields?, cachePredicate?, descriptionFiles?, enforceExtension?, enforceModuleExtension?, extensions?, fileSystem?, mainFields?, mainFiles?, moduleExtensions?, modules?, plugins?, resolver?, symlinks?, unsafeCache? }
 - configuration.resolve.extensions[0] should not be empty.
    at webpack (/Users/markli/dev/lili/angular2-webpack-starter/node_modules/webpack/lib/webpack.js:16:9)
    at processOptions (/Users/markli/dev/lili/angular2-webpack-starter/node_modules/webpack-dev-server/bin/webpack-dev-server.js:269:17)
    at Object.<anonymous> (/Users/markli/dev/lili/angular2-webpack-starter/node_modules/webpack-dev-server/bin/webpack-dev-server.js:297:1)
    at Module._compile (module.js:556:32)
    at Object.Module._extensions..js (module.js:565:10)
    at Module.load (module.js:473:32)
    at tryModuleLoad (module.js:432:12)
    at Function.Module._load (module.js:424:3)
    at Module.runMain (module.js:590:10)
    at run (bootstrap_node.js:394:7)
    at startup (bootstrap_node.js:149:9)
    at bootstrap_node.js:509:3

node v6.6.0
npm v3.10.3
webpack v2.1.0-beta.21

Shahinur Islam · Answer 5 · Thu Sep 22 2016 12:17:30 GMT+0800 (China Standard Time)

@lili21 could i see your pakage.json file??

li.li · Answer 6 · Thu Sep 22 2016 12:19:18 GMT+0800 (China Standard Time)

{
  "name": "angular2-webpack-starter",
  "version": "5.0.5",
  "description": "An Angular 2 Webpack Starter kit featuring Angular 2 (Router, Http, Forms, Services, Tests, E2E, Coverage), Karma, Protractor, Jasmine, Istanbul, TypeScript, and Webpack by AngularClass",
  "keywords": [
    "angular2",
    "webpack",
    "typescript"
  ],
  "author": "Patrick Stapleton <patrick@angularclass.com>",
  "homepage": "https://github.com/angularclass/angular2-webpack-starter",
  "license": "MIT",
  "scripts": {
    "build:dev": "webpack --config config/webpack.dev.js --progress --profile",
    "build:docker": "npm run build:prod && docker build -t angular2-webpack-start:latest .",
    "build:prod": "webpack --config config/webpack.prod.js  --progress --profile --bail",
    "build": "npm run build:dev",
    "ci": "npm run lint && npm test && npm run e2e",
    "clean:dist": "npm run rimraf -- dist",
    "clean:install": "npm set progress=false && npm install",
    "clean:start": "npm start",
    "clean": "npm cache clean && npm run rimraf -- node_modules doc coverage dist",
    "docker": "docker",
    "docs": "npm run typedoc -- --options typedoc.json --exclude '**/*.spec.ts' ./src/",
    "e2e:live": "npm run e2e -- --elementExplorer",
    "e2e": "npm run protractor",
    "github-deploy:dev": "webpack --config config/webpack.github-deploy.js --progress --profile --github-dev",
    "github-deploy:prod": "webpack --config config/webpack.github-deploy.js --progress --profile --github-prod",
    "github-deploy": "npm run github-deploy:dev",
    "lint": "npm run tslint \"src/**/*.ts\"",
    "postversion": "git push && git push --tags",
    "prebuild:dev": "npm run clean:dist",
    "prebuild:prod": "npm run clean:dist",
    "preclean:install": "npm run clean",
    "preclean:start": "npm run clean",
    "pree2e": "npm run webdriver:update -- --standalone",
    "preversion": "npm test",
    "protractor": "protractor",
    "rimraf": "rimraf",
    "server:dev:hmr": "npm run server:dev -- --inline --hot",
    "server:dev": "webpack-dev-server --config config/webpack.dev.js --progress --profile --watch --content-base src/",
    "server:prod": "http-server dist --cors",
    "server": "npm run server:dev",
    "start:hmr": "npm run server:dev:hmr",
    "start": "npm run server:dev",
    "test": "karma start",
    "tslint": "tslint",
    "typedoc": "typedoc",
    "version": "npm run build",
    "watch:dev:hmr": "npm run watch:dev -- --hot",
    "watch:dev": "npm run build:dev -- --watch",
    "watch:prod": "npm run build:prod -- --watch",
    "watch:test": "npm run test -- --auto-watch --no-single-run",
    "watch": "npm run watch:dev",
    "webdriver-manager": "webdriver-manager",
    "webdriver:start": "npm run webdriver-manager start",
    "webdriver:update": "npm run webdriver-manager update",
    "webpack-dev-server": "webpack-dev-server",
    "webpack": "webpack"
  },
  "dependencies": {
    "@angular/common": "2.0.0",
    "@angular/compiler": "2.0.0",
    "@angular/core": "2.0.0",
    "@angular/forms": "^2.0.0",
    "@angular/http": "2.0.0",
    "@angular/platform-browser": "2.0.0",
    "@angular/platform-browser-dynamic": "2.0.0",
    "@angular/platform-server": "2.0.0",
    "@angular/router": "3.0.0",
    "@angularclass/conventions-loader": "^1.0.2",
    "@angularclass/hmr": "~1.2.0",
    "@angularclass/hmr-loader": "~3.0.2",
    "@angularclass/request-idle-callback": "^1.0.7",
    "@angularclass/webpack-toolkit": "^1.3.3",
    "assets-webpack-plugin": "^3.4.0",
    "core-js": "^2.4.1",
    "http-server": "^0.9.0",
    "ie-shim": "^0.1.0",
    "rxjs": "5.0.0-beta.12",
    "zone.js": "~0.6.17"
  },
  "devDependencies": {
    "@types/core-js": "^0.9.28",
    "@types/hammerjs": "^2.0.28",
    "@types/jasmine": "^2.2.29",
    "@types/node": "^6.0.38",
    "@types/protractor": "^1.5.16",
    "@types/selenium-webdriver": "^2.44.26",
    "@types/source-map": "^0.1.26",
    "@types/uglify-js": "^2.0.27",
    "@types/webpack": "^1.12.29",
    "angular2-template-loader": "^0.5.0",
    "awesome-typescript-loader": "^2.2.1",
    "codelyzer": "~0.0.28",
    "copy-webpack-plugin": "^3.0.1",
    "css-loader": "^0.25.0",
    "exports-loader": "^0.6.3",
    "expose-loader": "^0.7.1",
    "file-loader": "^0.9.0",
    "gh-pages": "^0.11.0",
    "html-webpack-plugin": "^2.21.0",
    "imports-loader": "^0.6.5",
    "istanbul-instrumenter-loader": "^0.2.0",
    "json-loader": "^0.5.4",
    "karma": "^1.2.0",
    "karma-chrome-launcher": "^2.0.0 ",
    "karma-coverage": "^1.1.1",
    "karma-jasmine": "^1.0.2",
    "karma-mocha-reporter": "^2.0.0",
    "karma-sourcemap-loader": "^0.3.7",
    "karma-webpack": "1.8.0",
    "parse5": "^1.3.2",
    "protractor": "^3.2.2",
    "raw-loader": "0.5.1",
    "remap-istanbul": "^0.6.3",
    "rimraf": "^2.5.2",
    "source-map-loader": "^0.1.5",
    "string-replace-loader": "github:gdi2290/string-replace-loader",
    "style-loader": "^0.13.1",
    "to-string-loader": "^1.1.4",
    "ts-helpers": "1.1.1",
    "ts-node": "^1.3.0",
    "tslint": "3.15.1",
    "tslint-loader": "^2.1.3",
    "typedoc": "^0.4.5",
    "typescript": "2.0.0",
    "url-loader": "^0.5.7",
    "webpack": "^2.1.0-beta.21",
    "webpack-dev-middleware": "^1.6.1",
    "webpack-dev-server": "^2.1.0-beta.2",
    "webpack-md5-hash": "^0.0.5",
    "webpack-merge": "^0.14.1"
  },
  "repository": {
    "type": "git",
    "url": "https://github.com/angularclass/angular2-webpack-starter.git"
  },
  "bugs": {
    "url": "https://github.com/angularclass/angular2-webpack-starter/issues"
  },
  "engines": {
    "node": ">= 4.2.1",
    "npm": ">= 3"
  }
}

just clone the project, run npm install and npm start

Shahinur Islam · Answer 7 · Thu Sep 22 2016 12:37:31 GMT+0800 (China Standard Time)

@lili21 plesase run this commands

npm uninstall webpack --save-dev
npm install webpack@2.1.0-beta.21 --save-dev
npm uninstall "@types/selenium-webdriver" --save-dev
npm install "@types/selenium-webdriver@2.44.26" --save-dev

Niyaz Hussain · Answer 8 · Thu Sep 22 2016 14:27:24 GMT+0800 (China Standard Time)

@lili21 "webpack": "^2.1.0-beta.21", remove the ^ from all webpack dependencies , then it works cool , coz your webpack is updated to latest beta version , they changed a lot in configuring that

li.li · Answer 9 · Thu Sep 22 2016 14:39:56 GMT+0800 (China Standard Time)

@mshahin364 thanks, It works.

Alexey Karpov · Answer 10 · Thu Sep 22 2016 17:22:26 GMT+0800 (China Standard Time)

Hi, I had the same issue yesterday. I solved it by installing webpack@2.1.0-beta.22
I hope it helps somobody

IsaacBei · Answer 11 · Thu Sep 22 2016 20:31:44 GMT+0800 (China Standard Time)

@mshahin364 It works, thanks.

Narek · Answer 12 · Thu Sep 22 2016 22:21:05 GMT+0800 (China Standard Time)

I also had same issue, but is it right to downgrade to beta version ?

Valentyn Yefimov · Answer 13 · Thu Sep 22 2016 22:50:00 GMT+0800 (China Standard Time)

The best practice is to use only stable packages, not beta, so we could use starter project already for production purposes

Metacoding · Answer 14 · Fri Sep 23 2016 02:31:06 GMT+0800 (China Standard Time)

We get some similar errors related to Webpack on Linux Ubuntu 14.04 upon executing npm start.
There is no error on Windows however. Any idea what could be wrong?

> angular2-webpack-starter@5.0.5 start /home/reza/angular2-webpack-starter
> npm run server:dev
> angular2-webpack-starter@5.0.5 server:dev /home/reza/angular2-webpack-starter
> webpack-dev-server --config config/webpack.dev.js --progress --profile --watch --content-base src/
/home/reza/angular2-webpack-starter/node_modules/webpack/lib/webpack.js:16
        throw new WebpackOptionsValidationError(webpackOptionsValidationErrors);
        ^
WebpackOptionsValidationError: Invalid configuration object. Webpack has been initialised using a configuration object that does not match the API schema.
 - configuration has an unknown property 'tslint'. These properties are valid:
   object { amd?, bail?, cache?, context?, dependencies?, devServer?, devtool?, entry, externals?, loader?, module?, name?, node?, output?, 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: {
           tslint: ...
         }
       })
     }
 - configuration.module has an unknown property 'postLoaders'. These properties are valid:
   object { exprContextCritical?, exprContextRecursive?, exprContextRegExp?, exprContextRequest?, loaders?, noParse?, rules?, unknownContextCritical?, unknownContextRecursive?, unknownContextRegExp?, unknownContextRequest?, wrappedContextCritical?, wrappedContextRecursive?, wrappedContextRegExp? }
   Options affecting the normal modules (`NormalModuleFactory`).
 - configuration.node.global should be a boolean.
 - configuration.resolve has an unknown property 'modulesDirectories'. These properties are valid:
   object { alias?, aliasFields?, cachePredicate?, descriptionFiles?, enforceExtension?, enforceModuleExtension?, extensions?, fileSystem?, mainFields?, mainFiles?, moduleExtensions?, modules?, plugins?, resolver?, symlinks?, unsafeCache? }
 - configuration.resolve.extensions[0] should not be empty.
    at webpack (/home/reza/angular2-webpack-starter/node_modules/webpack/lib/webpack.js:16:9)
    at processOptions (/home/reza/angular2-webpack-starter/node_modules/webpack-dev-server/bin/webpack-dev-server.js:269:17)
    at Object.<anonymous> (/home/reza/angular2-webpack-starter/node_modules/webpack-dev-server/bin/webpack-dev-server.js:297:1)
    at Module._compile (module.js:556:32)
    at Object.Module._extensions..js (module.js:565:10)
    at Module.load (module.js:473:32)
    at tryModuleLoad (module.js:432:12)
    at Function.Module._load (module.js:424:3)
    at Module.runMain (module.js:590:10)
    at run (bootstrap_node.js:394:7)
    at startup (bootstrap_node.js:149:9)
    at bootstrap_node.js:509:3
npm ERR! Linux 4.2.0-27-generic
npm ERR! argv "/usr/bin/nodejs" "/usr/bin/npm" "run" "server:dev"
npm ERR! node v6.6.0
npm ERR! npm  v3.10.3
npm ERR! code ELIFECYCLE
npm ERR! angular2-webpack-starter@5.0.5 server:dev: `webpack-dev-server --config config/webpack.dev.js --progress --profile --watch --content-base src/`
npm ERR! Exit status 1
npm ERR! 
npm ERR! Failed at the angular2-webpack-starter@5.0.5 server:dev script 'webpack-dev-server --config config/webpack.dev.js --progress --profile --watch --content-base src/'.
npm ERR! Make sure you have the latest version of node.js and npm installed.
npm ERR! If you do, this is most likely a problem with the angular2-webpack-starter package,
npm ERR! not with npm itself.
npm ERR! Tell the author that this fails on your system:
npm ERR!     webpack-dev-server --config config/webpack.dev.js --progress --profile --watch --content-base src/
npm ERR! You can get information on how to open an issue for this project with:
npm ERR!     npm bugs angular2-webpack-starter
npm ERR! Or if that isn't available, you can get their info via:
npm ERR!     npm owner ls angular2-webpack-starter
npm ERR! There is likely additional logging output above.
npm ERR! Please include the following file with any support request:
npm ERR!     /home/reza/angular2-webpack-starter/npm-debug.log
npm ERR! Linux 4.2.0-27-generic
npm ERR! argv "/usr/bin/nodejs" "/usr/bin/npm" "start"
npm ERR! node v6.6.0
npm ERR! npm  v3.10.3
npm ERR! code ELIFECYCLE
npm ERR! angular2-webpack-starter@5.0.5 start: `npm run server:dev`
npm ERR! Exit status 1
npm ERR! 
npm ERR! Failed at the angular2-webpack-starter@5.0.5 start script 'npm run server:dev'.
npm ERR! Make sure you have the latest version of node.js and npm installed.
npm ERR! If you do, this is most likely a problem with the angular2-webpack-starter package,
npm ERR! not with npm itself.
npm ERR! Tell the author that this fails on your system:
npm ERR!     npm run server:dev
npm ERR! You can get information on how to open an issue for this project with:
npm ERR!     npm bugs angular2-webpack-starter
npm ERR! Or if that isn't available, you can get their info via:
npm ERR!     npm owner ls angular2-webpack-starter
npm ERR! There is likely additional logging output above.
npm ERR! Please include the following file with any support request:
npm ERR!     /home/reza/angular2-webpack-starter/npm-debug.log

Update:
Thanks to @mshahin364
It worked for us after executing these commands

npm uninstall webpack --save-dev 
npm install webpack@2.1.0-beta.21 --save-dev
npm uninstall "@types/selenium-webdriver" --save-dev
npm install "@types/selenium-webdriver@2.44.26" --save-dev

Ashish Kumar Mishra · Answer 15 · Wed Oct 26 2016 19:41:51 GMT+0800 (China Standard Time)

I have Executed below Commands .

npm uninstall webpack --save-dev
npm install webpack@2.1.0-beta.21 --save-dev
npm uninstall "@types/selenium-webdriver" --save-dev
npm install "@types/selenium-webdriver@2.44.26" --save-dev

Still Problem Remain Same :-
λ cng server
Invalid configuration object. Webpack has been initialised using a configuration object that does not match the API schema.

configuration has an unknown property 'tslint'. These properties are valid:
object { amd?, bail?, cache?, context?, dependencies?, devServer?, devtool?, entry, externals?, loader?, module?, name?, node?, output?, 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: {
tslint: ...
}
})
}
configuration.module has an unknown property 'preLoaders'. These properties are valid:
object { exprContextCritical?, exprContextRecursive?, exprContextRegExp?, exprContextRequest?, loaders?, noParse?, rules?, unknownContextCritical?, unknownContextRecursive?, unknownContextRegExp?, unknownContextRequest?, wrappedContextCritical?, wrappedContextRecursive?, wrappedContextRegExp? }
Options affecting the normal modules (NormalModuleFactory).
- configuration.node.global should be a boolean.
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? }
configuration.resolve.extensions[0] should not be empty.
WebpackOptionsValidationError: Invalid configuration object. Webpack has been initialised using a configuration object that does not match the API schema.
configuration has an unknown property 'tslint'. These properties are valid:
object { amd?, bail?, cache?, context?, dependencies?, devServer?, devtool?, entry, externals?, loader?, module?, name?, node?, output?, 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: {
tslint: ...
}
})
}
- configuration.module has an unknown property 'preLoaders'. These properties are valid:
  object { exprContextCritical?, exprContextRecursive?, exprContextRegExp?, exprContextRequest?, loaders?, noParse?, rules?, unknownContextCritical?, unknownContextRecursive?, unknownContextRegExp?, unknownContextRequest?, wrappedContextCritical?, wrappedContextRecursive?, wrappedContextRegExp? }
  Options affecting the normal modules (NormalModuleFactory).
configuration.node.global should be a boolean.
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? }
- configuration.resolve.extensions[0] should not be empty.
  at webpack (D:\FLM_DASHBOARD\CODE\UI\flm-dashboard-gui\node_modules\angular-cli\node_modules\webpack\lib\webpack.js:16:9)
  at Class.run (D:\FLM_DASHBOARD\CODE\UI\flm-dashboard-gui\node_modules\angular-cli\tasks\serve-webpack.js:23:27)
  at D:\FLM_DASHBOARD\CODE\UI\flm-dashboard-gui\node_modules\angular-cli\commands\serve.js:84:26
  at process._tickCallback (internal/process/next_tick.js:103:7)

Mark Jones · Answer 16 · Wed Nov 23 2016 20:53:10 GMT+0800 (China Standard Time)

@AshishkrMishra I loaded beta.22 to fix several of these issues. Evidently they returned with beta.23, and there is other breakage in beta.27

Jeff Tillwick · Answer 17 · Wed Feb 01 2017 05:17:18 GMT+0800 (China Standard Time)

The documentation, https://webpack.github.io/docs/configuration.html, still lists modulesDirectories as a valid config property.

This really should call out differences in different versions

Edit: Since I was linked to that section directly, I didn't see the alert at the top about that being the documentation for 1.x only. So frustrating.

https://www.youtube.com/watch?v=-tGL-buZ94Y

Eidt 2: Also love that the Documentation link at http://webpack.github.io/ doesn't actually take you to the documentation! Please see above link.

Jonathan Stray · Answer 18 · Sat Feb 18 2017 03:47:39 GMT+0800 (China Standard Time)

I had the same error

- configuration.resolve has an unknown property 'modulesDirectories'

This explains how to migrate webpack.config.js to version 2 format:
http://javascriptplayground.com/blog/2016/10/moving-to-webpack-2/

Bruno Devesa · Answer 19 · Sat Feb 18 2017 21:54:44 GMT+0800 (China Standard Time)

tool developers: please stop delivering updates that crash all the time. Developer want to produce real apps to improve somehow people's life's. If someone wants to develop a tool, think twice because you supposed to make it good, make it functional, make it simple, make it works - ins't that suppose to be obvious ??

Iggi · Answer 20 · Sun Aug 20 2017 04:37:07 GMT+0800 (China Standard Time)

I second brunodevesa

kapil verma · Answer 21 · Mon Dec 25 2017 01:29:14 GMT+0800 (China Standard Time)

too bad we cannot go back to gulp now

ckshobha · Answer 22 · Thu Feb 01 2018 15:49:26 GMT+0800 (China Standard Time)

I see this error and tried the solutions mentioned above but did not work

Error:
/Users/sck012/newUI/ReactApp/yelp/node_modules/webpack/lib/webpack.js:19
throw new WebpackOptionsValidationError(webpackOptionsValidationErrors);
^

WebpackOptionsValidationError: 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?, parallelism?, 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: ...
}
})
]
at webpack (/Users/sck012/newUI/ReactApp/yelp/node_modules/webpack/lib/webpack.js:19:9)
at Object. (/Users/sck012/newUI/ReactApp/yelp/node_modules/hjs-webpack/bin/hjs-dev-server.js:53:16)
at Module._compile (module.js:643:30)
at Object.Module._extensions..js (module.js:654:10)
at Module.load (module.js:556:32)
at tryModuleLoad (module.js:499:12)
at Function.Module._load (module.js:491:3)
at Function.Module.runMain (module.js:684:10)
at startup (bootstrap_node.js:187:16)
at bootstrap_node.js:608:3
npm ERR! code ELIFECYCLE

package.json
'''
{
"name": "yelp",
"version": "1.0.0",
"description": "Yelp Project",
"main": "webpack.config.js",
"scripts": {
"start": "NODE_ENV=development ./node_modules/.bin/hjs-dev-server",
"test": "echo "Error: no test specified" && exit 1"
},
"author": "",
"license": "ISC",
"devDependencies": {
"autoprefixer": "^7.2.5",
"babel-core": "^6.26.0",
"babel-loader": "^7.1.2",
"babel-preset-es2015": "^6.24.1",
"babel-preset-react": "^6.24.1",
"babel-preset-react-hmre": "^1.1.1",
"babel-preset-stage-0": "^6.24.1",
"css-loader": "^0.28.9",
"cssnano": "^3.10.0",
"file-loader": "^1.1.6",
"hjs-webpack": "^9.2.0",
"postcss-loader": "^2.0.10",
"precss": "^3.1.0",
"style-loader": "^0.20.1",
"url-loader": "^0.6.2",
"webpack": "^3.10.0"
},
"dependencies": {
"create-react-class": "^15.6.3",
"react": "^16.2.0",
"react-dom": "^16.2.0",
"react-router": "^4.2.0"
}
}
'''

webpack.config.js
'''
var webpack = require('webpack');
const fs = require('fs');
const path = require('path'),
join = path.join,
resolve = path.resolve;

const getConfig = require('hjs-webpack');
const root = resolve(__dirname);
const src = join(root, 'src');
const modules = join(root, 'node_modules');
const dest = join(root, 'dist');
const NODE_DEV = process.env.NODE_ENV;
const isDev = NODE_DEV === 'development';

var config = getConfig({
isDev: isDev,
in: join(src, 'app.js'),
out: dest,
clearBeforeBuild: true,
});

// CSS
const cssModulesNames = ${isDev ? '[path][name]__[local]__' : ''}[hash:base64:5];
const matchCssLoaders = /(^|!)(css-loader)($|!)/;

const findLoader = (loaders, match) => {
const found = loaders.filter(l => l &&
l.loader && l.loader.match(match));
return found ? found[0] : null;
}
// existing css loader
const cssloader =
findLoader(config.module.rules, matchCssLoaders);

config.postcss = [].concat(
require('precss')({}),
require('autoprefixer')({}),
require('cssnano')({})
);

module.exports = config;
'''