Typescript: console.log auto imports import console=require('console');

Created on 10 Mar 2019  ·  42Comments  ·  Source: microsoft/TypeScript

Steps to Reproduce:
type console.. 7 times out of 10, vscode will insert import console=require('console');in the imports top of the file leading to a compilation error.

Single most annoying issue of vs code by far.


Does this issue occur when all extensions are disabled?: Not sure

Bug Fixed VS Code Priority

Most helpful comment

Add a console.d.ts file to your src root and add the following contents:

declare module 'console' {
    export = typeof import("console");
}

That will fix your import

All 42 comments

Same here (Ubuntu 18.04). It came with the new VSCode update.. Very annoying.

Seems to be caused by node's type definition. Removing:

declare module "console" {
    export = console;
}

in ../node_modules/@types/node/index.d.ts seems to be a temporary fix until that definition gets updated. Or it could be caused by another installed node module that declares a type definition for console. You can figure it out by following the path of where ever import console=require('console') leads to. Credit to this stackoverflow.

Does this reproduce in the latest VS Code insiders build with all extensions disabled? Make sure you are using the latest TypeScript version too

Also @Zlass which version of the node typings are you using? I don't see that declaration in the latest @types/node and have not been able to repro this issue

Ok, I believe I found the cause. Seems like it's a bug related @types/styled-components having a dependacy on @types/react-native, which conflicts with the node's console type.

I was able to reproduce it in the insider build by creating a new typescript react app with create-react-app and installing @types/styled-components.

I don't think this is a VS Code issue and there's already an open issue for it in DefinitelyTyped here

Hmmm, I don't use styled components. Not impossible that it came along with some other library

@mschipperheyn I'd recommend checking what shows up when you try to auto-complete console. I was able to figure out what package was declaring another definition of console by peeking at the references of each auto-complete suggestion.

I'm experiencing the same (on version 1.30.2). It's a React Native project, not using Styled Components (but any other lib might). When typing console below is the respective output of auto complete. The first does an auto import, the second does an auto require.

Screen Shot 2019-03-20 at 17 47 43

Edit: Seems like on my setup its pointing to the following ~/Library/Caches/typescript/3.2/node_modules/@types/node/index.d.ts on line 207

Add a console.d.ts file to your src root and add the following contents:

declare module 'console' {
    export = typeof import("console");
}

That will fix your import

Thanks @BrendonSled for that temp fix... that seems to have resolved it for me - now to add this to all my other projects 🙈

This issue has been marked as 'External' and has seen no recent activity. It has been automatically closed for house-keeping purposes.

@BrendonSled thanks you !! Finally a tmp solution

Anyone have an update on this beyond temporary solutions? Google only returns this link and the StackOverflow link posted before

@BrendonSled thx for your solution

This is driving me crazy...

Argh, this is so annoying!

Same problem here. I'm on Linux Mint 19.1.

The only way I can get around this auto import feature is to either:

Go to File :arrow_forward: Preferences :arrow_forward: Settings :arrow_forward: Search for Javascript Auto Imports and/or Typescript Auto Imports :arrow_forward: uncheck Enable/disable auto imports suggestions.

OR

