Production Build Problem: Cannot Find Name: Required

[dresdor]

Receiving the following dump when running a prod build, but not for a dev build:

    ERROR in ClientApp/app/models/configurationexperience/cx-simulator.ts(14,21): error TS2580: Cannot find name 'require'. Do you need to install type definitions for node? Try `npm i @types/node` and then add `node` to the types field in your tsconfig.
    ClientApp/app/shared/services/availability/availability.service.ts(23,20): error TS2580: Cannot find name 'require'. Do you need to install type definitions for node? Try `npm i @types/node` and then add `node` to the types field in your tsconfig.
    ClientApp/app/components/admin/adminfile.component.ts(35,29): error TS2580: Cannot find name 'Buffer'. Do you need to install type definitions for node? Try `npm i @types/node` and then add `node` to the types field in your tsconfig.
    ClientApp/app/components/admin/admintable.component.ts(43,29): error TS2580: Cannot find name 'Buffer'. Do you need to install type definitions for node? Try `npm i @types/node` and then add `node` to the types field in your tsconfig.
    ClientApp/app/components/appbar/appbar.component.ts(22,25): error TS2580: Cannot find name 'require'. Do you need to install type definitions for node? Try `npm i @types/node` and then add `node` to the types field in your tsconfig.
    ClientApp/app/components/globalnav/globalnav.component.ts(42,26): error TS2304: Cannot find name 'global'.
    ClientApp/app/components/globalnav/globalnav.component.ts(49,7): error TS2304: Cannot find name 'global'.
    ClientApp/app/components/globalnav/globalnav.component.ts(54,5): error TS2304: Cannot find name 'global'.
    ClientApp/app/components/jobs/jobcollectionform/group/groupfiles.component.ts(10,24): error TS2307: Cannot find module 'stream'.
    ClientApp/app/components/jobs/jobcollectionform/group/groupadditionalinfo.component.ts(42,29): error TS2580: Cannot find name 'Buffer'. Do you need to install type definitions for node? Try `npm i @types/node` and then add `node` to the types field in your tsconfig.
    ClientApp/app/components/template/templatemanager.component.ts(11,24): error TS2307: Cannot find module 'cluster'.
    ClientApp/app/components/template/templatemanager.component.ts(12,22): error TS2307: Cannot find module 'fs'.
    ClientApp/app/components/template/templatemanager.component.ts(261,31): error TS2580: Cannot find name 'Buffer'. Do you need to install type definitions for node? Try `npm i @types/node` and then add `node` to the types field in your tsconfig.
    ClientApp/app/components/configurationexperience/output-side/dimension/dimension.component.ts(10,21): error TS2580: Cannot find name 'require'. Do you need to install type definitions for node? Try `npm i @types/node` and then add `node` to the types field in your tsconfig.
    ClientApp/app/components/configurationexperience/inputcomponents/drywetbulbrelative/drywetbulbrelative.component.ts(13,21): error TS2580: Cannot find name 'require'. Do you need to install type definitions for node? Try `npm i @types/node` and then add `node` to the types field in your tsconfig.
    ClientApp/app/components/configurationexperience/inputcomponents/number/number.component.ts(11,21): error TS2580: Cannot find name 'require'. Do you need to install type definitions for node? Try `npm i @types/node` and then add `node` to the types field in your tsconfig.
    ClientApp/app/components/configurationexperience/input-side/temtrol/temtrol.component.ts(11,21): error TS2580: Cannot find name 'require'. Do you need to install type definitions for node? Try `npm i @types/node` and then add `node` to the types field in your tsconfig.
    ClientApp/app/components/configurationexperience/output-side/weight/weight.component.ts(11,21): error TS2580: Cannot find name 'require'. Do you need to install type definitions for node? Try `npm i @types/node` and then add `node` to the types field in your tsconfig.
    ClientApp/boot.browser.ts(7,5): error TS2580: Cannot find name 'module'. Do you need to install type definitions for node? Try `npm i @types/node` and then add `node` to the types field in your tsconfig.
    ClientApp/boot.browser.ts(8,3): error TS2580: Cannot find name 'module'. Do you need to install type definitions for node? Try `npm i @types/node` and then add `node` to the types field in your tsconfig.
    ClientApp/boot.browser.ts(9,3): error TS2580: Cannot find name 'module'. Do you need to install type definitions for node? Try `npm i @types/node` and then add `node` to the types field in your tsconfig.
    ClientApp/boot.server.PRODUCTION.ts(7,32): error TS2580: Cannot find name 'require'. Do you need to install type definitions for node? Try `npm i @types/node` and then add `node` to the types field in your tsconfig.

