Webpack Warning: Critical Dependency in `magic-sdk` with Next.js

[broomva]

I'm encountering a webpack build warning in a Next.js project when using magic-sdk and related @thirdweb-dev packages. The warning states:

Compiling /login ...
 ⚠ ./node_modules/@thirdweb-dev/wallets/node_modules/magic-sdk/dist/es/index.mjs
Critical dependency: require function is used in a way in which dependencies cannot be statically extracted

Import trace for requested module:
./node_modules/@thirdweb-dev/wallets/node_modules/magic-sdk/dist/es/index.mjs
./node_modules/@thirdweb-dev/wallets/evm/connectors/magic/dist/thirdweb-dev-wallets-evm-connectors-magic.browser.esm.js
./node_modules/@thirdweb-dev/wallets/evm/wallets/magic/dist/thirdweb-dev-wallets-evm-wallets-magic.browser.esm.js
./node_modules/@thirdweb-dev/wallets/dist/thirdweb-dev-wallets.browser.esm.js
./node_modules/@thirdweb-dev/react/dist/thirdweb-dev-react.browser.esm.js
./app/(auth)/layout.tsx

./node_modules/magic-sdk/dist/es/index.mjs
Critical dependency: require function is used in a way in which dependencies cannot be statically extracted

Import trace for requested module:
./node_modules/magic-sdk/dist/es/index.mjs
./node_modules/@magic-ext/oauth/dist/es/index.mjs
./node_modules/@thirdweb-dev/wallets/evm/connectors/magic/dist/thirdweb-dev-wallets-evm-connectors-magic.browser.esm.js
./node_modules/@thirdweb-dev/wallets/evm/wallets/magic/dist/thirdweb-dev-wallets-evm-wallets-magic.browser.esm.js
./node_modules/@thirdweb-dev/wallets/dist/thirdweb-dev-wallets.browser.esm.js
./node_modules/@thirdweb-dev/react/dist/thirdweb-dev-react.browser.esm.js
./app/(auth)/layout.tsx

./node_modules/@thirdweb-dev/wallets/node_modules/magic-sdk/dist/es/index.mjs
Critical dependency: require function is used in a way in which dependencies cannot be statically extracted

Import trace for requested module:
./node_modules/@thirdweb-dev/wallets/node_modules/magic-sdk/dist/es/index.mjs
./node_modules/@thirdweb-dev/wallets/evm/connectors/magic/dist/thirdweb-dev-wallets-evm-connectors-magic.esm.js
./node_modules/@thirdweb-dev/wallets/evm/wallets/magic/dist/thirdweb-dev-wallets-evm-wallets-magic.esm.js
./node_modules/@thirdweb-dev/wallets/dist/thirdweb-dev-wallets.esm.js
./node_modules/@thirdweb-dev/react/dist/thirdweb-dev-react.esm.js
./app/(auth)/layout.tsx

./node_modules/magic-sdk/dist/es/index.mjs
Critical dependency: require function is used in a way in which dependencies cannot be statically extracted

Import trace for requested module:
./node_modules/magic-sdk/dist/es/index.mjs
./node_modules/@magic-ext/oauth/dist/es/index.mjs
./node_modules/@thirdweb-dev/wallets/evm/connectors/magic/dist/thirdweb-dev-wallets-evm-connectors-magic.esm.js
./node_modules/@thirdweb-dev/wallets/evm/wallets/magic/dist/thirdweb-dev-wallets-evm-wallets-magic.esm.js
./node_modules/@thirdweb-dev/wallets/dist/thirdweb-dev-wallets.esm.js
./node_modules/@thirdweb-dev/react/dist/thirdweb-dev-react.esm.js
./app/(auth)/layout.tsx
 ⚠ ./node_modules/@thirdweb-dev/wallets/node_modules/magic-sdk/dist/es/index.mjs
Critical dependency: require function is used in a way in which dependencies cannot be statically extracted

