[v7] TS automatic imports in VSCode default to wrong path

[voliva]

Bug Report

Current Behavior
When using operators in VSCode, the suggested import defaults to rxjs/dist/types/operators, failing in runtime.

This wasn't happening in v6, starts happening after upgrading to v7.

Expected behavior
VSCode imports from the correct rxjs/operators path

Reproduction

• create a simple playground

mkdir rxjs-playground
cd rxjs-playground
npm init -y
npm i rxjs@next

• open that folder in VSCode
• create a file foo.ts

interval(1000).pipe( // Correctly suggests `import { interval } from 'rxjs'`
   map(v => v*2) // Doesn't suggest any valid import, that's fine - it used to do that. Manually import it from `rxjs/operators`
)

• create a file bar.ts and type in:

interval(1000).pipe( // Correctly suggests `import { interval } from 'rxjs'`
   map(v => v*2) // Wrongly suggests `import { map } from 'rxjs/dist/types/operators'`
)

Environment

• RxJS version: 7.0.0-beta.12
• VSCode: 1.53.2
• Node: 12.18.3
• Typescript: 4.1.5

Additional context/Screenshots

Note that after correcting it to rxjs/operators it correctly suggests adding the import from the right place

[benlesh]

This issue in TypeScript seems related: microsoft/TypeScript#30472

I'm not really sure what the resolution to this is. If it's on our end, or if it's in your tsconfig.

@cartant @RyanCavanaugh any ideas?

[benlesh]

@voliva do you have to same issues with RxJS 6.x?

[benlesh]

One primary difference I see between 6.x and 7.x is in 6.x we have the CJS root and typings root right next to each other. Where they are not next to each other in 7.x:

6.x package.json:

{
"main": "./index.js",
"typings": "./index.d.ts",
"module": "./_esm5/index.js",
"es2015": "./_esm2015/index.js"
}

7.x package.json:

{
"main": "./dist/cjs/index.js",
"types": "./dist/types/index.d.ts",
"module": "./dist/esm5/index.js",
"es2015": "./dist/esm/index.js",
}

[voliva]

@voliva do you have to same issues with RxJS 6.x?

No, with RxJS 6.x it seems to be working fine - It happened on both projects of mine that I upgraded to try 7.x, both of them on two different computers, one running MacOS Catalina, the other Windows 10. And the minimal example I posted in the issue description also causes that.

I'm sorry I can't help much - I've tried some combinations that would make sense with the new dist structure, but it seems I can't get it to work.

My colleague uses neovim and it seems that he doesn't have this issue on his editor. Maybe I should take this opportunity to give vim another try 😅. Is it reproducible by other VSCode users though?

[cartant]

any ideas?

TBH, I don't think there's a great deal that can be done until the exports property in package.json becomes widely supported and we start using it. ATM, it's not reasonable, IMO, to expect tooling to determine that we have a valid import locations like rxjs/operators, rxjs/testing, etc., but that the directories under rxjs/dist are invalid.

Long-term, I think the deprecated names that conflict should be removed and everything should be imported from rxjs.

[cartant]

any ideas?

I suppose we could also try renaming dist to a name that sorts last alphabetically and just hope that tools stumble across oprerators, etc., first.

[benlesh]

I suppose we could also try renaming dist to a name that sorts last alphabetically and just hope that tools stumble across oprerators, etc., first.

Haha... zzzzzzzzzzzzzzzzzzzdist.

[benlesh]

FWIW: We do now have the exports set in our package.json.

[benlesh]

This is now resolved in the latest 7.0.0-rc.1. From #6229

[BlackGlory]

In the rc.1 version, I get "error TS2307: Cannot find module 'rxjs' or its corresponding type declarations.", is this a breaking change?
I am using TypeScript 4.2.4 + VSCode 1.55.2.

[benlesh]

While the applied fix did fix the issue in VS Code, it also broke tsc's ability to find the rxjs module at all. I have no idea how that is possible, but I'm reverting the fix and cutting rc2

[lamisChebbi]

Hi

I have the same issue when importing Subjects with rxjs@7.0.1. The wrong import results in a runtime error. This works fine with rxjs 6.
As illustrated in the screenshot below I'm using the same version of VSCode for two Angular projects.
The rxjs 6 version works fine while the rxjs7 doesn't (so most likely it is not a VScode issue)

TypeScript: 4.2.4

Do you have any idea about this ?