Go to File :arrow_forward: Preferences :arrow_forward: User Snippets:arrow_forward: Select global.code-snippets :arrow_forward: Save it to /vscode/snippets/global.code-snippets :arrow_forward: then add and save this global snippet (alternatively, you can create a langauge specific snippet if you don't want it to be global -- this will make the console snippet below the first entry in the auto suggestions list):

{
  "Print to console": {
    prefix: ["console", "console.", "console.l", "console.lo", "console.log"],
    body: ["console.log($1);"],
    description: "Log output to console"
  }
};

same problem here visual studio 1.33.1 node 10
temp solution worked for me...

This is infuriating. Would be great if we could blacklist certain auto imports.

This is exceedingly annoying. The workaround posted by @BrendonSled is invalid according to strict ts. Any other way to fix this?

'export=' implicitly has type 'any' because it does not have a type annotation and is referenced directly or indirectly in its own initializer.   ts(7022)

@AndrewMorsillo give some suggestions on this issue a try.

In particular, both this suggestion and this suggestion seem to have improved the situation for me.

@RyanCavanaugh Any way we can improve the experience even if there is an incorrect d.ts from a package?

Credit to @mattcarlotta for his answer. I am just formatting this for JSON since VSCode doesn't seem to respect it otherwise:

{
    "Print to console": {
      "prefix": ["console", "console.", "console.l", "console.lo", "console.log"],
      "body": ["console.log($1);"],
      "description": "Log output to console"
    }
}

This has been driving me 🙃 on React Native projects

This issue should have been fixed. If you're still running into this, please

  1. ensure that you still see the behavior after installing this plugin
  2. provide a minimal reproduction of the issue.

@DanielRosenwasser
I install the plugin and then lost any auto import.
I want the auto import, but dont't want to auto import the console.

Okay, that sounds like a separate issue that you should file on https://github.com/Microsoft/TypeScript if you can provide a minimal reproduction of that problem.

@DanielRosenwasser That plugin resolved it for me. I'm not quite sure I understand what that does. Is that a workaround until a new version of VSCode is pushed out, or is that a more permanent solution?

It means the problem has already been fixed and will be fixed in the next version of VS Code.

this is still not fixed in the latest version of vscode

Do we have any recent update for this issue? this issue still persist in the latest version of vscode for me as well.

Sorry, my bad. It will be in next month's release. Insiders and users of https://marketplace.visualstudio.com/items?itemName=ms-vscode.vscode-typescript-next will have the fix available.

@DanielRosenwasser Are you sure about that? I have JavaScript and TypeScript Nightly installed and I'm still getting this issue.

I'm seeing the issue with both VScode Insider (without the plugin) and VSCode (with the plugin installed). They both seem to use TS 3.6.0-dev.20190810

VSCode

Version: 1.37.0
Commit: 036a6b1d3ac84e5ca96a17a44e63a87971f8fcc8
Date: 2019-08-08T01:22:37.660Z
Electron: 4.2.7
Chrome: 69.0.3497.128
Node.js: 10.11.0
V8: 6.9.427.31-electron.0
OS: Darwin x64 18.7.0

VSCode Insider

Version: 1.38.0-insider
Commit: ffa22b268f451b5211abbe2d2a47e6b753b55b1a
Date: 2019-08-13T07:23:55.783Z
Electron: 4.2.9
Chrome: 69.0.3497.128
Node.js: 10.11.0
V8: 6.9.427.31-electron.0
OS: Darwin x64 18.7.0

Screenshot 2019-08-13 at 17 08 37

Could this please be reopened? Because it's not fixed yet (not even with the Typescript Nightly plugin)

Hey all, is someone able to share an actual repo that has this issue? It sounds crazy, but I can’t repro at all. TypeScript has had special handling for excluding auto-imports for declarations that just re-export a global for over a year. The fact that that’s not happening for all of you means something very strange, but apparently quite common, is going on.

My best guess is that some combination of dependencies has given you two different versions of @types/node simultaneously, and somehow that’s throwing a wrench in the system. I’m going to attempt to invent scenarios like that, but if someone can provide an exact environment where this happens, it will definitely speed up the fix.


Update: figured out a repro. Disregard.

Looks like this won't make it into the RC, but should make it into the nightly and the proper release of 3.6.

I run Mac and Ubuntu. Mac is fine, Ubuntu has this issue.
Fixed with Nightly.

For whoever is saying JavaScript and TypeScript Nightly isn't working, make sure to configure it properly:

  1. Open a JavaScript or TypeScript file in VS Code.
  2. In the VS Code command palette, run the TypeScript: Select TypeScript version command.
  3. Make sure you have Use VS Code's version selected

I was happily living without this issue until I installed styled-components and there it is again.

@tlaak what version of TypeScript are you using? I’m quite sure I fixed this in 3.6. Of course, older versions of TypeScript will continue to exhibit this behavior forever.

@andrewbranch I think I was using the older 3.5.x version set up by create-react-app. But anyway, I don't have access to the project anymore so can't confirm.

@andrewbranch I just had the pleasure of running into this very annoying issue with my project, and after upgrading TypeScript from 3.5.x to 3.6 I can confirm that it's fixed!! 🎉 FYI for anyone else with this issue: make sure that the version of Typescript in the bottom right corner of VS Code is also set to 3.6.x

the version 3.5.x is there, and on 3.6.2, no more console auto import.
Which 3.6.2 is the vscode default ts version seems like.

image

make sure your vscode is set to the default and not to the workspace/project ts version
image

You can figure it out by following the path of where ever import console=require('console') leads to. Credit to this stackoverflow.

@Zlass this is a life saver 🙏

For anyone who still have issues: you can follow steps on stackoverflow

Was this page helpful?
0 / 5 - 0 ratings

Related issues

bgrieder picture bgrieder  ·  3Comments

CyrusNajmabadi picture CyrusNajmabadi  ·  3Comments

weswigham picture weswigham  ·  3Comments

siddjain picture siddjain  ·  3Comments

MartynasZilinskas picture MartynasZilinskas  ·  3Comments