Issue with webpack configuration #1036

valyefimov · 2016-09-21T16:15:07Z

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

The text was updated successfully, but these errors were encountered:

niyazhussain · 2016-09-21T16:27:35Z

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

yanxch · 2016-09-21T17:50:16Z

#1018 should fix this temporary

mshahin364 · 2016-09-22T03:35:38Z

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

lili21 · 2016-09-22T03:41:16Z

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

mshahin364 · 2016-09-22T04:17:30Z

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

lili21 · 2016-09-22T04:19:18Z

{
  "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

mshahin364 · 2016-09-22T04:37:31Z

@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

niyazhussain · 2016-09-22T06:27:24Z

@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

lili21 · 2016-09-22T06:39:56Z

@mshahin364 thanks, It works.

greetclock · 2016-09-22T09:22:26Z

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

IsaacBei · 2016-09-22T12:31:44Z

@mshahin364 It works, thanks.

manar007 · 2016-09-22T14:21:05Z

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

valyefimov · 2016-09-22T14:50:00Z

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

metacoding · 2016-09-22T18:31:06Z

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

AshishkrMishra · 2016-10-26T11:41:51Z

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)

mark0978 · 2016-11-23T12:53:10Z

@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

crazyjat · 2017-01-31T21:17:18Z

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.

jstray · 2017-02-17T19:47:39Z

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/

brunodevesa · 2017-02-18T13:54:44Z

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 ??

iggirex · 2017-08-19T20:37:07Z

I second brunodevesa

kapv89 · 2017-12-24T17:29:14Z

too bad we cannot go back to gulp now

ckshobha · 2018-02-01T07:49:26Z

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;
'''

louisscruz mentioned this issue Sep 25, 2016

update material2 branch #1041

Closed

jbeckton mentioned this issue Oct 14, 2016

Invalid configuration object preboot/angular-webpack#214

Closed

builtbyka mentioned this issue Oct 19, 2016

Doesn't work with latest webpack-dev-server p-adams/simple-todo-tutorial#3

Closed

Renaud009 mentioned this issue Nov 16, 2016

validateSchema #1176

Closed

katallaxie closed this as completed Jan 25, 2017

ryan-roemer mentioned this issue Jul 12, 2017

BUG: Webpack3 can't handle "" (empty) resolve.extensions FormidableLabs/builder-victory-component#91

Closed

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Issue with webpack configuration #1036

Issue with webpack configuration #1036

valyefimov commented Sep 21, 2016 •

edited

niyazhussain commented Sep 21, 2016

yanxch commented Sep 21, 2016

mshahin364 commented Sep 22, 2016

lili21 commented Sep 22, 2016

mshahin364 commented Sep 22, 2016

lili21 commented Sep 22, 2016

mshahin364 commented Sep 22, 2016

niyazhussain commented Sep 22, 2016

lili21 commented Sep 22, 2016

greetclock commented Sep 22, 2016

IsaacBei commented Sep 22, 2016

manar007 commented Sep 22, 2016

valyefimov commented Sep 22, 2016

metacoding commented Sep 22, 2016 •

edited

AshishkrMishra commented Oct 26, 2016 •

edited

mark0978 commented Nov 23, 2016

crazyjat commented Jan 31, 2017 •

edited

jstray commented Feb 17, 2017 •

edited

brunodevesa commented Feb 18, 2017

iggirex commented Aug 19, 2017

kapv89 commented Dec 24, 2017

ckshobha commented Feb 1, 2018 •

edited

Issue with webpack configuration #1036

Issue with webpack configuration #1036

Comments

valyefimov commented Sep 21, 2016 • edited

niyazhussain commented Sep 21, 2016

yanxch commented Sep 21, 2016

mshahin364 commented Sep 22, 2016

lili21 commented Sep 22, 2016

mshahin364 commented Sep 22, 2016

lili21 commented Sep 22, 2016

mshahin364 commented Sep 22, 2016

niyazhussain commented Sep 22, 2016

lili21 commented Sep 22, 2016

greetclock commented Sep 22, 2016

IsaacBei commented Sep 22, 2016

manar007 commented Sep 22, 2016

valyefimov commented Sep 22, 2016

metacoding commented Sep 22, 2016 • edited

AshishkrMishra commented Oct 26, 2016 • edited

mark0978 commented Nov 23, 2016

crazyjat commented Jan 31, 2017 • edited

jstray commented Feb 17, 2017 • edited

brunodevesa commented Feb 18, 2017

iggirex commented Aug 19, 2017

kapv89 commented Dec 24, 2017

ckshobha commented Feb 1, 2018 • edited

valyefimov commented Sep 21, 2016 •

edited

metacoding commented Sep 22, 2016 •

edited

AshishkrMishra commented Oct 26, 2016 •

edited

crazyjat commented Jan 31, 2017 •

edited

jstray commented Feb 17, 2017 •

edited

ckshobha commented Feb 1, 2018 •

edited