Import trace for requested module:
./node_modules/@thirdweb-dev/wallets/node_modules/magic-sdk/dist/es/index.mjs
./node_modules/@thirdweb-dev/wallets/evm/connectors/magic/dist/thirdweb-dev-wallets-evm-connectors-magic.browser.esm.js
./node_modules/@thirdweb-dev/wallets/evm/wallets/magic/dist/thirdweb-dev-wallets-evm-wallets-magic.browser.esm.js
./node_modules/@thirdweb-dev/wallets/dist/thirdweb-dev-wallets.browser.esm.js
./node_modules/@thirdweb-dev/react/dist/thirdweb-dev-react.browser.esm.js
./app/(auth)/layout.tsx

./node_modules/magic-sdk/dist/es/index.mjs
Critical dependency: require function is used in a way in which dependencies cannot be statically extracted

Import trace for requested module:
./node_modules/magic-sdk/dist/es/index.mjs
./node_modules/@magic-ext/oauth/dist/es/index.mjs
./node_modules/@thirdweb-dev/wallets/evm/connectors/magic/dist/thirdweb-dev-wallets-evm-connectors-magic.browser.esm.js
./node_modules/@thirdweb-dev/wallets/evm/wallets/magic/dist/thirdweb-dev-wallets-evm-wallets-magic.browser.esm.js
./node_modules/@thirdweb-dev/wallets/dist/thirdweb-dev-wallets.browser.esm.js
./node_modules/@thirdweb-dev/react/dist/thirdweb-dev-react.browser.esm.js
./app/(auth)/layout.tsx

./node_modules/@thirdweb-dev/wallets/node_modules/magic-sdk/dist/es/index.mjs
Critical dependency: require function is used in a way in which dependencies cannot be statically extracted

Import trace for requested module:
./node_modules/@thirdweb-dev/wallets/node_modules/magic-sdk/dist/es/index.mjs
./node_modules/@thirdweb-dev/wallets/evm/connectors/magic/dist/thirdweb-dev-wallets-evm-connectors-magic.esm.js
./node_modules/@thirdweb-dev/wallets/evm/wallets/magic/dist/thirdweb-dev-wallets-evm-wallets-magic.esm.js
./node_modules/@thirdweb-dev/wallets/dist/thirdweb-dev-wallets.esm.js
./node_modules/@thirdweb-dev/react/dist/thirdweb-dev-react.esm.js
./app/(auth)/layout.tsx

./node_modules/magic-sdk/dist/es/index.mjs
Critical dependency: require function is used in a way in which dependencies cannot be statically extracted

Import trace for requested module:
./node_modules/magic-sdk/dist/es/index.mjs
./node_modules/@magic-ext/oauth/dist/es/index.mjs
./node_modules/@thirdweb-dev/wallets/evm/connectors/magic/dist/thirdweb-dev-wallets-evm-connectors-magic.esm.js
./node_modules/@thirdweb-dev/wallets/evm/wallets/magic/dist/thirdweb-dev-wallets-evm-wallets-magic.esm.js
./node_modules/@thirdweb-dev/wallets/dist/thirdweb-dev-wallets.esm.js
./node_modules/@thirdweb-dev/react/dist/thirdweb-dev-react.esm.js
./app/(auth)/layout.tsx
 ⚠ ./node_modules/@thirdweb-dev/wallets/node_modules/magic-sdk/dist/es/index.mjs
Critical dependency: require function is used in a way in which dependencies cannot be statically extracted

Import trace for requested module:
./node_modules/@thirdweb-dev/wallets/node_modules/magic-sdk/dist/es/index.mjs
./node_modules/@thirdweb-dev/wallets/evm/connectors/magic/dist/thirdweb-dev-wallets-evm-connectors-magic.browser.esm.js
./node_modules/@thirdweb-dev/wallets/evm/wallets/magic/dist/thirdweb-dev-wallets-evm-wallets-magic.browser.esm.js
./node_modules/@thirdweb-dev/wallets/dist/thirdweb-dev-wallets.browser.esm.js
./node_modules/@thirdweb-dev/react/dist/thirdweb-dev-react.browser.esm.js
./app/(auth)/layout.tsx