I have run npm i @types/node, and also some of the other fixes I've found online (such as ensuring tsconfig has "types": ["node"] and "typeRoots": [ "node_modules/@types" ] in it). Nothing is resolving this issue.

This project was started from the angular 5 version of this repo, and this is the last step of updating it to the angular 7 version.

If it matters: npm -v : 5.6.0 node -v: 8.9.4

tsconfig.json

{
  "compilerOptions": {
    "moduleResolution": "node",
    "module": "es2015",
    "target": "es5",
    "alwaysStrict": true,
    "noImplicitAny": false,
    "sourceMap": true,
    "experimentalDecorators": true,
    "emitDecoratorMetadata": true,
    "skipDefaultLibCheck": true,
    "skipLibCheck": true,
    "allowUnreachableCode": false,
    "lib": [
      "es2016",
      "dom"
    ],
    "types": [ "node" ],
    "typeRoots": [ "node_modules/@types" ]
  },
  "include": [
    "ClientApp"
  ]
}

package.json

{
  "name": "Web.Application.Name",
  "version": "1.0.0-rc4",
  "scripts": {
    "clean:install": "npm run clean && rimraf ./node_modules ./bin ./obj ./package-lock.json && dotnet restore Web.Application.Name.csproj && npm i",
    "lint": "tslint -p tsconfig.json",
    "test": "npm run build:vendor && karma start ClientApp/test/karma.conf.js",
    "test:watch": "npm run test -- --auto-watch --no-single-run",
    "test:ci": "npm run test -- --browsers PhantomJS_custom",
    "test:ci:watch": "npm run test:ci -- --auto-watch --no-single-run",
    "test:coverage": "npm run test -- --coverage",
    "build:dev": "npm run build:vendor && npm run build:webpack",
    "build:webpack": "webpack --progress --color",
    "build:prod": "npm run clean && npm run build:vendor -- --env.prod && npm run build:webpack -- --env.prod",
    "build": "npm run build:webpack -- --env.prod",
    "build:vendor": "webpack --config webpack.config.vendor.js --progress --color",
    "clean": "rimraf wwwroot/dist clientapp/dist"
  },
  "dependencies": {
    "@angular/animations": "~7.2.0",
    "@angular/cdk": "7.3.7",
    "@angular/common": "~7.2.0",
    "@angular/compiler": "~7.2.0",
    "@angular/compiler-cli": "~7.2.15",
    "@angular/core": "~7.2.0",
    "@angular/forms": "~7.2.0",
    "@angular/http": "~7.2.0",
    "@angular/material": "^7.3.7",
    "@angular/platform-browser": "~7.2.0",
    "@angular/platform-browser-dynamic": "~7.2.0",
    "@angular/platform-server": "~7.2.0",
    "@angular/router": "~7.2.0",
    "@auth0/angular-jwt": "^2.1.0",
    "@ng-idle/core": "^7.0.0-beta.1",
    "@ngrx/effects": "8.0.1",
    "@ngrx/store": "^8.0.1",
    "@nguniversal/aspnetcore-engine": "^7.1.0",
    "@nguniversal/common": "^7.1.0",
    "@ngx-translate/core": "^11.0.1",
    "@ngx-translate/http-loader": "^4.0.0",
    "angular2-router-loader": "^0.3.5",
    "angular2-template-loader": "^0.6.2",
    "aspnet-prerendering": "^3.0.1",
    "aspnet-webpack": "^3.0.0",
    "awesome-typescript-loader": "^5.2.1",
    "bootstrap": "^4.3.1",
    "convert-units": "^2.3.4",
    "core-js": "^2.6.5",
    "css": "^2.2.4",
    "css-loader": "^2.1.0",
    "error-stack-parser": "^2.0.2",
    "event-source-polyfill": "^1.0.5",
    "expose-loader": "^0.7.5",
    "file-loader": "^3.0.1",
    "file-saver": "^2.0.2",
    "hammerjs": "^2.0.8",
    "html-loader": "^0.5.5",
    "isomorphic-fetch": "^2.2.1",
    "jquery": "^3.3.1",
    "json-loader": "^0.5.7",
    "minimist": "0.0.8",
    "minipass": "^2.3.5",
    "mkdirp": "^0.5.1",
    "moment": "^2.24.0",
    "moment-timezone": "^0.5.25",
    "ng2-pdf-viewer": "^5.3.2",
    "ngx-bootstrap": "^3.2.0",
    "node-sass": "^4.12.0",
    "popper.js": "^1.15.0",
    "preboot": "^7.0.0",
    "raw-loader": "^1.0.0",
    "rimraf": "^2.6.3",
    "rxjs": "6.3.3",
    "safe-buffer": "^5.1.2",
    "sass-loader": "^7.1.0",
    "style-loader": "^0.23.1",
    "to-string-loader": "^1.1.5",
    "typescript": "~3.2.2",
    "url-loader": "^1.1.2",
    "webpack": "^4.29.5",
    "webpack-env": "^0.8.0",
    "webpack-hot-middleware": "^2.24.3",
    "webpack-merge": "^4.2.1",
    "yallist": "^3.0.3",
    "zone.js": "^0.8.29"
  },
  "devDependencies": {
    "@angular-devkit/build-angular": "~0.13.3",
    "@angular/cli": "~7.3.3",
    "@angular/compiler-cli": "~7.2.0",
    "@ngtools/webpack": "~7.3.3",
    "@types/jasmine": "~2.8.8",
    "@types/node": "^11.13.15",
    "codelyzer": "~4.5.0",
    "istanbul-instrumenter-loader": "^3.0.1",
    "jasmine-core": "^3.3.0",
    "jasmine-spec-reporter": "^4.2.1",
    "karma": "~4.0.0",
    "karma-chrome-launcher": "~2.2.0",
    "karma-coverage": "~1.1.2",
    "karma-jasmine": "~2.0.1",
    "karma-mocha-reporter": "^2.2.5",
    "karma-phantomjs-launcher": "^1.0.4",
    "karma-remap-coverage": "^0.1.5",
    "karma-sourcemap-loader": "^0.3.7",
    "karma-webpack": "4.0.2",
    "mini-css-extract-plugin": "^0.5.0",
    "terser-webpack-plugin": "^1.2.3",
    "tslint": "~5.11.0",
    "typescript": "~3.2.2",
    "uglifyjs-webpack-plugin": "^2.1.2",
    "webpack-bundle-analyzer": "^3.0.4",
    "webpack-cli": "^3.3.5"
  }
}

