search

just-jeb / angular-builders

Angular build facade extensions (Jest and custom webpack configuration)
MIT License
1.14k stars 198 forks source link

[Issue] Data path '' should NOT have additional properties (es5BrowserSupport) with `10.0.0` only #810

Closed C0ZEN closed 3 years ago

C0ZEN commented 4 years ago

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

Libs
- @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 commented 4 years ago

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 commented 4 years ago

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

C0ZEN commented 4 years ago

@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 commented 4 years ago

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 commented 4 years ago

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

C0ZEN commented 4 years ago

@fnnzzz brothers in errors then 🥳

slavoroi commented 4 years ago

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 commented 4 years ago

+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 commented 4 years ago

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 commented 4 years ago

this was fixed for me in rhe latest version update

fasidOnGit commented 4 years ago

@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/custom-webpack@10.0.0
[INFO] │ ├─┬ @angular-devkit/architect@0.1000.8
[INFO] │ │ └── @angular-devkit/core@10.0.8  deduped
[INFO] │ └── @angular-devkit/core@10.0.8 
[INFO] ├─┬ @angular-devkit/build-angular@0.1000.8
[INFO] │ ├─┬ @angular-devkit/architect@0.1000.8
[INFO] │ │ └── @angular-devkit/core@10.0.8  deduped
[INFO] │ ├─┬ @angular-devkit/build-webpack@0.1000.8
[INFO] │ │ ├─┬ @angular-devkit/architect@0.1000.8
[INFO] │ │ │ └── @angular-devkit/core@10.0.8  deduped
[INFO] │ │ └── @angular-devkit/core@10.0.8 
[INFO] │ ├── @angular-devkit/core@10.0.8 
[INFO] │ └─┬ @ngtools/webpack@10.0.8
[INFO] │   └── @angular-devkit/core@10.0.8 
[INFO] └─┬ @angular/cli@10.0.8
[INFO]   ├─┬ @angular-devkit/architect@0.1000.8
[INFO]   │ └── @angular-devkit/core@10.0.8  deduped
[INFO]   ├── @angular-devkit/core@10.0.8 
[INFO]   ├─┬ @angular-devkit/schematics@10.0.8
[INFO]   │ └── @angular-devkit/core@10.0.8 
[INFO]   ├─┬ @schematics/angular@10.0.8
[INFO]   │ └── @angular-devkit/core@10.0.8 
[INFO]   └─┬ @schematics/update@0.1000.8
[INFO]     └── @angular-devkit/core@10.0.8 
npm list @angular-devkit/architect
[INFO] ├─┬ @angular-builders/custom-webpack@10.0.0
[INFO] │ └── @angular-devkit/architect@0.1000.8 
[INFO] ├─┬ @angular-devkit/build-angular@0.1000.8
[INFO] │ ├── @angular-devkit/architect@0.1000.8 
[INFO] │ └─┬ @angular-devkit/build-webpack@0.1000.8
[INFO] │   └── @angular-devkit/architect@0.1000.8 
[INFO] └─┬ @angular/cli@10.0.8
[INFO]   └── @angular-devkit/architect@0.1000.8 

npm list @angular-devkit/build-angular
[INFO] ├─┬ @angular-builders/custom-webpack@10.0.0
[INFO] │ └── @angular-devkit/build-angular@0.1000.8  deduped
[INFO] └── @angular-devkit/build-angular@0.1000.8
just-jeb commented 4 years ago

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

fnnzzz commented 4 years ago

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

npm list @angular-devkit/build-angular

├─┬ @angular-builders/custom-webpack@10.0.0
│ └── @angular-devkit/build-angular@0.1000.5 
└── @angular-devkit/build-angular@0.1000.8 
npm list @angular-devkit/architect

