Production Build Problem: Cannot Find Name: Required · Issue #730 · TrilonIO/aspnetcore-angular-universal · GitHub
Skip to content

Production Build Problem: Cannot Find Name: Required #730

Open

Description

@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";
      });
  }

Activity

  1. RobertThwaite commented on Jul 3, 2019

    @RobertThwaite

    Same issue for me... Any update @dresdor

  2. dresdor commented on Jul 3, 2019

    @dresdor
    Author

    @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.

  3. RobertThwaite commented on Jul 3, 2019

    @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.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Metadata

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Type

    No type

    Projects

    No projects

      Milestone

      No milestone

      Relationships

      None yet

      Development

      No branches or pull requests

      Issue actions