Example usage causing the first error:

  private convert = require('convert-units');

Another error (buffer)

  public downloadFile(): void {
    this.message = "";
    this.downloadInProgress = true;
    let fileNamePrefix = this.dataEndpoint["displayName"].replace("/", "-");
    this.system.getDataManagementFile(this.dataEndpoint["domain"], this.dataEndpoint["fileEndpoint"]).then(
      (res: any) => {
        var byteArray = new Buffer(res, 'base64');   // error on this line
        const data: Blob = new Blob([byteArray], {
          type: EXCEL_TYPE
        });
        FileSaver.saveAs(data, fileNamePrefix + '_' + new Date().getTime() + this.dataEndpoint["fileExtension"]);
        this.downloadInProgress = false;
      }, err => {
        console.log("Unable to download file");
        this.downloadInProgress = false;
        this.message = "Failed to download file";
      });
  }

[RobertThwaite]

Same issue for me... Any update @dresdor

[dresdor]

@RobertThwaite No, unfortunately. I elected to update to angular 6 instead, as that was doable without errors (we were on 5). My current guess is that there's a dependency on a higher version of node or npm (or both) but updating would be a breaking change for our development team, so we need to get some fixes in place before we can attempt it.

[RobertThwaite]

@dresdor DAMN! exact same boat as you. Was hoping you was the cure! Thanks for initial outlook, I'll give another couple hours then come to same conclusion as you then.