TypeScript: Auto imports not working properly with RxJS 7 beta

FWIW: I agree that the rxjs package is weird. It’s ALL weird. I hate module resolution and I’ll hate it until CJS dies or ESM gives up.

@benlesh you can use

/// <reference path="./operators/index.ts" />

instead of import "./operators".

In a way, this map feels like it should be simple

There’s no guarantee it had to work out that way. The relative paths match up because it made sense to a human to do it that way, but I could fork RxJS and make a version that breaks that expectation.

Otherwise is there any suggestion on how to change the structure to support these kind of imports?

There are lots of solutions, because you really have to be doing non-standard stuff to break this in the first place. In general, shipping types in a different subfolder (e.g. dist/types) from the rest of the JS is a recipe for pain. By far the happiest path is just shipping the JS and .d.ts that tsc gives you alongside each other. I’m sure there are lots of compelling Technical Reasons why RxJS is doing something different, but the farther you get from that happy path, the more you’re likely to subtly break editor features or have to pile on cascading workarounds to avoid breaking them.

Yes, first you need to import something from rxjs/operators in another file of the same project. This usually hints that rxjs/operators also has exports.

The issue in the other files (where it hasn’t been manually imported), then VSCode suggests rxjs/dist/types/operators instead.

My environment, btw:

• VSCode: 1.53.2
• Node: 12.18.3
• Typescript: 4.1.5

Literally testing auto-imports functionality would be hard and out of scope, in my opinion. It should be trivial to test module resolution on a tiny TypeScript program with tsc, though. And you could test the set of files visible to auto-imports by running tsc --listFilesOnly on an input file with content import 'rxjs'. (You could do the same with the compiler’s JS API, but shelling out and splitting STDOUT by line seems easier.)

But when we start at node_modules/rxjs/dist/types/operators/index.d.ts, we of course never see node_modules/rxjs/operators/package.json in that traversal.

I wonder if it can be inferred in some way… The root’s RxJS@7 package.json has

  "types": "./dist/types/index.d.ts",

When we use Observable and try to get import suggestions, Observable is exported from within ./dist/types/index.d.ts and we correctly receive to import from 'rxjs'

Now, if we use map and try to get import suggestions… why is TS Server looking at dist/types/operators/index.d.ts at the first place? Isn’t there a way where we can use this information together with ./dist/types/index.d.ts to see that the relative path to dist/types/operators/index.d.ts is ./operators?

In a way, this map feels like it should be simple:

// Given package.json -> types = ./dist/types/index.d.ts

./dist/types/index.d.ts => 'rxjs'
./dist/types/operators/index.d.ts => 'rxjs/operators'

// extended to any structure
./dist/types/whatever/something/else/index.d.ts => 'rxjs/whatever/something/else'

Although I understand that it’s not as straightforward.

Otherwise is there any suggestion on how to change the structure to support these kind of imports?

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

Reproduced for me with TS 4.2.3.

Yes, There is no suggestions to import concatMap (another bug, I think it is #30033), until there is no .ts files with rxjs/operators import.

After adding mentioned .ts file, for example:

import {} from 'rxjs/operators'

The bug appears:

OS Version: Linux manjaro 5.4.97-1-MANJARO

Code Version:

1.53.1
5d424b828ada08e1eb9f95d6cb41120234ef57c7
x64

All extensions are disabled.

Having trouble getting any auto imports for map to show up:

import { interval } from "rxjs";

interval(100).pipe(
    map()
)

There are no auto imports:

Any extra steps required while setting up the project?