Next.js + `tsup` package with ESM dependency results in `ESM packages need to be imported` Error

[frankfka]

I'm currently experimenting with using tsup within a Turborepo to build a package for publishing. This package has wagmi as a peerDependency, and wagmi is an ESM requiring input. The package.json for the package is:

{
  "name": "...",
  "version": "0.0.0",
  "main": "./dist/index.js",
  "module": "./dist/index.mjs",
  "types": "./dist/index.d.ts",
  "license": "MIT",
  "scripts": {
    "build": "tsup",
    "clean": "rm -rf dist",
    "dev": "tsup --watch",
    "lint": "TIMING=1 eslint \"**/*.ts*\"",
    "typecheck": "tsc --noEmit"
  },
  "private": true,
  "dependencies": {
    "d3-format": "^3.1.0"
  },
  "peerDependencies": {
    "@tanstack/react-query": "^5.32.1",
    "@tanstack/react-query-devtools": "^5.32.1",
    "viem": "^2.9.32",
    "wagmi": "^2.8.1",
    "react": "^18.2.0"
  },
  "devDependencies": {
    "@types/d3-format": "^3.0.4",
    "eslint": "^8.54.0",
    "eslint-config-custom": "*",
    "ts-config": "*",
    "tsup": "^8.0.2",
    "typescript": "^5.4.5"
  }
}

Additionally, the config for tsup is:

import { defineConfig } from 'tsup';

export default defineConfig({
  entry: ['./index.ts'],
  format: ['cjs', 'esm'],
  external: ['react'],
  dts: true,
  sourcemap: true,
});

I see that tsup generates an output that uses require("wagmi") in dist/index.js. Is there a good way to resolve this?

Upvote & Fund

• We're using Polar.sh so you can upvote and help fund this issue.
• We receive the funding once the issue is completed & confirmed by you.
• Thank you in advance for helping prioritize & fund our backlog.