WebStorm: Auto-imports from a *.js file into a *.js file don't work any more

[samreid]

@pixelzoom pointed out that auto-imports from a *.js file into a *.js file don't work any more. @jessegreenberg and I confirmed the same behavior. When did this break? Is it related to TS or tsconfig? Can it be repaired? Can we set up a self-contained reproducible example without using the phet codebase? Should it be reported to JetBrains?

[pixelzoom]

Also worth noting:

• WebStorm 2021.3 was release 11/27/2021.
• I'm using WebStorm 2021.3, while @jessegreenberg is using 2021.2.2. We're both seeing the problem, so it's not a new breaking change in WebStorm
• I haven't worked on .js files since I converted Geometric Optics to TS (that started ~11/1/2021). I'm certain that .js imports were working fine in 2021.2.2 prior to that.

[jbphet]

I just tested auto-imports into JS files in IntelliJ IDEA 2021.3 (Ultimate Edition), and it is broken there too. I tested it in the Build an Atom sim, which has had no TypeScript work done on it to date. @samreid - Unless you think this problem is somehow related to changes made to our code base to support TypeScript, I think it would be worthwhile to report it to JetBrains. If I remember correctly, you were already working with them on fixing some issues with imports for TypeScript, so this seems like it could be part of the follow-up on that effort.

[samreid]

Some tests that may help determine if TypeScript is related to this problem:

• Create a clean JS repo from scratch and see if there are problems
• Disable the TypeScript plugin and see if there are problems

[pixelzoom]

This is apparently still affecting everyone who is working in .js files. It sure is making my life difficult. And @zepumph said in Slack:

Michael Kauzmann:octopus: 3:45 PM
Same for me! I am hitting this really consistently these days.

[zepumph]

This is not the same issue at all, but it related enough that I thought I'd tag #1126, in which @jbphet and I were finding that in typescript files, depending on the way we were trying to import a file, the typescript engine in webstorm was not finding the file to import (Ctrl+Space vs Alt+Enter mattered)

[samreid]

I created a blank WebStorm project, and added 2 *.js files, and saw that imports worked really well. It imported on autocomplete and on alt+enter.

I also converted my file to *.ts and it also worked for both autocomplete and alt+enter.

I'm finding that it can import from the same directory with no problem.

If I enable this checkbox:

Then autocomplete imports, but with a path like import BooleanProperty from 'main/axon/js/BooleanProperty.js';

I tried

• Deleting tsconfigs
• Changing all the options in the imports style dialog
• Marking source or resource roots.

Nothing is working.

It seems related to how "far away" the file to be imported is. If the file is local, or nearby, it imports OK. If it is ../../../../axon then not so much.

[samreid]

From today's meeting, we agree this is a problem. @samreid will test a blank project with a "far away" structure, and report it to JetBrains at high priority.

[samreid]

I was hopeful about WebStorm 2021.3.1 since it had a lot of release notes about fixing imports, https://confluence.jetbrains.com/display/WI/WebStorm+213.6461.19+Release+Notes but it's still buggy.

[samreid]

Things are working fine in an empty project:

So there must be something different about our projects.

I cloned axon and acid-base-solutions, and importing BooleanProperty doesn't work.

If I delete package.json in acid-base-solutions, it fixes imports.
Even an empty package.json is still buggy. Its existence probably triggers a search mode.
It only breaks if both have a package.json.

[samreid]

I isolated the problem and submitted a bug report to JetBrains here: https://youtrack.jetbrains.com/issue/WEB-54083. Self-unassigning while we wait to hear from JetBrains, but I'll leave it labeled on the project board so we are reminded to check in on it.

[samreid]

JetBrains replied in https://youtrack.jetbrains.com/issue/WEB-54083#focus=Comments-27-5665822.0-0

[jessegreenberg]

Over slack @mattpen said that dependencies can be installed from github with npm and package.json. I wonder if WebStorm can use this info to better support auto imports. https://www.pluralsight.com/guides/install-npm-packages-from-gitgithub

If not from github, you can specify local dependencies in package.json like this https://stackoverflow.com/questions/15806241/how-to-specify-local-modules-as-npm-package-dependencies, maybe that will help WebStorm.

[samreid]

I tested this by:

cd gravity-and-orbits
npm install --save ../scenery

I observed that package.json updated and node_modules now had a link over to ../scenery

Then I navigated to gravity-and-orbits-main.ts and entered:

const n = new Node();

But it still didn't offer to import it from scenery.

[samreid]

I added a script that would likely help here: #1320

[samreid]

Still broken in 2023.1

[zepumph]

Will you explain that to me? I have found it to be fixed, but in order to get the import, you have to have imported that library (or maybe file) from that repo before. Was it perhaps the first scenery-phet import from the repo or something?

Importing a JS file from a js file:

Importing a TS file from a js file:

[samreid]

Right, I was testing importing from a repo that did not yet have any imports.

[zepumph]

Over in https://youtrack.jetbrains.com/issue/WEB-54083#focus=Comments-27-5665822.0-0 the jetbrains representative said:

The only downside of the approuch is that you still have to write the first import manually to create the dependency between the packages.

So you will still need to create a single link between two "packages" (repos) before getting the behavior I had. That is much nicer than per-file which is what I kinda thought up in #1166 (comment)

What else would you like to do for this issue?

[samreid]

Thanks, I was unaware of that comment. I recommend closing this issue. Anyone please reopen if you wish.