New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

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

Closed
remimarenco opened this Issue Dec 15, 2016 · 33 comments

Comments

Projects
None yet
@remimarenco

remimarenco commented Dec 15, 2016

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

This comment has been minimized.

Show comment
Hide comment
@chrisradek

chrisradek Dec 15, 2016

Member

@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

Member

chrisradek commented Dec 15, 2016

@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

This comment has been minimized.

Show comment
Hide comment
@remimarenco

remimarenco Dec 15, 2016

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

remimarenco commented Dec 15, 2016

@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

This comment has been minimized.

Show comment
Hide comment
@chrisradek

chrisradek Dec 16, 2016

Member

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.

Member

chrisradek commented Dec 16, 2016

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

This comment has been minimized.

Show comment
Hide comment
@remimarenco

remimarenco Dec 23, 2016

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!

remimarenco commented Dec 23, 2016

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

This comment has been minimized.

Show comment
Hide comment
@pvamshi

pvamshi Apr 3, 2017

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.

pvamshi commented Apr 3, 2017

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

This comment has been minimized.

Show comment
Hide comment
@chrisradek

chrisradek Apr 3, 2017

Member

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

Member

chrisradek commented Apr 3, 2017

@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

This comment has been minimized.

Show comment
Hide comment
@pvamshi

pvamshi Apr 3, 2017

@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

pvamshi commented Apr 3, 2017

@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

This comment has been minimized.

Show comment
Hide comment
@chrisradek

chrisradek Apr 4, 2017

Member

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

Member

chrisradek commented Apr 4, 2017

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

@chrisradek

This comment has been minimized.

Show comment
Hide comment
@chrisradek

chrisradek Apr 4, 2017

Member

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

Member

chrisradek commented Apr 4, 2017

@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 comment has been minimized.

Show comment
Hide comment
@pvamshi

pvamshi Apr 8, 2017

This worked , thanks a lot .

pvamshi commented Apr 8, 2017

This worked , thanks a lot .

@mattroberts297

This comment has been minimized.

Show comment
Hide comment
@mattroberts297

mattroberts297 Apr 25, 2017

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.

1nvcp6

mattroberts297 commented Apr 25, 2017

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.

1nvcp6

@jeskew jeskew added Typings and removed Question labels May 4, 2017

@webcat12345

This comment has been minimized.

Show comment
Hide comment
@webcat12345

webcat12345 Jul 25, 2017

It works for me, thanks a lot

webcat12345 commented Jul 25, 2017

It works for me, thanks a lot

@huangzhenhong

This comment has been minimized.

Show comment
Hide comment
@huangzhenhong

huangzhenhong Aug 4, 2017

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"
  ]
}

huangzhenhong commented Aug 4, 2017

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"
  ]
}
@mozowski

This comment has been minimized.

Show comment
Hide comment
@mozowski

mozowski Aug 6, 2017

I also had to add

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

mozowski commented Aug 6, 2017

I also had to add

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

This comment has been minimized.

Show comment
Hide comment
@tango2310

tango2310 Aug 8, 2017

Thanks so much @chrisradek That worked for me

tango2310 commented Aug 8, 2017

Thanks so much @chrisradek That worked for me

@jeskew

This comment has been minimized.

Show comment
Hide comment
@jeskew

jeskew Aug 8, 2017

Member

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.

Member

jeskew commented Aug 8, 2017

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.

@TheAppField

This comment has been minimized.

Show comment
Hide comment
@TheAppField

TheAppField Aug 11, 2017

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.

TheAppField commented Aug 11, 2017

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

This comment has been minimized.

Show comment
Hide comment
@RafPe

RafPe Aug 30, 2017

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

RafPe commented Aug 30, 2017

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

@jasbro-qut

This comment has been minimized.

Show comment
Hide comment
@jasbro-qut

jasbro-qut Sep 2, 2017

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.

jasbro-qut commented Sep 2, 2017

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

This comment has been minimized.

Show comment
Hide comment
@danieladams456

danieladams456 Sep 11, 2017

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"
  ]
}

danieladams456 commented Sep 11, 2017

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

This comment has been minimized.

Show comment
Hide comment
@gambheera88

gambheera88 Sep 21, 2017

Worked for me the solution...! thanks

gambheera88 commented Sep 21, 2017

Worked for me the solution...! thanks

@lokeshkanagala

This comment has been minimized.

Show comment
Hide comment
@lokeshkanagala

lokeshkanagala Sep 24, 2017

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

lokeshkanagala commented Sep 24, 2017

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

@ghost

This comment has been minimized.

Show comment
Hide comment
@ghost

ghost Oct 7, 2017

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

ghost commented Oct 7, 2017

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

@ghost

This comment has been minimized.

Show comment
Hide comment
@ghost

ghost Oct 18, 2017

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

ghost commented Oct 18, 2017

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

@ghost

This comment has been minimized.

Show comment
Hide comment
@ghost

ghost Oct 23, 2017

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

ghost commented Oct 23, 2017

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

@dudunato

This comment has been minimized.

Show comment
Hide comment
@dudunato

dudunato Feb 11, 2018

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

dudunato commented Feb 11, 2018

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

This comment has been minimized.

Show comment
Hide comment
@jbownzino

jbownzino commented Mar 12, 2018

thank you @chrisradek!

@SagarMhatre

This comment has been minimized.

Show comment
Hide comment
@SagarMhatre

SagarMhatre commented Mar 18, 2018

thank you @chrisradek!

@spectrum-bot spectrum-bot referenced this issue Mar 19, 2018

Merged

2.1.9 #2602

1 of 3 tasks complete
@brunolm

This comment has been minimized.

Show comment
Hide comment
@brunolm

brunolm Mar 23, 2018

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"
    ]

brunolm commented Mar 23, 2018

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

This comment has been minimized.

Show comment
Hide comment
@MissAnichka

MissAnichka Mar 23, 2018

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 💯 🥇 👍

MissAnichka commented Mar 23, 2018

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

This comment has been minimized.

Show comment
Hide comment
@Jun711

Jun711 Mar 29, 2018

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

Jun711 commented Mar 29, 2018

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

This comment has been minimized.

Show comment
Hide comment
@p-sebastian

p-sebastian Apr 27, 2018

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.

p-sebastian commented Apr 27, 2018

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

This comment has been minimized.

Show comment
Hide comment
@jayeshkorat18

jayeshkorat18 Jun 10, 2018

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

jayeshkorat18 commented Jun 10, 2018

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

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