Skip to content

Production Build Problem: Cannot Find Name: Required #730

Open
@dresdor

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

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