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.