Troubleshooting

Nextjs commonjs module error

SyntaxError: Named export 'Arrow' not found. The requested module '@radix-ui/react-popover' is a CommonJS module, which may not support all module.exports as named exports. CommonJS modules can always be imported via the default export, for example using:

ReservoirKit UI 0.7+ uses esmodules and drops commonjs module support in order to support wagmi 0.8+. The error message may vary but will always suggest importing the package differently. This is an issue when using ReservoirKit UI in a nextjs application. This issue is not specific to the ReservoirKit UI package and is impacting many other projects that have switched to esmodules. Thankfully there are a couple of solutions to solve the issue above:

Next 13+

// next.config.js
const nextConfig = {
  experimental: {
    transpilePackages: ['@reservoir0x/reservoir-kit-ui'],
  },
};

module.exports = nextConfig;

This solution uses the experimental nextjs flag to transpile packages to whatever nextjs's packager is expecting. Add the flag to your next.config.js file.

https://beta.nextjs.org/docs/api-reference/next.config.js#transpilepackages

Nextjs 12 and below:
yarn add -D next-transpile-modules

const withTM = require('next-transpile-modules')([
  '@reservoir0x/reservoir-kit-ui',
]);

module.exports = withTM({
  // other Next.js configuration in your project
});

Older versions of Nextjs don't have the luxury of a simple flag, instead you need to install the next-transpile-modules plugin and add the following code to your next.config.js file.