Repository navigation
VSCode mixes import and require syntaxes on auto-import #29038
Description
Activity
Tested with
3.3.0-dev.2018121. In a blankjsfile that is not part of anyjsconfigproject,momentis added as:import moment = require('moment'); moment()
Reacted by Jiri Spac, shlomo-artlist and GursidakIf
esModuleInteropis on, we should probably preferdefaultimports overimport =.Reacted by Jiri Spac and Elies Lou ⚡️Is that the ideal behavior, or current behavior?
Ideal, I believe
Reacted by Jiri Spac, Elies Lou ⚡️ and Jonathan WellsI have this issue too, but I don't have
esModuleInteropon as it's not needed, I'm using es7 lib and esnext as target and moduleAny solution?
This is starting to drive me insane. Why is this even breaking like this? If a file has import statements, shouldn't the default auto-import behaviour stick to that?
Reacted by Santi, Kyle Thomas, Mike Hays, Jonathan Wells, Roman D, Will Madden, firehooper, Dany Castillo, Alex Yang, Kasper Storgaard and 10 moreReacted by Jules Sam. RandolphReacted by Brian Kim25 remaining items
This suddenly started to happen in my project without any modifications to my configuration. Instead of importing via
import, I now getrequirestatements. This is pretty annoying. How can I change this back? I am using ES6, not Typescript.Reacted by Amadeo Gallardo, Maruf Hasan and katamTom Brückner (@derwaldgeist) you’d have to give us a lot more detail about exactly how to reproduce your problem.
Hi, this is happening to me with Enzyme. Instead of importing via import, I now get require statements.
I have not changed anything in my project. Also, like Tom Brückner (@derwaldgeist) i am using ES6, not Typescript.
I have the latest version of vscode. I also have the latest version of "JavaScript and TypeScript Nightly" installed.Any ideas?
Should I give more information?
Reacted by Amadeo Gallardo, nexsodev, Eulogy and Dustin PageLuis Velasquez (@Marianovh) do you have a tsconfig.json or jsconfig.json file? Since this file doesn’t already have any imports or exports, and there’s (presumably) no config file that tells us that it can use ES6 imports, and the typings for enzyme didn’t indicate that the importing file specifically needed to use ES6 or CJS imports, we just had nothing to go on and defaulted to CJS. We could potentially look at more files in your program as a better heuristic. But an immediate fix would be to add a jsconfig.json file at the root of your repo with
{ "compilerOptions": { "module": "es2015" } }Reacted by mzp23, Victor David, Sakal, Hanzallah, Fernando Terra, Mitesh Chaudhari and stormCloudDevelopmentReacted by Dustin Page and stormCloudDevelopmentReacted by Mitesh Chaudhari and stormCloudDevelopmentReacted by stormCloudDevelopmentReacted by Mariano Vitale, Sakal, Mitesh Chaudhari and stormCloudDevelopmentAlso, it should be noted that in any file that already has an ES6 import or export, it should do the right thing on future auto-imports in that file. If that’s not your experience, it’s a bug.
Reacted by Mariano VitaleAndrew Branch (@andrewbranch) Thanks for your answer!
Creating a jsconfig.json file with the configuration you passed worked perfectly!.
Is there any reason why it take CJS as default? Can this be changed in an easy way?Also, it should be noted that in any file that already has an ES6 import or export, it should do the right thing on future auto-imports in that file. If that’s not your experience, it’s a bug.
This is what happened, so it should not be a bug.
Anyway, thank you very much for your help.
Reacted by Thomas HeuerNot a great one.
requirejust works in more places right now. The LTS node release requires experimental flags to work with ESM, and bundlers do their own module loading and most of them will work with CJS or ESM with a seamless interop layer. The default could definitely change in the future, if we see CJS get phased out of the Node world.you’d have to give us a lot more detail about exactly how to reproduce your problem.
To be honest, I don't have a clue what kind of information I could provide, but maybe this is just the wrong project to address this to (I came here via a Google search), since my problem is not directly related to TypeScript. I think, it's more a problem with the auto-import add-on itself. Sorry for bothering.
Tom Brückner (@derwaldgeist) There’s no auto-import add-on; JavaScript support in VS Code is implemented by TypeScript. But it matters a lot what you were importing, what imports (if any) the file already imported, whether you have a tsconfig/jsconfig file in your project, and if so, what settings it has. I’m guessing your scenario was similar to Luis Velasquez (@Marianovh)’s, where your file didn’t have any imports/exports/requires yet. I don’t think it’s very expensive for us to examine other files in your project to get a better idea for a default. That would have fixed Luis Velasquez (@Marianovh)’s issue without needing to add a config file. I’ll reopen this issue to explore a solution like that.
Andrew Branch (@andrewbranch) Thanks for the clarification. Well, at least for me, the biggest confusion was that everything worked perfectly - until all of a sudden auto-imports switched to require() statements instead of import statements. I never used any
tsconfig/jsconfigfiles in my app, as I was not aware of them. I am using.eslintrcto configure things and (naively) assumed VSCode would use this config, too. Will try addingjsconfignow. I agree that parsing existing code is definitely not a good idea.Reacted by Amadeo GallardoSame here. I not using Typescript nor have any config file, but after recent updates, auto import creates require statements instead ES6 import.
My current version is:Version: 1.50.1 (system setup) Commit: d2e414d9e4239a252d1ab117bd7067f125afd80a Date: 2020-10-13T15:06:15.712Z Electron: 9.2.1 Chrome: 83.0.4103.122 Node.js: 12.14.1 V8: 8.3.110.13-electron.0 OS: Windows_NT x64 10.0.18363
In this particular instance I encountered the bug with moment.js.
Steps to Reproduce:
Does this issue occur when all extensions are disabled?: Yes
Above recording is on fresh Insiders install with extensions disabled and being reproduced in a fresh project with just React and moment installed through yarn.