Angular-builders: [Issue] Data path '' should NOT have additional properties (es5BrowserSupport) with `10.0.0` only

[C0ZEN]

Describe the Bug

I have this error:

Data path '' should NOT have additional properties (es5BrowserSupport)

When serving my Angular 10 application.
This is only an issue with the version 10.0.0 of @angular-builders/custom-webpack dependency.
Installing the version 9.2.0 of @angular-builders/custom-webpack fix the error.

Expected Behavior

No error and the app start running.

Environment

- @angular/core version: 10.0.8
- @angular-devkit/build-angular version: 0.1000.5
- @angular-builders/custom-webpack version: 9.2.0

I do not know if you are aware of this error and if not let me know if you need more information about my project.

[fnnzzz]

I have a similar case with @angular-builders/custom-webpack:server
I get the error "Data path "" should NOT have additional properties(vendorChunk)."

Environment:

"@angular-builders/custom-webpack": "10.0.0"
"@angular/core": 10.0.8
"@angular-devkit/build-angular": "0.1000.5",

[just-jeb]

Please take a look at #781 (specifically this comment) and LMK if it helps.

[C0ZEN]

@just-jeb I already tried to remove the package-lock, node_modules and reinstall everything and it did not change a thing.
I followed the exact same steps than this comment because it was slightly different from what I did nevertheless the issue is still here 😢

[C0ZEN]

Also after I discarded the upgrade of this dependency and ran npm i I had this new error when doing the serve: ERROR in Cannot read property 'flags' of undefined.
Note that after this the package-lock.json was still changed so there is also another problem in a peer dependency 😭
But a clean remove and install of the node_modules fixed it.

[fnnzzz]

I also tried to downgrade to version 9.2.0, got an error ERROR in Cannot read property 'flags' of undefined

[C0ZEN]

@fnnzzz brothers in errors then 🥳

[slavoroi]

I'm sorry, I have the same for :

Schema validation failed with the following errors:
  Data path "" should NOT have additional properties(allowedCommonJsDependencies).

with package.json:

"@angular-builders/custom-webpack": "10.0.0",
    "@angular-builders/dev-server": "7.3.1",
    "@angular-devkit/build-angular": "0.1000.7",
    "@angular-devkit/build-ng-packagr": "0.1000.7",
    "@angular/animations": "10.0.11",
    "@angular/cdk": "10.1.3",
    "@angular/cli": "10.0.7",
    "@angular/common": "10.0.11",
    "@angular/compiler": "10.0.11",
    "@angular/compiler-cli": "10.0.11",
    "@angular/core": "10.0.11",
    "@angular/forms": "10.0.11",
    "@angular/language-service": "10.0.11",
    "@angular/platform-browser": "10.0.11",
    "@angular/platform-browser-dynamic": "10.0.11",
    "@angular/router": "10.0.11",
    "@commitlint/cli": "9.1.2",
    "@commitlint/config-conventional": "9.1.2",
    "@cypress/code-coverage": "3.8.1",
    "@cypress/webpack-preprocessor": "5.4.4",
    "@istanbuljs/nyc-config-typescript": "1.0.1",
    "@ngx-translate/core": "13.0.0",
    "@semantic-release/git": "9.0.0",
    "@trax-retail/proxy-dev-agent": "1.4.1",
    "@trax-retail/web-components": "1.1.1",
    "@trax-retail/web-standards": "2.0.13",
    "@types/jasmine": "3.5.13",
    "@types/jasminewd2": "2.0.8",
    "@types/node": "14.6.0",
    "codelyzer": "6.0.0",
    "cypress": "5.0.0",
    "husky": "4.2.5",
    "istanbul-instrumenter-loader": "3.0.1",
    "istanbul-lib-coverage": "3.0.0",
    "jasmine-core": "3.6.0",
    "jasmine-spec-reporter": "5.0.2",
    "jssha": "3.1.2",
    "@types/jssha": "2.0.0",
    "jwt-decode": "2.2.0",
    "karma": "5.1.1",
    "karma-chrome-launcher": "3.1.0",
    "karma-coverage-istanbul-reporter": "3.0.3",
    "karma-jasmine": "4.0.1",
    "karma-jasmine-html-reporter": "1.5.4",
    "markdownlint-cli": "0.23.2",
    "nanoid": "3.1.12",
    "ng-lint-report": "0.1.11",
    "ng-packagr": "10.0.4",
    "ngx-cookie-service": "10.0.1",
    "ngx-translate-multi-http-loader": "3.0.0",
    "nyc": "15.1.0",
    "rxjs": "6.6.2",
    "scss-bundle": "3.0.2",
    "source-map-support": "0.5.19",
    "ts-loader": "8.0.3",
    "ts-node": "9.0.0",
    "tslib": "2.0.1",
    "tslint": "6.1.3",
    "typescript": "3.9.7",
    "zone.js": "0.11.1"

