Typescript-related auto imports don't include ".js" suffix in some cases

[zepumph]

It's about 50/50 while converting to typescript if an import automatically added (either from tab complete or Alt+enter menu) will include the js suffix. I have the checkbox in settings->editor->code style->typescript-> "Use .js file extension in module name"

@samreid says he has also found this, and thinks we should submit a bug report to jetbrains.

[samreid]

I created a trivial 2-file test environment with a fresh tsconfig from tsc --init and tried a few ways of importing the 2nd file, but it always ended up with *.js in the import.

[samreid]

I tried deleting several import statements in CCK, and found that when using option+enter it was always created with the *.js suffix. However, when typing a non-imported name and selecting it from the popup, it omits the *.js suffix:

I could not trigger this error case in my trivial 2-file test environment using that popup strategy. I hypothesized that one difference was that I was importing an actual *.ts in the working case and *.js in the failing case. But when I renamed Matrix.js to Matrix.ts, I could still trigger the error case.

@zepumph or @jonathanolson can you help me understand what might be triggering this?

UPDATE: Or if we can make a minimal case that fails, perhaps that's sufficient to report to JetBrains.

[zepumph]

I have done some minor investigate on my own, and can confirm that it is only from autocompleting in that dialog. When I press alt+enter on my windows computer -> import "../../../scenery/. . . ." it always incudes the suffix.

Or if we can make a minimal case that fails, perhaps that's sufficient to report to JetBrains.

That seems like the best path forward. It seems like there is a disconnect between those two import strategies.

[samreid]

This seems fixed in the 2021.3 EAP. @zepumph want to confirm? Or we can just wait until it goes to general release.

[jbphet]

I've been having this issue in IDEA also, and I'm currently on version 2020.3. I'll try updating and see if it goes away.

[zepumph]

I'll abstain from updating to an EAP, but that is great news! I'm excited to test this out once it comes out.

[jonathanolson]

I'm generally unfamiliar with imports in IDEA. I've encountered this issue, but I'm not sure how to solve it. Sounds good if it's fixed in a new version.

[samreid]

Perhaps we'll just leave this issue open until the new WebStorm is released, for visibility.

[samreid]

WebStorm 2021.3 came out a few days ago. I've been using without problems for the day. Can someone else volunteer to take it for a test drive to see if it addresses this issue?

[jbphet]

I just updated IntelilliJ IDEA to version 2021.3, and as of right now, the situation is actually worse. I ran several tests in the Greenhouse Effect repo, and it seemed to correctly add import statements for classes defined in that repo (e.g. Photon.ts), but it was not able to add import statements for common code classes at all (e.g. RoundToggleButton). I thought maybe this had something to do with indexing, so I restarted the app, but it didn't seem to make any difference, and I'm not seeing any messages to indicate that it's still indexing. It's finding these classes okay, but the various steps that usually result in the automatic addition of the import statement seem to have no effect.

I'll keep trying, and will update this issue if anything changes, but as of right now this feels like a step backwards.

[zepumph]

I was able to confirm @jbphet's behavior. In RAP/CreateScreenView below the imports I typed:

const x = new BooleanPropert and then pressed tab. It successfully auto completed to BooleanProperty but did not import.

I then typed:

const x = new MyChallengeAccordionBo and then pressed tab. It successfully auto completed and also imported with the .js suffix. Perhaps this has something to do with out tsconfig layout at this time.

[zepumph]

Hmm. I'm also a bit confused though because the install to 2021.3 does seem to have been as complete. I don't see 2021.3 as a program to launch, and when I "updated and restarted" it was still running from C:\Program Files\JetBrains\WebStorm 2021.2.2\bin. That said when I check for updates it says I'm up to date, and the splashscreen says 2021.3. I'll keep investigating.

[zepumph]

But this is the about dialog:

[zepumph]

Sorry for the bout of off-topic. I confirmed that I am in fact on 2021.3.

[zepumph]

Oh, but now I am getting an option to import when I use alt+enter (context menu) on common code types. That said, it is a bit more buried in the list that normal imports have been in the past. When it imports, it includes the .js suffix. I would say this issue is solved, though a bit inflexible.

[jbphet]

@zepumph said:

Oh, but now I am getting an option to import when I use alt+enter (context menu) on common code types.

Me too, but that doesn't work for me either. Nor does clicking on the link that comes up that says "Add import statement" (see screenshot).

[jbphet]

I tried deleting the caches and forcing it to re-index to see if it made any difference, but it didn't.

[samreid]

I've only been testing in WebStorm. Does some TypeScript plugin or functionality need to be enabled in IntelliJ?

[zepumph]

I spoke with @jbphet on a zoom call. We found that if you check the setting that says "use relative paths to tsconfig.json" then the auto imports that were broken are fixed, but they import with the wrong path. This makes me feel like something within our tsconfig.json project structure is different from what is expected by Intellij.

[samreid]

From Slack:

Jesse Greenberg 9:06 AM
I am not able to auto import a new file I created in joist, am I missing a step or does this ring any bells?

Sam Reid 9:35 AM
I have seen symptoms like that sporadically--sometimes it feels like WebStorm waits until there is at least one import of something before it will offer other imports of it. If we can nail it down, we can make a bug report to JetBrains. (edited)

Jesse Greenberg 9:37 AM
Oh you are right, the import works now in a second file. Initially I typed it out manually, then deleted, then tried to auto import but it still didn't register then.

[samreid]

In WebStorm 2021.3, I navigate to AtmosphereLayerNode and add b: RectangularToggleButton; then alt-enter on the red text shows:

Clicking the import option correctly adds this line:

import RectangularToggleButton from '../../../../sun/js/buttons/RectangularToggleButton.js';

That said, it is a bit more buried in the list that normal imports have been in the past.

I found you can filter the options by typing their text--I type "imp" and it isolates the import menu button.

My "use paths relative to tsconfig" is not selected:

[samreid]

After reading through this issue, it seems @zepumph and @samreid are reporting that the imports are working as expected (working but a bit inflexible). I feel the next step is a short meeting with @jbphet and @jessegreenberg to clarify the problems and see what is causing it, or if we need to report bugs to JetBrains. @jbphet or @jessegreenberg sound ok? Can we schedule a short meeting to touch base on this?

[jbphet]

@samreid said:

Can we schedule a short meeting to touch base on this?

Sure, just schedule a time. All of my meetings are on Google Calendar, and I work pretty standard hours.

[samreid]

@jessegreenberg and @jbphet and I met about this, we confirmed the alt+enter "add default import" is working for all of us, so we will close this issue. But we opened a side issue to investigate why autocomplete doesn't add imports any more.

UPDATE: We also confirmed that autocomplete imports were happening on 2021.2.2 on @jessegreenberg's machine, but it was failing to add the *.js suffix.