Nx: ValidationError: webpack Dev Server Invalid Options (after update on 8.7.1)

[mlc-mlapis]

Prerequisites

• [x] I am running the latest version
• [x] I checked to make sure that this issue has not already been filed

Expected Behavior

The same behavior as on version 8.7.0.

Current Behavior

An unhandled exception occurred: webpack Dev Server Invalid Options
options should NOT have additional properties

Failure Information (for bugs)

Steps to Reproduce

1. Standard update to version 8.7.1
2. ng serve myapp

Context

Please provide any relevant information about your setup:

@nrwl/angular : 8.7.1
@nrwl/cli : 8.7.1
@nrwl/cypress : 8.7.1
@nrwl/eslint-plugin-nx : Not Found
@nrwl/express : 8.7.1
@nrwl/jest : 8.7.1
@nrwl/linter : 8.7.1
@nrwl/nest : 8.7.1
@nrwl/next : 8.7.1
@nrwl/node : 8.7.1
@nrwl/react : 8.7.1
@nrwl/schematics : Not Found
@nrwl/tao : 8.7.1
@nrwl/web : 8.7.1
@nrwl/workspace : 8.7.1
typescript : 3.5.3

A minimal reproduction scenario allows us to quickly confirm a bug (or point out coding problem) as well as confirm that we are fixing the right problem.

Failure Logs

[error] ValidationError: webpack Dev Server Invalid Options

options should NOT have additional properties

at validateOptions (C:\Data\WAMP\github\bvv-workspace\node_modules\schema-utils\src\validateOptions.js:32:11)
at new Server (C:\Data\WAMP\github\bvv-workspace\node_modules\webpack-dev-server\lib\Server.js:83:3)
at Observable.rxjs_1.Observable.obs [as _subscribe] (C:\Data\WAMP\github\bvv-workspace\node_modules\@angular-devkit\build-webpack\src\webpack-dev-server\index.js:28:24)
at Observable._trySubscribe (C:\Data\WAMP\github\bvv-workspace\node_modules\@angular-devkit\build-webpack\node_modules\rxjs\internal\Observable.js:44:25)
at Observable.subscribe (C:\Data\WAMP\github\bvv-workspace\node_modules\@angular-devkit\build-webpack\node_modules\rxjs\internal\Observable.js:30:22)
at C:\Data\WAMP\github\bvv-workspace\node_modules\@angular-devkit\build-webpack\node_modules\rxjs\internal\util\subscribeTo.js:22:31
at Object.subscribeToResult (C:\Data\WAMP\github\bvv-workspace\node_modules\@angular-devkit\build-webpack\node_modules\rxjs\internal\util\subscribeToResult.js:10:45)
at SwitchMapSubscriber._innerSub (C:\Data\WAMP\github\bvv-workspace\node_modules\@angular-devkit\build-webpack\node_modules\rxjs\internal\operators\switchMap.js:65:54)
at SwitchMapSubscriber._next (C:\Data\WAMP\github\bvv-workspace\node_modules\@angular-devkit\build-webpack\node_modules\rxjs\internal\operators\switchMap.js:55:14)
at SwitchMapSubscriber.Subscriber.next (C:\Data\WAMP\github\bvv-workspace\node_modules\@angular-devkit\build-webpack\node_modules\rxjs\internal\Subscriber.js:66:18)
at Observable._subscribe (C:\Data\WAMP\github\bvv-workspace\node_modules\@angular-devkit\build-webpack\node_modules\rxjs\internal\observable\scalar.js:6:20)
at Observable._trySubscribe (C:\Data\WAMP\github\bvv-workspace\node_modules\@angular-devkit\build-webpack\node_modules\rxjs\internal\Observable.js:44:25)
at Observable.subscribe (C:\Data\WAMP\github\bvv-workspace\node_modules\@angular-devkit\build-webpack\node_modules\rxjs\internal\Observable.js:30:22)
at SwitchMapOperator.call (C:\Data\WAMP\github\bvv-workspace\node_modules\@angular-devkit\build-webpack\node_modules\rxjs\internal\operators\switchMap.js:33:23)
at Observable.subscribe (C:\Data\WAMP\github\bvv-workspace\node_modules\@angular-devkit\build-webpack\node_modules\rxjs\internal\Observable.js:25:31)
at MapOperator.call (C:\Data\WAMP\github\bvv-workspace\node_modules\@angular-devkit\build-angular\node_modules\rxjs\internal\operators\map.js:32:23)
at Observable.subscribe (C:\Data\WAMP\github\bvv-workspace\node_modules\@angular-devkit\build-webpack\node_modules\rxjs\internal\Observable.js:25:31)
at C:\Data\WAMP\github\bvv-workspace\node_modules\@angular-devkit\build-angular\node_modules\rxjs\internal\util\subscribeToObservable.js:10:20
at Object.subscribeToResult (C:\Data\WAMP\github\bvv-workspace\node_modules\@angular-devkit\build-angular\node_modules\rxjs\internal\util\subscribeToResult.js:10:45)
at SwitchMapSubscriber._innerSub (C:\Data\WAMP\github\bvv-workspace\node_modules\@angular-devkit\build-angular\node_modules\rxjs\internal\operators\switchMap.js:65:54)
at SwitchMapSubscriber._next (C:\Data\WAMP\github\bvv-workspace\node_modules\@angular-devkit\build-angular\node_modules\rxjs\internal\operators\switchMap.js:55:14)
at SwitchMapSubscriber.Subscriber.next (C:\Data\WAMP\github\bvv-workspace\node_modules\@angular-devkit\build-angular\node_modules\rxjs\internal\Subscriber.js:66:18)
at C:\Data\WAMP\github\bvv-workspace\node_modules\@angular-devkit\build-angular\node_modules\rxjs\internal\util\subscribeToPromise.js:7:24
at processTicksAndRejections (internal/process/task_queues.js:86:5)

