Typescript error: Cannot find name 'Buffer'/'http'/'https'

[remimarenco]

Hi!

First, I want to thank you for this SDK, it will be very useful for us!

I have some errors when building the javascript bundle for my application (React/Typescript/Webpack). It seems to work anyway (or maybe I have not used it enough yet), but I am not comfortable building our app with errors :).

Here is an extract of the errors:

Hash: 6824b5df64cd8f5d85c3
Version: webpack 1.14.0
Time: 4139ms
          Asset     Size  Chunks             Chunk Names
    frontend.js  3.63 MB       0  [emitted]  main
frontend.js.map  5.28 MB       0  [emitted]  main
    + 617 hidden modules

ERROR in /Users/rmarenco/Dev/taiga/frontend/node_modules/aws-sdk/clients/wafregional.d.ts
(416,39): error TS2304: Cannot find name 'Buffer'.

...

ERROR in /Users/rmarenco/Dev/taiga/frontend/node_modules/aws-sdk/lib/config.d.ts
(1,34): error TS2307: Cannot find module 'http'.

ERROR in /Users/rmarenco/Dev/taiga/frontend/node_modules/aws-sdk/lib/config.d.ts
(2,35): error TS2307: Cannot find module 'https'.

And you can find the full errors on this gist => https://gist.github.com/remimarenco/c51c3170fbfd8d548e6fd2fe4542cdb1

I am also including my configuration files in the gist, in case they could be useful :). The architecture of my application is like this:

taiga/

• frontend/
  • node_modules/ <= All my frontend dependencies
  • src/ <= All my .tsx
  • package.json
• node_modules/ <= All my backend and dev dependencies
• taiga2/
  • static/ <= Folder where webpack store the outputs
• package.json
• tsconfig.json
• webpack.config.js

Do you think you know what is not correct in my configuration? Or is it on the sdk side + webpack (and/or typescript)?

Thanks a lot!

[chrisradek]

@remimarenco
TypeScript is complaining because some node environment types are needed. This is a limitation for now that we might be able to get around by stubbing those interfaces in the future.

I admit it's odd to have to include node typings for a front-end project, but can you try installing the environment typings to see if it gets around your issue?
npm install --save-dev @types/node

[remimarenco]

@chrisradek Thanks for you swift reply!

I came across this recommendation on different websites, but unfortunately it does not change anything :/.

Should I also include @types/aws-sdk? I had some issues with it that is why I did not add it yet.

[chrisradek]

I found a work-around, I have to dig deeper to see if the issue is related to just ts-loader or not.

In your tsconfig.json file, you can add "types": ["node"] as one of your compilerOptions. Then, also make sure to install @types/node at the same level as your tsconfig.json file. If I followed your gist correctly, that would be your top-level package.json, the one that's a sibling of your tsconfig.json file.

[remimarenco]

Hi @chrisradek!

A bit of feedback since I have followed your advice:

• I definitely need to add the "types": ["node"] + @types/node if I have ts-loader
• I only need to add @types/node if I have awesome-typescript-loader

Thanks again!

[pvamshi]

I have same problem. I am using angular-cli stable with Angular 4.
I added "types":["node"], but the problem still exists.
Any help is appreciated.

[chrisradek]

@pvamshi
Can you share what your config files look like? If you can provide a gist that would be helpful. These sorts of issues are hard to troubleshoot since they appear differently based on how a project is set up.

[pvamshi]

@chrisradek Sure. Here is my config . It's exactly what we get with cli except for the above mentioned line. Thanks in advance.

{
  "compileOnSave": false,
  "compilerOptions": {
    "outDir": "./dist/out-tsc",
    "baseUrl": "src",
    "sourceMap": true,
    "declaration": false,
    "moduleResolution": "node",
    "emitDecoratorMetadata": true,
    "experimentalDecorators": true,
    "target": "es5",
    "types" : ["node"],
    "typeRoots": [
      "node_modules/@types"
    ],
    "lib": [
      "es2016",
      "dom"
    ]
  }
}

Edit: package.json gist : https://gist.github.com/pvamshi/a2cb2c5bca99fe285ebddcabbb5f56f2

[chrisradek]

@pvamshi
Is your package.json file an accurate representation of your dependencies? I noticed the aws-sdk isn't listed.

[chrisradek]

@pvamshi
So, I was able to reproduce your issue. 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.

Based on these TypeScript docs:

Specify "types": [] to disable automatic inclusion of @types packages.

Since types is empty, it is excluding the node typings that you installed via npm install @types/node.

[pvamshi]

This worked , thanks a lot .

[mattroberts297]

I had the same issue as @pvamshi. @chrisradek's solution tsconfig.app.json worked for me, but because that file extends ../tsconfig.json you can also just delete "types": ["node"] if you followed his previous instructions re: tsconfig.json. Thanks for all your hard work troubleshooting this.

[webcat12345]

It works for me, thanks a lot

[huangzhenhong]

Updated tsconfig.app.json inside src folder, it works for me, thanks!

{
  "extends": "../tsconfig.json",
  "compilerOptions": {
    "outDir": "../out-tsc/app",
    "module": "es2015",
    "baseUrl": "",
    "types": ["node"]
  },
  "exclude": [
    "test.ts",
    "**/*.spec.ts"
  ]
}

[dpiechota]

I also had to add

"typeRoots": [
      "../node_modules/@types"
    ]