[fasidOnGit]

+1

Data path "" should NOT have additional properties(allowedCommonJsDependencies).

package.json

...
 "@angular-builders/custom-webpack": "10.0.0",
 "@angular/cli": "10.0.8",
 "@angular/compiler-cli": "10.0.14",
...

[just-jeb]

All these cases smell like some versions collision, would you mind running this:

npm list @angular-devkit/build-angular
npm list @angular-devkit/architect
npm list @angular-devkit/core

And posting the results here?

[slavoroi]

this was fixed for me in rhe latest version update

[fasidOnGit]

@just-jeb We are trying to update our project from v9 to v10. I did, the usual ng update package-name

Here is the result npm list command.

npm list @angular-devkit/core
[INFO] ├─┬ @angular-builders/[email protected]
[INFO] │ ├─┬ @angular-devkit/[email protected]
[INFO] │ │ └── @angular-devkit/[email protected]  deduped
[INFO] │ └── @angular-devkit/[email protected] 
[INFO] ├─┬ @angular-devkit/[email protected]
[INFO] │ ├─┬ @angular-devkit/[email protected]
[INFO] │ │ └── @angular-devkit/[email protected]  deduped
[INFO] │ ├─┬ @angular-devkit/[email protected]
[INFO] │ │ ├─┬ @angular-devkit/[email protected]
[INFO] │ │ │ └── @angular-devkit/[email protected]  deduped
[INFO] │ │ └── @angular-devkit/[email protected] 
[INFO] │ ├── @angular-devkit/[email protected] 
[INFO] │ └─┬ @ngtools/[email protected]
[INFO] │   └── @angular-devkit/[email protected] 
[INFO] └─┬ @angular/[email protected]
[INFO]   ├─┬ @angular-devkit/[email protected]
[INFO]   │ └── @angular-devkit/[email protected]  deduped
[INFO]   ├── @angular-devkit/[email protected] 
[INFO]   ├─┬ @angular-devkit/[email protected]
[INFO]   │ └── @angular-devkit/[email protected] 
[INFO]   ├─┬ @schematics/[email protected]
[INFO]   │ └── @angular-devkit/[email protected] 
[INFO]   └─┬ @schematics/[email protected]
[INFO]     └── @angular-devkit/[email protected] 

npm list @angular-devkit/architect
[INFO] ├─┬ @angular-builders/[email protected]
[INFO] │ └── @angular-devkit/[email protected] 
[INFO] ├─┬ @angular-devkit/[email protected]
[INFO] │ ├── @angular-devkit/[email protected] 
[INFO] │ └─┬ @angular-devkit/[email protected]
[INFO] │   └── @angular-devkit/[email protected] 
[INFO] └─┬ @angular/[email protected]
[INFO]   └── @angular-devkit/[email protected] 

npm list @angular-devkit/build-angular
[INFO] ├─┬ @angular-builders/[email protected]
[INFO] │ └── @angular-devkit/[email protected]  deduped
[INFO] └── @angular-devkit/[email protected] 

[just-jeb]

@fasidOnGit OK, I don't see anything suspicious here, so I'm gonna need a reproduction.

[fnnzzz]

I tried to update to newer versions of @angular/xxx, but the error did not disappear

npm list @angular-devkit/build-angular

├─┬ @angular-builders/[email protected]
│ └── @angular-devkit/[email protected] 
└── @angular-devkit/[email protected] 

npm list @angular-devkit/architect

├─┬ @angular-builders/[email protected]
│ ├── @angular-devkit/[email protected] 
│ └─┬ @angular-devkit/[email protected]
│   ├── @angular-devkit/[email protected]  deduped
│   └─┬ @angular-devkit/[email protected]
│     └── @angular-devkit/[email protected]  deduped
├─┬ @angular-devkit/[email protected]
│ └── @angular-devkit/[email protected] 
├─┬ @angular-devkit/[email protected]
│ └── @angular-devkit/[email protected] 
├─┬ @angular/[email protected]
│ └── @angular-devkit/[email protected] 
├─┬ @nguniversal/[email protected]
│ └── @angular-devkit/[email protected] 
├─┬ @nrwl/[email protected]
│ └── @angular-devkit/[email protected]  deduped
├─┬ @nrwl/[email protected]
│ └── @angular-devkit/[email protected]  deduped
├─┬ @nrwl/[email protected]
│ ├─┬ @nrwl/[email protected]
│ │ ├─┬ @nrwl/[email protected]
│ │ │ └── @angular-devkit/[email protected] 
│ │ └─┬ @nrwl/[email protected]
│ │   └── @angular-devkit/[email protected]  deduped
│ └─┬ @nrwl/[email protected]
│   └─┬ @nrwl/[email protected]
│     └─┬ @nrwl/[email protected]
│       └── @angular-devkit/[email protected]  deduped
└─┬ @nrwl/[email protected]
  └─┬ @nrwl/[email protected]
    └─┬ @nrwl/[email protected]
      └── @angular-devkit/[email protected]  deduped