├─┬ @angular-builders/custom-webpack@10.0.0
│ ├── @angular-devkit/architect@0.1000.5 
│ └─┬ @angular-devkit/build-angular@0.1000.5
│   ├── @angular-devkit/architect@0.1000.5  deduped
│   └─┬ @angular-devkit/build-webpack@0.1000.5
│     └── @angular-devkit/architect@0.1000.5  deduped
├─┬ @angular-devkit/build-angular@0.1000.8
│ └── @angular-devkit/architect@0.1000.8 
├─┬ @angular-devkit/build-webpack@0.1000.8
│ └── @angular-devkit/architect@0.1000.8 
├─┬ @angular/cli@10.0.8
│ └── @angular-devkit/architect@0.1000.8 
├─┬ @nguniversal/builders@10.0.2
│ └── @angular-devkit/architect@0.1000.7 
├─┬ @nrwl/cypress@10.1.0
│ └── @angular-devkit/architect@0.1000.5  deduped
├─┬ @nrwl/jest@10.1.0
│ └── @angular-devkit/architect@0.1000.5  deduped
├─┬ @nrwl/schematics@9.0.0-beta.3
│ ├─┬ @nrwl/angular@9.0.0-beta.3
│ │ ├─┬ @nrwl/cypress@9.0.0-beta.3
│ │ │ └── @angular-devkit/architect@0.900.0-rc.5 
│ │ └─┬ @nrwl/jest@9.0.0-beta.3
│ │   └── @angular-devkit/architect@0.900.0-rc.5  deduped
│ └─┬ @nrwl/workspace@9.0.0-beta.3
│   └─┬ @nrwl/cli@9.0.0-beta.3
│     └─┬ @nrwl/tao@9.0.0-beta.3
│       └── @angular-devkit/architect@0.900.0-rc.5  deduped
└─┬ @nrwl/workspace@10.1.0
  └─┬ @nrwl/cli@10.1.0
    └─┬ @nrwl/tao@10.1.0
      └── @angular-devkit/architect@0.1000.5  deduped
npm list @angular-devkit/core

