9.0.0-rc.4 build - createWebpack(...).pipe is not a function

[intellix]

🐞 Bug report

Command (mark with an x)

• new
• build
• serve
• test
• e2e
• generate
• add
• update
• lint
• xi18n
• run
• config
• help
• version
• doc

Description

A clear and concise description of the problem...

ng build --prod gives a createWebpack(...).pipe error when trying to build after: ng update @angular/cli @angular/core --force. Serving the project works perfectly fine.

🔬 Minimal Reproduction

ng build --prod

🔥 Exception or Error

[error] TypeError: createWebpack(...).pipe is not a function
    at Object.runWebpack (/Users/dom/Projects/fe/node_modules/@angular-devkit/build-angular/node_modules/@angular-devkit/build-webpack/src/webpack/index.js:20:34)
    at SwitchMapSubscriber.project (/Users/dom/Projects/fe/node_modules/@angular-devkit/build-angular/src/browser/index.js:128:32)
    at SwitchMapSubscriber._next (/Users/dom/Projects/fe/node_modules/rxjs/internal/operators/switchMap.js:49:27)
    at SwitchMapSubscriber.Subscriber.next (/Users/dom/Projects/fe/node_modules/rxjs/internal/Subscriber.js:66:18)
    at /Users/dom/Projects/fe/node_modules/rxjs/internal/util/subscribeToPromise.js:7:24

🌍 Your Environment

Angular CLI: 9.0.0-rc.4
Node: 12.13.1
OS: darwin x64

Angular: 9.0.0-rc.4
... animations, cli, common, compiler, compiler-cli, core, forms
... language-service, platform-browser, platform-browser-dynamic
... platform-server, router
Ivy Workspace: Yes

Package                           Version
-----------------------------------------------------------
@angular-devkit/architect         0.803.14
@angular-devkit/build-angular     0.900.0-rc.4
@angular-devkit/build-optimizer   0.900.0-rc.4
@angular-devkit/build-webpack     0.900.0-rc.4
@angular-devkit/core              8.3.14
@angular-devkit/schematics        8.3.14
@angular/cdk                      8.2.3
@angular/flex-layout              8.0.0-beta.27
@angular/material                 8.2.3
@ngtools/webpack                  9.0.0-rc.4
@nguniversal/common               8.1.1
@nguniversal/express-engine       8.1.1
@schematics/angular               8.3.14
@schematics/update                0.900.0-rc.4
rxjs                              6.5.3
typescript                        3.6.4
webpack                           4.41.2

I'm not sure if you have enough to debug here. Didn't find any related issue so am creating this with all the info I have. I can debug further with some guidance.

[clydin]

Are you using nx within the workspace?

[intellix]

yes. Sorry I forgot to mention that :S

[filipesilva]

This might be similar to #16207

[FrozenPandaz]

Hey @intellix,

I think you may have @angular-devkit/architect in your package.json. I recommend removing it if possible or making sure that version is updated as well to match the version used by other packages (@angular-devkit/build-angular and @nrwl/node)

You should also update @nrwl/ dependencies via ng update @nrwl/workspace --next

[intellix]

@angular-devkit/architect wasn't in our package.json but we updated @nrwl to latest and it got us a step further. Now it's just:

ERROR in Cannot read property 'length' of undefined

When doing:

ng build --prod

If we build without the --prod flag then it seems ok

Tried to inspect and break on errors. Got errors like the "object could not be cloned" with a reference to a part of our angular.json file:

The app config looks like:

"projects": {
"whitelabel": {
  "root": "apps/whitelabel/",
  "sourceRoot": "apps/whitelabel/src",
  "projectType": "application",
  "prefix": "tma",
  "schematics": {
    "@nrwl/angular:component": {
      "style": "scss",
      "changeDetection": "OnPush"
    }
  },
  "architect": {
    "build": {
      "builder": "@angular-devkit/build-angular:browser",
      "options": {
        "outputPath": "dist/apps/whitelabel/browser",
        "index": "apps/whitelabel/src/index.html",
        "main": "apps/whitelabel/src/main.ts",
        "polyfills": "apps/whitelabel/src/polyfills.ts",
        "tsConfig": "apps/whitelabel/tsconfig.app.json",
        "assets": [
          "apps/whitelabel/src/favicon.ico",
          "apps/whitelabel/src/assets",
          "apps/whitelabel/src/robots.txt",
          "apps/whitelabel/src/redirect.html"
        ],
        "styles": ["apps/whitelabel/src/styles.scss"],
        "scripts": [],
        "stylePreprocessorOptions": {
          "includePaths": ["scss"]
        }
      },
      "configurations": {
        "production": {
          "crossOrigin": "anonymous",
          "fileReplacements": [
            {
              "replace": "apps/whitelabel/src/environments/environment.ts",
              "with": "apps/whitelabel/src/environments/environment.prod.ts"
            }
          ],
          "optimization": true,
          "outputHashing": "all",
          "sourceMap": false,
          "extractCss": true,
          "namedChunks": false,
          "aot": true,
          "extractLicenses": true,
          "vendorChunk": false,
          "buildOptimizer": true,
          "budgets": [
            {
              "type": "initial",
              "maximumWarning": "2mb",
              "maximumError": "5mb"
            },
            {
              "type": "anyComponentStyle",
              "maximumWarning": "6kb"
            }
          ]
        }
      }
    },
    "serve": {
      "builder": "@angular-devkit/build-angular:dev-server",
      "options": {
        "browserTarget": "whitelabel:build"
      },
      "configurations": {
        "production": {
          "browserTarget": "whitelabel:build:production"
        }
      }
    },
    "extract-i18n": {
      "builder": "@angular-devkit/build-angular:extract-i18n",
      "options": {
        "browserTarget": "whitelabel:build"
      }
    },
    "lint": {
      "builder": "@angular-devkit/build-angular:tslint",
      "options": {
        "tsConfig": ["apps/whitelabel/tsconfig.app.json", "apps/whitelabel/tsconfig.spec.json"],
        "exclude": ["**/node_modules/**", "!apps/whitelabel/**"]
      }
    },
    "test": {
      "builder": "@nrwl/jest:jest",
      "options": {
        "jestConfig": "apps/whitelabel/jest.config.js",
        "tsConfig": "apps/whitelabel/tsconfig.spec.json",
        "setupFile": "apps/whitelabel/src/test-setup.ts"
      }
    },
    "server": {
      "builder": "@angular-devkit/build-angular:server",
      "options": {
        "outputPath": "dist/apps/whitelabel/server",
        "main": "apps/whitelabel/src/main.server.ts",
        "tsConfig": "apps/whitelabel/tsconfig.server.json"
      },
      "configurations": {
        "production": {
          "fileReplacements": [
            {
              "replace": "apps/whitelabel/src/environments/environment.ts",
              "with": "apps/whitelabel/src/environments/environment.prod.ts"
            }
          ],
          "sourceMap": false,
          "optimization": {
            "scripts": false,
            "styles": true
          }
        }
      }
    },
    "sls-deploy": {
      "builder": ".:sls-deploy",
      "options": {
        "config": "apps/whitelabel/serverless.js"
      }
    },
    "sls-remove": {
      "builder": ".:sls-remove",
      "options": {
        "config": "apps/whitelabel/serverless.js"
      }
    }
  }
},

Not sure if it's related to the build error but. Updating to rc.5 changed nothing either

[filipesilva]

Did you get a stack trace for the error?

[intellix]

nope unfortunately not. I'll try and get more information

[clydin]

@intellix Have you tried with the latest next version of nx? The recently published version updates the Angular dependencies to rc.5.

[intellix]

Not quite sure how to get more information really. If I do an --inspect-brk the debug server just dies at the very end. If I try to break on exceptions I'm getting a billion module resolver errors which could take years to step through!

If I do an ng build --prod --verbose I get a bunch of stuff and the last part is:

➜  lambda-gaming git:(9-ivy) ng build --prod --verbose
<w> [webpack.Progress] 4135ms building
<i> [webpack.Progress] 12ms chunk assets processing
<w> [webpack.Progress] 2250ms chunk asset optimization

WARNING in Terser Plugin: Condition always true [polyfills-es5.2ba581e8d87bcbff9df5.js:1381,3]

WARNING in Terser Plugin: Side effects in initialization of unused variable core_js_es_symbol__WEBPACK_IMPORTED_MODULE_0__ [polyfills-es5.2ba581e8d87bcbff9df5.js:6146,25]

....... (loads more of the same stuff)

WARNING in Terser Plugin: Dropping duplicated definition of variable result [polyfills-es5.2ba581e8d87bcbff9df5.js:9148,16]

WARNING in Terser Plugin: Dropping duplicated definition of variable result [polyfills-es5.2ba581e8d87bcbff9df5.js:9164,16]

WARNING in Terser Plugin: Condition always true [polyfills-es5.2ba581e8d87bcbff9df5.js:8800,5]

ERROR in Cannot read property 'length' of undefined

Currently:

Angular CLI: 9.0.0-rc.5
Node: 12.13.1
OS: darwin x64

Angular: 9.0.0-rc.5
... animations, cli, common, compiler, compiler-cli, core, forms
... language-service, platform-browser, platform-browser-dynamic
... platform-server, router
Ivy Workspace: Yes

Package                           Version
-----------------------------------------------------------
@angular-devkit/architect         0.900.0-rc.5
@angular-devkit/build-angular     0.900.0-rc.5
@angular-devkit/build-optimizer   0.900.0-rc.5
@angular-devkit/build-webpack     0.900.0-rc.5
@angular-devkit/core              9.0.0-rc.5
@angular-devkit/schematics        9.0.0-rc.5
@angular/cdk                      8.2.3
@angular/flex-layout              8.0.0-beta.27
@angular/material                 8.2.3
@ngtools/webpack                  9.0.0-rc.5
@nguniversal/common               8.1.1
@nguniversal/express-engine       8.1.1
@schematics/angular               9.0.0-rc.5
@schematics/update                0.900.0-rc.5
rxjs                              6.5.3
typescript                        3.6.4
webpack                           4.41.2

nrwl deps:

"@nrwl/angular": "^9.0.0-beta.3",
"@nrwl/cypress": "9.0.0-beta.3",
"@nrwl/jest": "9.0.0-beta.3",
"@nrwl/workspace": "9.0.0-beta.3",

Resolutions:

  "resolutions": {
    "@types/node": "10.17.6",
    "typescript": "3.5.3"
  },