npm list @angular-devkit/core

├─┬ @angular-builders/[email protected]
│ ├─┬ @angular-devkit/[email protected]
│ │ └── @angular-devkit/[email protected]  deduped
│ ├─┬ @angular-devkit/[email protected]
│ │ ├─┬ @angular-devkit/[email protected]
│ │ │ └── @angular-devkit/[email protected]  deduped
│ │ ├── @angular-devkit/[email protected]  deduped
│ │ └─┬ @ngtools/[email protected]
│ │   └── @angular-devkit/[email protected]  deduped
│ └── @angular-devkit/[email protected] 
├─┬ @angular-devkit/[email protected]
│ ├─┬ @angular-devkit/[email protected]
│ │ └── @angular-devkit/[email protected]  deduped
│ ├── @angular-devkit/[email protected] 
│ └─┬ @ngtools/[email protected]
│   └── @angular-devkit/[email protected] 
├─┬ @angular-devkit/[email protected]
│ ├─┬ @angular-devkit/[email protected]
│ │ └── @angular-devkit/[email protected]  deduped
│ └── @angular-devkit/[email protected] 
├─┬ @angular/[email protected]
│ ├─┬ @angular-devkit/[email protected]
│ │ └── @angular-devkit/[email protected]  deduped
│ ├── @angular-devkit/[email protected] 
│ ├─┬ @angular-devkit/[email protected]
│ │ └── @angular-devkit/[email protected]  deduped
│ ├─┬ @schematics/[email protected]
│ │ ├── @angular-devkit/[email protected] 
│ │ └─┬ @angular-devkit/[email protected]
│ │   └── @angular-devkit/[email protected]  deduped
│ └─┬ @schematics/[email protected]
│   ├── @angular-devkit/[email protected] 
│   └─┬ @angular-devkit/[email protected]
│     └── @angular-devkit/[email protected]  deduped
├─┬ @datorama/[email protected]
│ └─┬ [email protected]
│   ├── @angular-devkit/[email protected] 
│   └─┬ @angular-devkit/[email protected]
│     └── @angular-devkit/[email protected]  deduped
├─┬ @nguniversal/[email protected]
│ ├─┬ @angular-devkit/[email protected]
│ │ └── @angular-devkit/[email protected]  deduped
│ └── @angular-devkit/[email protected] 
├─┬ @nrwl/[email protected]
│ ├─┬ @angular-devkit/[email protected]
│ │ └── @angular-devkit/[email protected]  deduped
│ └─┬ @schematics/[email protected]
│   └── @angular-devkit/[email protected]  deduped
├─┬ @nrwl/[email protected]
│ └── @angular-devkit/[email protected]  deduped
├─┬ @nrwl/[email protected]
│ └── @angular-devkit/[email protected]  deduped
├─┬ @nrwl/[email protected]
│ ├─┬ @nrwl/[email protected]
│ │ ├─┬ @angular-devkit/[email protected]
│ │ │ └── @angular-devkit/[email protected]  deduped
│ │ ├─┬ @nrwl/[email protected]
│ │ │ ├─┬ @angular-devkit/[email protected]
│ │ │ │ └── @angular-devkit/[email protected]  deduped
│ │ │ └── @angular-devkit/[email protected]  deduped
│ │ ├─┬ @nrwl/[email protected]
│ │ │ └── @angular-devkit/[email protected]  deduped
│ │ └─┬ @schematics/[email protected]
│ │   └── @angular-devkit/[email protected]  deduped
│ └─┬ @nrwl/[email protected]
│   ├── @angular-devkit/[email protected] 
│   └─┬ @nrwl/[email protected]
│     └─┬ @nrwl/[email protected]
│       └── @angular-devkit/[email protected]  deduped
└─┬ @nrwl/[email protected]
  ├── @angular-devkit/[email protected]  deduped
  └─┬ @nrwl/[email protected]
    └─┬ @nrwl/[email protected]
      └── @angular-devkit/[email protected]  deduped