[tango2310]

Thanks so much @chrisradek That worked for me

[jeskew]

Based on the last comments, it sounds like this issue is resolved: there are some Angular-specific hurdles to using the dependent @types/node module, but with appropriate configuration everything works as expected.

Please let me know if I'm mistaken and there's something more the SDK should be doing here.

[AppField]

I've just had the same issue within an angular 4.3.3 project.
After installing @types/node and adding "node" to tsconfig.app.json the error is gone.

[RafPe]

I confirm this has worked out and was managed to run the code!

[jasbro-qut]

This worked for me as well. May I suggest, you could add this as an official step to take in the README.md. Based on the feedback here, it seems to help anyone adding aws-sdk to an angular-cli based project.

[danieladams456]

I was able to make it work by taking out the types key in tsconfig.app.json. Putting back in the empty list made it fail again, so it seems like the non-existence of that key also will fix the issue.

{
  "extends": "../tsconfig.json",
  "compilerOptions": {
    "outDir": "../out-tsc/app",
    "baseUrl": "./",
    "module": "es2015"
  },
  "exclude": [
    "test.ts",
    "**/*.spec.ts"
  ]
}

[gambheera88]

Worked for me the solution...! thanks

[lokeshkanagala]

After changing tsconfig.app.json, it worked for me. Changing tsconfig.json hasn't solved this issue.

[ghost]

After changing tsconfig.app.json, it worked for me. Changing tsconfig.json hasn't solved this issue. [2]

[ghost]

@danieladams456 solution worked for me. Seems like a bug in the SDK...

[ghost]

Link for those coming here after the fact: https://github.com/aws/aws-sdk-js#with-angular

[dudunato]

Hey there, I'm adding the types to my tsconfig.json then it gives me another error:

node_modules/@types/react-native/index.d.ts(8630,14): error TS2300: Duplicate identifier 'require'.
node_modules/@types/node/index.d.ts(140,13): error TS2300: Duplicate identifier 'require'.

Here's my tsconfig.json:

{
  "compilerOptions": {
    "target": "es2015",
    "module": "es2015",
    "moduleResolution": "node",
    "jsx": "react",
    "outDir": "compiled",
    "rootDir": "./src",
    "types": ["node", "react", "react-native", "jest"]
  },
  "include": ["./src/**/*"],
  "exclude": [
    "./compiled",
    "./node_modules"
  ]
}

It seems that node types are conflicting with react-native. Any thoughts?

cc @chrisradek

[jbownzino]

thank you @chrisradek!

[SagarMhatre]

thank you @chrisradek!

[brunolm]

It doesn't make any sense, but on Ionic you have to add this, even if it doesn't make sense. under compiler options

    "typeRoots": [
      "node_modules/@types"
    ]

[MissAnichka]

Found this while having the same/similar issues implementing awsmobile-cli and aws-amplify with angular5. Was receiving many webpack errors, followed the solutions in this order which solved my problem:

1. In tsconfig.json added: "allowJs": true in the “compilerOptions”
2. npm installed stream
3. In tsconfig.app.json added “node” to “types” array in “compilerOptions”
   Webpack compiled successfully!
   Thank you very much for the solutions 💯 🥇 👍

[Jun711]

Hi @MissAnichka, did you have this error message:
ERROR in /Users/j/Projects/commercial/node_modules/aws-amplify/lib/PubSub/Providers/MqttOverWSProvider.d.ts (1,23): Cannot find type definition file for 'paho-mqtt'.

EDIT: fix is
npm i –save-dev @types/zen-observable
npm i –save-dev @types/paho-mqtt

[p-sebastian]

For anybody using the ionic framework, and wanting to use the aws-sdk with typings. Its a bit different than what explained above:

• npm install --save-dev @types/node
• copy ./node_modules/@types/node/index.d.ts ; to ./src/providers
• npm uninstall --save-dev @types/node

then you should be able to build
if you still get errors, go into the typings file you just copied and clear the errors, there should be a reference import on line 30, that you can comment out, and on line 2381: class URL says its duplicate, just rename it, and URLSearchParams below.

[jayeshkorat18]

Thanks @chrisradek
Your solution work for me. Thanks again.

[dreadnautxbuddha]

Updated tsconfig.app.json inside src folder, it works for me, thanks!

{
  "extends": "../tsconfig.json",
  "compilerOptions": {
    "outDir": "../out-tsc/app",
    "module": "es2015",
    "baseUrl": "",
    "types": ["node"]
  },
  "exclude": [
    "test.ts",
    "**/*.spec.ts"
  ]
}

This fixed it for me. Thanks @huangzhenhong !

[affanshahab]

Hello @chrisradek, thanks for the sdk and your replies on this thread.
We have been using aws-sdk (version: 2.177.0) in an angular 4 project for an year now and it never complained and one day out of no where it started to give error as mentioned in this ticket. Our project was working fine locally but it started to get failed in AWS-CodeBuild. We googled and followed steps in this thread and the error was gone. Before trying this we even tried to use the latest sdk, it didn't work. Removing sdk at all also worked. Anyway we added "types":["node"] and it started to work but we need to know the root cause what could be the reason it stopped working out of no where? Thanks for your efforts.

[lock]

This thread has been automatically locked since there has not been any recent activity after it was closed. Please open a new issue for related bugs and link to relevant comments in this thread.