CODEWITHSUNDEEP
angulartypescriptionic-frameworkionic2tsconfig
Manish Mishra
Manish Mishra

Reputation: 31

cannot find name 'Buffer' in ionic app when integrating 'amazon-cognito-identity-js'

enter image description here

cannot find name 'Buffer' in ionic app when integrating 'amazon-cognito-identity-js'

Upvotes: 3

Views: 3182

Answers (3)

ame
ame

Reputation: 851

I found a solution here:

You actually need to add "types": ["node"] to the tsconfig.app.json file that the angular-cli creates in the src directory. By default, types is an empty array.

https://github.com/aws/aws-sdk-js/issues/1271#issuecomment-291658668

Upvotes: 1

JasonPerr
JasonPerr

Reputation: 339

I found a couple different things that seemed to contribute to this issue. Thanks to Benny Neugebauer for his answer on this post: error TS2304: Cannot find name 'Buffer'

The key pieces I found to resolve this was to do the following.

  1. Use the stable release of NodeJS and not the newest release

  2. Install the typings tool with npm install -g typings

  3. Install Type definitions with typings install dt~node --global --save

  4. Verify you don't have these types installed as they cause issues with the only solution I've found to make both Windows and OSX work. npm remove @types/node

  5. Remove your node_modules folder and rebuild with yarn

  6. add reference path to app.component.ts

     /// <reference path="../../typings/index.d.ts" />

 export class YourClass {

After doing this everything worked. This was the only solution that worked in a Windows 10 environment and an OSX environment. My final tsconfig.json file looks like this FYI

   {
  "compilerOptions": {
    "allowSyntheticDefaultImports": true,
    "declaration": false,
    "emitDecoratorMetadata": true,
    "experimentalDecorators": true,
    "lib": [
      "dom",
      "es2015"
    ],
    "module": "es2015",
    "moduleResolution": "node",
    "sourceMap": true,
    "target": "es5"
  },
  "include": [
    "src/**/*.ts"
  ],
  "exclude": [
    "node_modules"
  ],
  "compileOnSave": false,
  "atom": {
    "rewriteTsconfig": false
  }
}

Upvotes: 0

nwayve
nwayve

Reputation: 2331

Had a similar issue including amazon-cognito-identity-js into an Angular 4 app. Basically Typescript doesn't understand these Node types (Buffer, http, stream, fs, etc...). To understand why, we need to look to how Typescript specifies packages to include.

By default all visible “@types” packages are included in your compilation. Packages in node_modules/@types of any enclosing folder are considered visible; specifically, that means packages within ./node_modules/@types/, ../node_modules/@types/, ../../node_modules/@types/, and so on.

If typesRoots is specified, only packages under typeRoots will be included. for example:

{
   "compilerOptions": {
       "typeRoots" : ["./typings"]
   }
}

This config file will include all packages under ./typings, and no packages from ./node_modules/@types.

If types is specified, only packages listed will be included. For instance:

{
   "compilerOptions": {
       "types" : ["node", "lodash", "express"]
   }
}

This tsconfig.json file will only include ./node_modules/@types/node, ./node_modules/@types/lodash and ./node_modules/@types/express. Other packages under node_modules/@types/* will not be included.

Hate to copy/paste basically the answer but I can't really word it any better than the docs.

Check if "typeRoots" and/or "types" are defined in any of the tsconfig.json files (angular-cli projects have ./tsconfig.json and ./app/tsconfig.app.json files).

If "typeRoots" is defined, ensure "node_modules/@types" is included. If "types" is defined, ensure "node" is included.

To include all @types, remove the "typeRoots" and "types" from the "compilerOptions" altogether, but keep in mind, this might create conflicts between different type declarations, so the best option is to probably have "node" included in the "types" property.

Upvotes: 0

Related Questions