[fasidOnGit]

@just-jeb Simple, the libraries that our project is using uses commonjs dependencies. as per angular doc here, https://angular.io/guide/build#configuring-commonjs-dependencies , we need to call out the libraries in angular.json. which I tried to add in my project that uses "builder": "@angular-builders/custom-webpack:browser",, Hence I arrive at the aforementioned problem https://github.com/just-jeb/angular-builders/issues/810#issuecomment-683639790.

I'll try to make a reproduction repository meanwhile.

[okansarica]

Nothing yet? having the same issue

[guitarooman14]

What I've found in documentation:

Thus, if you use @angular-builders/custom-webpack:dev-server along with @angular-builders/custom-webpack:browser, ng serve will run with custom configuration provided in the latter.

Example
angular.json:

"architect": {
  ...
  "build": {
    "builder": "@angular-builders/custom-webpack:browser",
    "options": {
      "customWebpackConfig": {
         "path": "./extra-webpack.config.js"
      },
      ...
    }
  },
  "serve": {
    "builder": "@angular-builders/custom-webpack:dev-server",
    "options": {
      "browserTarget": "my-project:build"
    }
  }

[tmushayahama]

I am having the same problem with angular 11 as well. Any solution to this?

[martinsotirov]

Same problem on Angular 11. Came about because I updated my postcss chain which depends on webpack 5.

[Sieabah]

Running in to similar issues with Angular 11.

Running this doesn't change the error.

[jgutix]

Look for that property es5BrowserSupport on your angular.json file and remove it.

In general the compiler is telling you that it doesn't recognize the mentioned property, so in the case of: Data path "" should NOT have additional properties(vendorChunk)., the vendorChunk property is not recognized and should be removed or replaced with a correct value.

[just-jeb]

Guys, anyone who's facing this problem - please provide a minimal reproduction repo. It's very hard to help you without it, because the error is very generic and any mismatch in angular.json schema can cause this behavior.

[marselbeqiri]

If you guys having the above error with 'es5BrowserSupport ' specified.

At 'angular.json' go:
projects.ng-complete-guide-update.architect.build.options and delete property" es5BrowserSupport : true"

because Property 'es5BrowserSupport' is not allowed

[just-jeb]

I'm closing this issue for now. Anyone who's facing it and is unable to fix it with any solution from the thread is welcome to provide a minimal reproduction.

[chaimite]

I updated from angular 9.1 to 10.2. I was also having this problem when I was trying to add "allowedCommonJsDependencies" in angular.json.
The way I solved it was by updating "@angular-builders/custom-webpack" to 10.0.1.
I hope this helps other people facing the same issue.

[martinsotirov]

I'm closing this issue for now. Anyone who's facing it and is unable to fix it with any solution from the thread is welcome to provide a minimal reproduction.

@just-jeb I managed to extract a minimal build from our app that reproduces the bug: https://github.com/martinsotirov/angular-builders-webpack-bug. I hope this helps in debugging the problem.

[szywi]

For those struggling with Data path "" should NOT have additional properties(customWebpackConfig).:

Make sure you configure customWebpackConfig with @angular-builders/custom-webpack:browser (and not @angular-builders/custom-webpack:dev-server).

See: custom-webpack-dev-server for more.

[martinsotirov]

Make sure you configure customWebpackConfig with @angular-devkit/build-angular:browser (and not @angular-builders/custom-webpack:dev-server).

@szywi I tried switching out @angular-builders/custom-webpack:browser for @angular-devkit/custom-webpack:browser but then it says:

An unhandled exception occurred: Cannot find module '@angular-devkit/custom-webpack/package.json'

Please, see my linked repo above your comment that reproduces the bug.

[szywi]

@martinsotirov I copied wrong builder, I'm sorry... Please check my updated answer :)

Basically what I meant is this part here in angular.json is most likely causing you troubles (it was the case in our project):

"serve": {
          "builder": "@angular-builders/custom-webpack:dev-server",
          "options": {
            "customWebpackConfig": { 
              "path": "./webpack.config.js"
            }
          },

Remove customWebpackConfig section and configure it in build target with @angular-devkit/custom-webpack:browser and it should work (at least you won't be getting those Data path "" should NOT have additional properties(customWebpackConfig). errors anymore)

[martinsotirov]

That did indeed remove the Data path "" should NOT have additional properties(customWebpackConfig). error. Thanks @szywi . 👍
Now I have to figure out what all the postcss-loader errors I get are about.