Custom Webpack throws error on production build. Data path ".budgets[1].type" should be equal to one of the allowed values
See original GitHub issueI get an error message, when i try to build my angular app with a custom webpack config and production flag. Without the --prod flag, or the default builder, everything works fine.
I use Angular 8 custom-webpack-builder 8.1.0
Error Message
An unhandled exception occurred: Schema validation failed with the following errors: Data path ".budgets[1].type" should be equal to one of the allowed values.
Angular.json
{
"$schema": "./node_modules/@angular/cli/lib/config/schema.json",
"version": 1,
"newProjectRoot": "projects",
"projects": {
"unfall": {
"projectType": "application",
"schematics": {
"@schematics/angular:component": {
"style": "scss"
}
},
"root": "",
"sourceRoot": "src",
"prefix": "unfvor",
"architect": {
"build": {
"builder": "@angular-builders/custom-webpack:browser",
"options": {
"outputPath": "release/unfall",
"index": "src/index.html",
"main": "src/main.single-spa.ts",
"polyfills": "src/polyfills.ts",
"tsConfig": "tsconfig.app.json",
"aot": false,
"assets": [
"src/favicon.ico",
"src/assets"
],
"styles": [
"src/styles.scss"
],
"customWebpackConfig": {
"path": "./webpack.config.js"
}
},
"configurations": {
"production": {
"fileReplacements": [
{
"replace": "src/environments/environment.ts",
"with": "src/environments/environment.prod.ts"
}
],
"optimization": true,
"outputHashing": "none",
"sourceMap": false,
"extractCss": false,
"namedChunks": false,
"aot": true,
"extractLicenses": true,
"vendorChunk": false,
"buildOptimizer": true,
"budgets": [
{
"type": "initial",
"maximumWarning": "2mb",
"maximumError": "5mb"
},
{
"type": "anyComponentStyle",
"maximumWarning": "6kb",
"maximumError": "10kb"
}
]
}
}
},
"serve": {
"builder": "@angular-builders/custom-webpack:dev-server",
"options": {
"browserTarget": "unfall:build",
"port": 8888
},
"configurations": {
"production": {
"browserTarget": "unfall:build:production"
}
}
},
"extract-i18n": {
"builder": "@angular-devkit/build-angular:extract-i18n",
"options": {
"browserTarget": "unfall:build"
}
},
"test": {
"builder": "@angular-devkit/build-angular:karma",
"options": {
"main": "src/test.ts",
"polyfills": "src/polyfills.ts",
"tsConfig": "tsconfig.spec.json",
"karmaConfig": "karma.conf.js",
"assets": [
"src/favicon.ico",
"src/assets"
],
"styles": [
"src/styles.scss"
],
"scripts": []
}
},
"lint": {
"builder": "@angular-devkit/build-angular:tslint",
"options": {
"tsConfig": [
"tsconfig.app.json",
"tsconfig.spec.json",
"e2e/tsconfig.json"
],
"exclude": [
"**/node_modules/**"
]
}
}
}
}
},
"defaultProject": "@unfall/fe-unfall-vorschlagw"
}
package.json
{
"name": "@unfall/",
"version": "1.0.0",
"license": "MIT",
"scripts": {
"jest": "jest --coverage",
"start": "ng serve --disable-host-check --port 4200 --deploy-url http://localhost:4200/ --live-reload true",
"build": "ng build --prod --deploy-url http://localhost:4200/",
"test": "npm run lint && npm run jest && cd ../e2eCypress && npm run cypress:run-vrt && cd ../vorschlag",
"lint": "npm run tslint && npm run eslint",
"lint:fix": "eslint . --ext .ts --ignore-path .eslintignore --fix",
"tslint": "tslint -c ./tslint.json -p tsconfig.json -t stylish",
"eslint": "eslint . --ext .js --ext .ts --ignore-path .eslintignore"
},
"private": true,
"dependencies": {
"@angular-devkit/build-angular": "^0.802.1",
"@angular-redux/store": "^10.0.0",
"@angular/animations": "~8.2.0",
"@angular/cdk": "^7.3.7",
"@angular/common": "~8.2.0",
"@angular/compiler": "~8.2.0",
"@angular/core": "~8.2.0",
"@angular/forms": "~8.2.0",
"@angular/http": "^7.2.15",
"@angular/platform-browser": "~8.2.0",
"@angular/platform-browser-dynamic": "~8.2.0",
"@angular/router": "~8.2.0",
"@ngtools/webpack": "^7.3.9",
"@redux-saga/testing-utils": "^1.0.3",
"axios": "^0.19.0",
"combine-section-reducers": "^1.0.6",
"core-js": "^3.1.4",
"date-fns": "^1.30.1",
"detect-browser": "^4.5.1",
"file-saver": "^2.0.2",
"lodash.get": "^4.4.2",
"lodash.isempty": "^4.4.0",
"lodash.isequal": "^4.5.0",
"lodash.ismatch": "^4.4.0",
"lodash.isnil": "^4.0.0",
"lodash.mergewith": "^4.6.1",
"lodash.set": "^4.3.2",
"object-fit-images": "^3.2.4",
"redux": "4.0.1",
"redux-devtools-extension": "^2.13.8",
"redux-remotedev": "^0.3.0",
"redux-saga": "^1.0.3",
"regenerator-runtime": "^0.13.2",
"round-to": "^4.0.0",
"rxjs": "~6.4.0",
"single-spa-angular": "^3.0.1",
"smoothscroll-polyfill": "^0.4.4",
"tslib": "^1.10.0",
"webpack-merge": "^4.2.1",
"what-input": "^5.2.3",
"zone.js": "~0.9.1"
},
"devDependencies": {
"@angular-builders/custom-webpack": "^8.1.0",
"@angular-builders/jest": "^8.0.4",
"@angular-devkit/core": "^7.3.9",
"@angular-devkit/schematics": "7.3.9",
"@angular/cli": "~8.2.0",
"@angular/compiler-cli": "~8.2.0",
"@angular/language-service": "~8.2.0",
"@types/jasmine": "~3.3.8",
"@types/jasminewd2": "~2.0.3",
"@types/jest": "^24.0.17",
"@types/lodash": "^4.14.134",
"@types/node": "~8.9.4",
"@typescript-eslint/eslint-plugin": "^1.11.0",
"@typescript-eslint/parser": "^1.11.0",
"ajv": "^6.10.0",
"autoprefixer": "^9.6.0",
"axios-mock-adapter": "^1.16.0",
"codelyzer": "^5.0.0",
"copy-webpack-plugin": "^5.0.3",
"css-loader": "^3.0.0",
"cssnano": "^4.1.10",
"eslint": "^6.0.0",
"eslint-import-resolver-webpack": "^0.11.1",
"eslint-plugin-eslint-comments": "^3.1.2",
"eslint-plugin-html": "^5.0.5",
"eslint-plugin-import": "^2.17.3",
"eslint-plugin-jest": "^22.7.1",
"eslint-plugin-promise": "^4.1.1",
"eslint-plugin-redux-saga": "^1.0.0",
"eslint-plugin-sonarjs": "^0.4.0",
"eslint-plugin-typescript": "^0.14.0",
"eslint-plugin-unicorn": "^9.1.1",
"expect-more-jest": "^2.4.2",
"exports-loader": "^0.7.0",
"file-loader": "^4.0.0",
"generate-json-webpack-plugin": "^0.3.1",
"git-rev-sync": "^1.12.0",
"install": "^0.12.2",
"istanbul-instrumenter-loader": "^3.0.1",
"istanbul-lib-coverage": "^2.0.5",
"istanbul-reports": "^2.2.6",
"jasmine-core": "~3.4.0",
"jasmine-spec-reporter": "~4.2.1",
"jest": "^24.8.0",
"jest-cucumber": "^2.0.11",
"jest-preset-angular": "^7.1.1",
"jest-sonar-reporter": "^2.0.0",
"moment": "^2.24.0",
"ng-mocks": "^8.1.0",
"node-sass": "^4.12.0",
"postcss-import": "^12.0.1",
"postcss-loader": "^3.0.0",
"postcss-url": "^8.0.0",
"protractor": "~5.4.0",
"raw-loader": "^1.0.0",
"redux-saga-tester": "^1.0.483",
"sass-loader": "^7.1.0",
"source-map-loader": "^0.2.4",
"string-replace-loader": "^2.2.0",
"style-loader": "^0.23.1",
"ts-node": "~7.0.0",
"tslint": "~5.15.0",
"tslint-sonarts": "^1.9.0",
"typescript": "~3.5.3",
"uglifyjs-webpack-plugin": "^2.1.3",
"url-loader": "^2.0.0",
"webpack": "^4.35.0",
"webpack-bundle-analyzer": "^3.3.2",
"webpack-cli": "^3.3.5",
"webpack-dev-server": "^3.7.2",
"webpack-notifier": "^1.8.0"
},
"resolutions": {
"redux": "4.0.1"
},
"jestSonar": {
"reportFile": "test.report.xml",
"indent": 4
}
}
Issue Analytics
- State:
- Created 4 years ago
- Comments:11 (4 by maintainers)
Top Results From Across the Web
Data path "" should have required property 'browserTarget ...
I faced the same issue, updating angular/cli to the latest version helped in my case. Type in the command line: ng update @angular/cli....
Read more >Output - webpack
The bundle is written to the directory specified by the output.path option. For a single entry point, this can be a static name....
Read more >Serverless Webpack - Serverless Framework: Plugins
A Serverless Framework plugin to build your lambda functions with Webpack. This plugin is for you if you want to use the latest...
Read more >All You Need to Know about Webpack in Examples - Medium
You will know how to configure webpack, add assets, add css files, bundle your js file, starting a server, prod and dev build...
Read more >The best webpack configurations for React applications
Create React App (CRA) ships with webpack already under the hood, but usually, we would need to add more configurations as our app...
Read more >Top Related Medium Post
No results found
Top Related StackOverflow Question
No results found
Troubleshoot Live Code
Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start FreeTop Related Reddit Thread
No results found
Top Related Hackernoon Post
No results found
Top Related Tweet
No results found
Top Related Dev.to Post
No results found
Top Related Hashnode Post
No results found
Top GitHub Comments
@just-jeb No luck here too.
Just as a test I removed the
bugets
property from the configuration and the build ran successfully.anyComponentStyle
type was added a month ago in this commit.I can see that it exists in version 8.2 but it does not exist in version 8.1.
Seems like my initial assumption was right - it’s versioning problem. Once
custom-webpack@8.2
is out with the updated schema it will be fixed.@dangrima90 Thanks for the research!