Having issues with ReservoirKit? Make sure to check this guide first.

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.

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

const withTM = require('next-transpile-modules')([

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.