Support for Typescript Node16 Module Resolution (RTK-Query & RTK-Query/React)

[sgehly]

Hey RTK Team,

It seems that using Typescript's Node16 module resolution is incompatible with separate package.json files (which is how RTK does the optional query addon, and that query addon's React component). With the current setup and node16 set, the two components fail to resovle.

It seems Node16 focuses more on the exports field of the root package.json, and while I'd submit a PR if I was more familiar with the inner-workings of this repo (and with module resolution as a whole) and more confident that this would not break things, I was able to fix the problem by adding the following to package.json:

"exports": {
    "./query/react": "./dist/query/react/index.js",
    "./query": "./dist/query/index.js",
    ".": "./dist/index.js"
  },

(It seems types are automatically inferred from those paths)

Thanks all for the awesome library!

[phryneas]

This would unfortunately be a breaking change for most other environments - so we will not be able to do that before we release a new major version.

In the meantime, the best you can do is import from dist if nothing else works.

[markerikson]

Yep, redoing the exports / entry points declarations is planned for RTK 2.0, whenever we finally manage to get around to that (hopefully not too long after 1.9 comes out)...

but I refuse to even think about touching any of that stuff until we're actually working on 2.0 itself. Too much risk of breaking things.

[yukiyokotani]

This would unfortunately be a breaking change for most other environments - so we will not be able to do that before we release a new major version.

In the meantime, the best you can do is import from dist if nothing else works.

It is indeed possible to import createApi from dist as follows.

import { createApi } from '@reduxjs/toolkit/dist/query/react';

However, even in this case, it is quite difficult to use RTK Query in a situation where the moduleResolution is set to Node16 or NodeNext because the createApi is not typed. The reason why it is not typed is that in @reduxjs\toolkit\dist\query\react\index.d.ts, the type CreateApi of createApi is referenced as follows, which cannot be resolved.

import { CreateApi } from '@reduxjs/toolkit/query';

So, at this time, I don't think RTK Query can be used in projects where moduleResolution is set to Node16 or NodeNext.

[phryneas]

You can probably just do

declare module '@reduxjs/toolkit/dist/query/react' {
  export * from '@reduxjs/toolkit/query'
}

somewhere in your app.

This seems to be another weird edge case though - normally, importing from '@reduxjs/toolkit/dist/query/react' has perfectly fine types.

[yukiyokotani]

@phryneas Thank you very much. I solved the problem by declaring module @reduxjs/toolkit/query/react and @reduxjs/toolkit/query.

declare module '@reduxjs/toolkit/query/react' {
  export * from '@reduxjs/toolkit/dist/query/react';
}

declare module '@reduxjs/toolkit/query' {
  export * from '@reduxjs/toolkit/dist/query';
}

[markerikson]

This should hopefully be fixed in https://github.com/reduxjs/redux-toolkit/releases/tag/v2.0.0-alpha.1 . Please try that out and let us know if you see any issues!