question-mark
Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

Custom Webpack throws error on production build. Data path ".budgets[1].type" should be equal to one of the allowed values

See original GitHub issue

I 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:closed
  • Created 4 years ago
  • Comments:11 (4 by maintainers)

github_iconTop GitHub Comments

6reactions
dangrima90commented, Aug 14, 2019

@just-jeb No luck here too.

Just as a test I removed the bugets property from the configuration and the build ran successfully.

2reactions
just-jebcommented, Aug 14, 2019

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!

Read more comments on GitHub >

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

github_iconTop Related Medium Post

No results found

github_iconTop Related StackOverflow Question

No results found

github_iconTroubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free

github_iconTop Related Reddit Thread

No results found

github_iconTop Related Hackernoon Post

No results found

github_iconTop Related Tweet

No results found

github_iconTop Related Dev.to Post

No results found

github_iconTop Related Hashnode Post

No results found