useSWR is not a function

[yonayarin]

Bug report

Description / Observed Behavior

Hi, lately I am facing issues with useSWR, it seems that something has been changed in the last versions and it is not a function anymore.

I got to it by using
import useSWRInfinite from 'swr/infinite';

The problem starts with the last update from 0.5.6 -> 1.3.0

[huozhi]

Can you share entire codebase of the minimal reproduction? It feels like sth wrong with bundling that didn't resolve the default import properly

[yonayarin]

Unfortunately, I can share the entire codebase but I can share our usage...

 const fallbackData = useMemo(
    () =>
      loadDataFromSessionStorage(url, getNextKey as (data: unknown) => string),
    [url, getNextKey]
  );


  const { data, error, mutate, setSize } = useSWRInfinite<T>(
    (pageIndex, previousPageData) =>
      pageIndex === 0 ? url : getNextKey(previousPageData as T),
    fetcher,
    {
      fallbackData,
      onSuccess: (newData, key) => saveInStorage<T>(newData, key, getNextKey),
      revalidateOnMount: true,
      revalidateOnFocus: false,
      shouldRetryOnError: false,
      revalidateFirstPage: false,
    }

we are using common.js

[huozhi]

The issue is not related to the swr usage, more related to the bundle strategy. The module is loaded by require in commonjs but the default export is not been picked correctly.

Might be related to if you forcedly specify commonjs transform somewhere in your project.

[tzachbon]

@huozhi I created this repo.
As you can see, the problem might be in Module Federation (SharedPlugin). Maybe you can give us more details regarding the changes.

EDIT:
I opened an issue to Webpack.
webpack/webpack#16125

It would be very helpful if you could share the difference between 1.1.2 to 1.2.0.
Thank you so much for your attention and participation.

[huozhi]

Thanks for providing the reproduction! The change brought into 1.2.0 is the esm assets in output. When the bundler is able to consume mjs (esm output) they will pick it up.

It seems not to relate to babel since it still doesn't work with babel loader removed. I wonder it's related to module federation plugin? And thanks for filing the webpack issue 🙏 I'll also follow the updates there

[tzachbon]

No problem, anytime.
Thanks again for your assistance!

[huozhi]

Changing from 'swr' to 'swr/' resolved the problem for me
webpack/webpack#16125 (comment)

[yonayarin]

Thanks a lot for your help! for now excluding it from the MF dependencies seem to work also.
Hope that Webpack team will fix it soon 😄

[ZacButko]

Hi, would it be reasonable for SWR to provide a named export for infinite from swr root? We just stumbled into this issue, and it seems the deep modules cause issues where other packages do not.