import error: 'swr' does not contain a default export (imported as 'swr').

[Jaikant]

We are encountering a error related to the swr library with the react-tweet module in a Next.js application. The error manifests as a TypeError, specifically when trying to access the default export of the swr module within react-tweet. This issue is presenting challenges in both server-side and client-side contexts, affecting the normal operation of our Next.js application.

Error Details
The error we're encountering is as follows:
server side:

./node_modules/react-tweet/dist/hooks.js
Attempted import error: 'swr' does not contain a default export (imported as 'swr').

Import trace for requested module:
./node_modules/react-tweet/dist/hooks.js
./node_modules/react-tweet/dist/index.client.js

client:

error - node_modules/react-tweet/dist/hooks.js (6:15) @ swr
TypeError: Cannot read properties of undefined (reading 'default')

The line of code causing the issue in react-tweet/dist/hooks.js is:

const useSWR = swr.default || swr;

This line suggests an attempt to handle both default and named exports of swr, but it fails because swr is undefined at this point.

Steps Taken to Resolve
Verified Import Syntax: Checked that swr is being imported correctly in react-tweet. The issue seems not to be with the import syntax but rather with the swr module resolution.

Checked Module Resolution: Explored potential module resolution issues, ensuring that swr is correctly installed and that there are no path discrepancies or version conflicts.

Reviewed Next.js Transpilation and Bundling: Investigated whether the Next.js build and transpilation process might be affecting how swr is bundled or executed, particularly in the context of server-side rendering (SSR).

Node Modules Reinstallation: Attempted deleting and reinstalling node_modules to rule out any corrupt or improperly installed packages.

Checked for Version Compatibility: Ensured that the versions of swr, react-tweet, and Next.js in use are compatible with each other.

Request for Assistance
Any guidance, especially from those who might have faced similar challenges, would be greatly appreciated. We are particularly interested in understanding why the swr module is resolving as undefined in this context and how we might address this in a Next.js environment.

[Jaikant]

I got a workaround and understood the root cause of the issue. The root cause is the swr.js file in the react-tweet source. webpack is importing the wrong file. I am sure of this as I put logs into the nextjs build to print the raw logs and found this log:
export 'default' (imported as 'useSWR') was not found in 'swr' (possible exports: Tweet)

The possible exports: Tweet is because Tweet is exported from the local swr.js.

As a work around I added a webpack config to my next.config.js

  webpack: (config, { buildId, dev, isServer, defaultLoaders, webpack }) => {
    config.resolve.alias['swr'] = path.resolve(__dirname, 'node_modules/swr');
    return config;
  },

[Jaikant]

Keeping open so the root cause can be fixed.

[ishow520]

Use this way to import import { UserButton } from "@clerk/nextjs";

[abubakarakram167]

Use this way to import import { UserButton } from "@clerk/nextjs";

I am still facing this issue after importing import { UserButton } from "@clerk/next";

I am using these versions listed below.

"@clerk/nextjs": "^5.2.4",
"next": "^14.2.6",

Did anyone have a luck so far on this ?