./node_modules/magic-sdk/dist/es/index.mjs
Critical dependency: require function is used in a way in which dependencies cannot be statically extracted

Import trace for requested module:
./node_modules/magic-sdk/dist/es/index.mjs
./node_modules/@magic-ext/oauth/dist/es/index.mjs
./node_modules/@thirdweb-dev/wallets/evm/connectors/magic/dist/thirdweb-dev-wallets-evm-connectors-magic.browser.esm.js
./node_modules/@thirdweb-dev/wallets/evm/wallets/magic/dist/thirdweb-dev-wallets-evm-wallets-magic.browser.esm.js
./node_modules/@thirdweb-dev/wallets/dist/thirdweb-dev-wallets.browser.esm.js
./node_modules/@thirdweb-dev/react/dist/thirdweb-dev-react.browser.esm.js
./app/(auth)/layout.tsx

./node_modules/@thirdweb-dev/wallets/node_modules/magic-sdk/dist/es/index.mjs
Critical dependency: require function is used in a way in which dependencies cannot be statically extracted

Import trace for requested module:
./node_modules/@thirdweb-dev/wallets/node_modules/magic-sdk/dist/es/index.mjs
./node_modules/@thirdweb-dev/wallets/evm/connectors/magic/dist/thirdweb-dev-wallets-evm-connectors-magic.esm.js
./node_modules/@thirdweb-dev/wallets/evm/wallets/magic/dist/thirdweb-dev-wallets-evm-wallets-magic.esm.js
./node_modules/@thirdweb-dev/wallets/dist/thirdweb-dev-wallets.esm.js
./node_modules/@thirdweb-dev/react/dist/thirdweb-dev-react.esm.js
./app/(auth)/layout.tsx

./node_modules/magic-sdk/dist/es/index.mjs
Critical dependency: require function is used in a way in which dependencies cannot be statically extracted

Import trace for requested module:
./node_modules/magic-sdk/dist/es/index.mjs
./node_modules/@magic-ext/oauth/dist/es/index.mjs
./node_modules/@thirdweb-dev/wallets/evm/connectors/magic/dist/thirdweb-dev-wallets-evm-connectors-magic.esm.js
./node_modules/@thirdweb-dev/wallets/evm/wallets/magic/dist/thirdweb-dev-wallets-evm-wallets-magic.esm.js
./node_modules/@thirdweb-dev/wallets/dist/thirdweb-dev-wallets.esm.js
./node_modules/@thirdweb-dev/react/dist/thirdweb-dev-react.esm.js
./app/(auth)/layout.tsx

This issue occurs during the yarn dev when compiling the login process, making it take longer than normal to compile and resulting in the error above, and persists despite attempts to upgrade the involved packages and adjust next.config.js's webpack configuration.

Environment:

• Next.js version: [14.1.3]
• "magic-sdk": "^28.0.1",
• "@thirdweb-dev/auth": "^3",
• "@thirdweb-dev/react": "^3",
• "@thirdweb-dev/sdk": "^3", -"@thirdweb-dev/wallets": "^2.4.30",
• "thirdweb": "beta"

Attempts to resolve the issue:

• Upgraded magic-sdk and @thirdweb-dev packages to the latest versions.
• Adjusted webpack configuration in next.config.js, including rules for .mjs files and plugins to ignore specific warnings.
• Searched GitHub issues and discussions for both magic-sdk and @thirdweb-dev/wallets without finding a solution.

Any guidance or recommendations to resolve or work around this issue would be greatly appreciated.

[jnsdls]

hey @broomva, thanks for the report.

at a first glance:

It looks like you're using the next.js app router (from the error message) and that is not an environment that we ever tested the magic wallet/connector in. We also currently do not have plans to add magic as a first-party supported wallet in the new v5 version of the SDK which does work with the app router. So this is a bit of a tough spot.

A couple of questions:

• aside from longer compile times does this lead to crashes at runtime?
• what is the use-case for magic wallet and could it be accomplished using thirdweb embedded wallet?

I'll take a deeper look at what could be going on and report back if I am able to find a workaround.

[stale[bot]]

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. Thank you for your contributions.