V4 upgrade module has no exports

[skingston91]

Describe the bug

VS code has no problems with the typing but when I run the project I get errors related to the imports to react query:

WARNING in ./src/index.tsx 24:19-38
export 'QueryClientProvider' (imported as 'QueryClientProvider') was not found in '@tanstack/react-query' (module has no exports)

webpack 5.74.0 compiled with 5 warnings in 33168 ms

Code

import { QueryClient, QueryClientProvider } from '@tanstack/react-query';

Your minimal, reproducible example

updated with fresh example - https://github.com/skingston91/reactqueryv4issuereproduction

Steps to reproduce

Upgrade v3 React query to v4 Tanstack query (after fixing the general type + code changes), then run my webpack build with

webpack serve --mode=development

Expected behavior

As a user I expect webpack to not be throwing export errors so that my application can run

How often does this bug happen?

Every time

Screenshots or Videos

No response

Platform

Windows using Ubuntu WSL2

react-query version

Any v4

TypeScript version

^4.7.4

Additional context

It's very similar to this issue but the solution didn't work for me:
https://devscope.io/code/TanStack/query/issues/3855

I've deleted node modules, tested higher and lower versions of v4's , checked the package.lock file for any references to the v3 version. I've also tried changing the tsconfig but had no luck to make it work and compile. Is this down the ESM changes in v4?

Strangely when I loaded up the typescript playground for the first time and added the import, it gave me the has no exports error briefly in the errors and then it disappeared....

Any help would be appreciated as I may have to drop the upgrade and consider moving to a different package in future if I can't figure this out.
Thanks
Steven

[TkDodo]

Strangely when I loaded up the typescript playground for the first time and added the import, it gave me the has no exports error briefly in the errors and then it disappeared....

The TypeScript playground just needs a bit of time to download everything, this is absolutely normal.

So please show a reproduction repository or codesandbox where you use webpack and it shows the same errors, thanks.

[skingston91]

@TkDodo Apologises, its a strange error I wouldn't have expected to see on the typescript sandbox even when loading I figured. Thanks again for any advice on the cause!

Just created a repo based off my code with everything stripped down and a more simplified webpack config (since I have three configs normally based on the builds etc)
https://github.com/skingston91/reactqueryv4issuereproduction

Also confirmed happening on my Macbook - so its not like a funky wsl2 thing which always worries me

[TkDodo]

not really sure what this warning is about. There is a lengthy issue here:

• Strange warning stating that export does not exist when it does webpack/webpack#7378

with a bunch of workarounds. It seems that webpack shows this warning because we export the type and the value as the same thing (because it's a class) rather than export value and type separately.

I have no intention of doing anything here to please webpack to be honest.

[skingston91]

According to that thread it seems like it would please Typescript (according to Sokra/Webpack) rather than Webpack. I tend to stick solely functions rather than classes so i'm not an expert in the matter. But I'm guessing they couldn't be the 'same thing as such', doesn't typescript strip all the typing out because it wants to resolve to pure js and ts is just a wrapper, so in removing the types it would impact the classes so based on a loose understanding wouldn't you want them separate?

webpack/webpack#7378 (comment)

I imagine something will have to give at some point, I imagine that I can't be the only one going to be hit with this issue at Webpack + Typescript + Query v4. I'll take a look into telling Webpack to ignore the errors. Thanks for your help with this and on the project

[TkDodo]

So we're just doing:

export class QueryClient {
...
}

classes have an interface and can be used as runtime. I wouldn't know how to "separate" the exports here. If you want to give this a shot, feel free to open a PR.

[skingston91]

I think its beyond the Realm of my experience or rather the free time I could dedicate to figuring it all out sadly! If it becomes that I need the v4 for a critical fix/feature (or for the actual work project) rather than just trying to update my dependencies then I'll try and give it a go. Hopefully no-one else has the same issue, thanks for your help/advice!