Other

Node JS: 11.13.0
NPM: 6.7.0
OS: Windows 10 build 1903

[mlc-mlapis]

The same problem remains even after complete removing node_modules and a new install of everything.

[brandonroberts]

Can you provide a repo based on 8.7.0 that we can update to reproduce this issue?

[mlc-mlapis]

@brandonroberts Yep, it's just an elementary repo, with minimal content, used as a starting point for our tries to test some of our scenario cases with Nx. We monitor the status, news, and preparing the using of Nx as our development platform. I'll create a clone of it, try if the problem is the same on it, and then publish the URL, so you can use it.

[brandonroberts]

@mlc-mlapis Thanks!

[mlc-mlapis]

@brandonroberts Here it is: https://github.com/mlc-mlapis/bvv-workspace

Just go:

• npm i
• ng serve demo

[mlc-mlapis]

@brandonroberts The problem with 8.7.1 looks like a general problem for everybody. Can you confirm that the behavior is the same as I described?

[pnocera]

having the same exact problem. any workaround ?

[SpeedoPasanen]

@nrwl/angular version between 8.6.0-8.7.1 doesn't matter. This worked for me: Downgrade build-angular. Latest version I've found working:

npm i --save-dev @angular-devkit/build-angular@^0.803.8

[mlc-mlapis]

@SpeedoPasanen Hmm, but there has to be something special because of Nx 8.7.0 works with "@angular-devkit/build-angular": "0.803.19" (Angular CLI 8.3.19 & Angular 8.2.14).

[pnocera]

switching to @angular-devkit/build-angular@^0.803.8 didn't work for me. I did an npm cache clean but no success.
however upgrading webpack-dev-server did :
npm i webpack-dev-server --save-dev

[mlc-mlapis]

I tried the latest Nx version 8.8.0, and the problem is the same. When digging into more details, I found out that Nx version 8.7.1 & 8.8.0 installs as the dependency "[email protected]", while Nx 8.7.0 and older installs the newer one "[email protected]".

In all versions, the file Server.js from webpack-dev-server/lib is used, where the line validateOptions(schema, options, 'webpack Dev Server'); is called with the same options object:

{ host: 'localhost',
  port: 4200,
  headers: { 'Access-Control-Allow-Origin': '*' },
  historyApiFallback:
   { index: '//index.html',
     disableDotRule: true,
     htmlAcceptHeaders: [ 'text/html', 'application/xhtml+xml' ],
     rewrites: [ [Object] ] },
  stats: false,
  compress: false,
  watchOptions: { poll: undefined },
  https: false,
  overlay: { errors: true, warnings: false },
  inline: false,
  public: undefined,
  disableHostCheck: false,
  publicPath: '/',
  hot: false,
  contentBase: false,
  sockPath: '/sockjs-node' }

The problem is probably in the validationschema, which in older version "[email protected]", doesn't conform with the newer options content.

So it's a question, why the older "[email protected]" is installed in Nx 8.7.1 & 8.8.0.

[mlc-mlapis]

Installing "[email protected]" or the latest version "[email protected]" after the installation of Nx 8.7.1 or 8.8.0 looks like a solution to the problem, but probably there is still something to do in Nx code to prevent such behavior.

[SpeedoPasanen]

Installing webpack-dev-server as a dep unless you use it yourself isn't a solution. Should be fixed in nx :)

[AppleGamer22]

I got the same problem after updating to any version greater than 8.7.0. At the meantime, I would use version 8.7.0 until a fix is available.

[AppleGamer22]

@mlc-mlapis's suggestion of installing the latest [email protected] seem to allow the angular app to run. It seems odd for @nrwl/node to use [email protected] because it is a much older version of the package. Therefore, I think @nrwl/[email protected] should use the latest [email protected].