├─┬ @angular-builders/custom-webpack@10.0.0
│ ├─┬ @angular-devkit/architect@0.1000.5
│ │ └── @angular-devkit/core@10.0.5  deduped
│ ├─┬ @angular-devkit/build-angular@0.1000.5
│ │ ├─┬ @angular-devkit/build-webpack@0.1000.5
│ │ │ └── @angular-devkit/core@10.0.5  deduped
│ │ ├── @angular-devkit/core@10.0.5  deduped
│ │ └─┬ @ngtools/webpack@10.0.5
│ │   └── @angular-devkit/core@10.0.5  deduped
│ └── @angular-devkit/core@10.0.5 
├─┬ @angular-devkit/build-angular@0.1000.8
│ ├─┬ @angular-devkit/architect@0.1000.8
│ │ └── @angular-devkit/core@10.0.8  deduped
│ ├── @angular-devkit/core@10.0.8 
│ └─┬ @ngtools/webpack@10.0.8
│   └── @angular-devkit/core@10.0.8 
├─┬ @angular-devkit/build-webpack@0.1000.8
│ ├─┬ @angular-devkit/architect@0.1000.8
│ │ └── @angular-devkit/core@10.0.8  deduped
│ └── @angular-devkit/core@10.0.8 
├─┬ @angular/cli@10.0.8
│ ├─┬ @angular-devkit/architect@0.1000.8
│ │ └── @angular-devkit/core@10.0.8  deduped
│ ├── @angular-devkit/core@10.0.8 
│ ├─┬ @angular-devkit/schematics@10.0.8
│ │ └── @angular-devkit/core@10.0.8  deduped
│ ├─┬ @schematics/angular@10.0.8
│ │ ├── @angular-devkit/core@10.0.8 
│ │ └─┬ @angular-devkit/schematics@10.0.8
│ │   └── @angular-devkit/core@10.0.8  deduped
│ └─┬ @schematics/update@0.1000.8
│   ├── @angular-devkit/core@10.0.8 
│   └─┬ @angular-devkit/schematics@10.0.8
│     └── @angular-devkit/core@10.0.8  deduped
├─┬ @datorama/akita@4.23.0
│ └─┬ schematics-utilities@1.1.3
│   ├── @angular-devkit/core@7.3.9 
│   └─┬ @angular-devkit/schematics@7.3.9
│     └── @angular-devkit/core@7.3.9  deduped
├─┬ @nguniversal/builders@10.0.2
│ ├─┬ @angular-devkit/architect@0.1000.7
│ │ └── @angular-devkit/core@10.0.7  deduped
│ └── @angular-devkit/core@10.0.7 
├─┬ @nrwl/angular@10.1.0
│ ├─┬ @angular-devkit/schematics@10.0.5
│ │ └── @angular-devkit/core@10.0.5  deduped
│ └─┬ @schematics/angular@10.0.5
│   └── @angular-devkit/core@10.0.5  deduped
├─┬ @nrwl/cypress@10.1.0
│ └── @angular-devkit/core@10.0.5  deduped
├─┬ @nrwl/jest@10.1.0
│ └── @angular-devkit/core@10.0.5  deduped
├─┬ @nrwl/schematics@9.0.0-beta.3
│ ├─┬ @nrwl/angular@9.0.0-beta.3
│ │ ├─┬ @angular-devkit/schematics@9.0.0-rc.5
│ │ │ └── @angular-devkit/core@9.0.0-rc.5  deduped
│ │ ├─┬ @nrwl/cypress@9.0.0-beta.3
│ │ │ ├─┬ @angular-devkit/architect@0.900.0-rc.5
│ │ │ │ └── @angular-devkit/core@9.0.0-rc.5  deduped
│ │ │ └── @angular-devkit/core@9.0.0-rc.5  deduped
│ │ ├─┬ @nrwl/jest@9.0.0-beta.3
│ │ │ └── @angular-devkit/core@9.0.0-rc.5  deduped
│ │ └─┬ @schematics/angular@9.0.0-rc.5
│ │   └── @angular-devkit/core@9.0.0-rc.5  deduped
│ └─┬ @nrwl/workspace@9.0.0-beta.3
│   ├── @angular-devkit/core@9.0.0-rc.5 
│   └─┬ @nrwl/cli@9.0.0-beta.3
│     └─┬ @nrwl/tao@9.0.0-beta.3
│       └── @angular-devkit/core@9.0.0-rc.5  deduped
└─┬ @nrwl/workspace@10.1.0
  ├── @angular-devkit/core@10.0.5  deduped
  └─┬ @nrwl/cli@10.1.0
    └─┬ @nrwl/tao@10.1.0
      └── @angular-devkit/core@10.0.5  deduped
fasidOnGit commented 4 years ago

@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 commented 3 years ago

Nothing yet? having the same issue

guitarooman14 commented 3 years ago

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 commented 3 years ago

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

martinsotirov commented 3 years ago

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

Sieabah commented 3 years ago

Running in to similar issues with Angular 11.

Running this doesn't change the error.

jgutix commented 3 years ago

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 commented 3 years ago

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 commented 3 years ago

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 commented 3 years ago

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 commented 3 years ago

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 commented 3 years ago

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 commented 3 years ago

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 commented 3 years ago

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 commented 3 years ago

@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 commented 3 years ago

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.

samlanzz commented 3 years ago

In my case, the problem was a leftover configuration statement from my previous tslint configuration in angular.json lint options.

Before: 

"lint": {
          "builder": "@angular-eslint/builder:lint",
          "options": {
            "exclude": [
              "**/node_modules/**"
            ]
          }
        }

After: 

"lint": {
          "builder": "@angular-eslint/builder:lint",
          "options": {
            "lintFilePatterns": [
              "src/**/*.ts",
              "src/**/*.html"
            ]
          }
        }
SonicWim commented 1 year ago

I ended up here because it was the first Github hit for this error when trying to run some Udemy.com Angular tutorial code. Using Visual Studio Code and the instructions are unpack, npm i and ng serve but it's never that simple... :-p Too bad deprecated settings in angular.json are not picked up by the framework, or should this be VBCode's job?

But thanks @marselbeqiri for the tip!

matheo commented 4 months ago

I found out that I was using the wrong target in serve and getting this error path '' means the config doesn't exist so the misconfigured angular.json is pointing to an empty target I guess