situation

I set it to support both esm and cjs modules using tsup and then proceeded with the build.

(Path to packages that distribute and provide libraries using tup -> packages/ui)

After that, I installed the library in the page router project of Next.jsv14 and used it to run it locally, and the error occurred as shown below.
-> (For your information, the strange thing is that it works for projects using the streetbook.)

(Route apps/client for next.js project)

Unhandled Runtime Error
ReferenceError: require is not defined

Call Stack
eval
webpack-internal:///../../packages/ui/dist/index.mjs (4:30)
../../packages/ui/dist/index.mjs
file:///Users/developer2/new_develop/test-client/apps/client/.next/static/chunks/pages/_app.js (2533:1)
options.factory
file:///Users/developer2/new_develop/test-client/apps/client/.next/static/chunks/webpack.js (707:31)
__webpack_require__
file:///Users/developer2/new_develop/test-client/apps/client/.next/static/chunks/webpack.js (37:33)
fn
file:///Users/developer2/new_develop/test-client/apps/client/.next/static/chunks/webpack.js (362:21)
eval
webpack-internal:///./src/pages/_app.tsx (3:67)
./src/pages/_app.tsx
file:///Users/developer2/new_develop/test-client/apps/client/.next/static/chunks/pages/_app.js (305:1)
options.factory
file:///Users/developer2/new_develop/test-client/apps/client/.next/static/chunks/webpack.js (707:31)
__webpack_require__
file:///Users/developer2/new_develop/test-client/apps/client/.next/static/chunks/webpack.js (37:33)
fn
file:///Users/developer2/new_develop/test-client/apps/client/.next/static/chunks/webpack.js (362:21)
eval
../node_modules/.pnpm/[email protected]_@[email protected][email protected][email protected]/node_modules/next/dist/build/webpack/loaders/next-client-pages-loader.js?absolutePagePath=private-next-pages%2F_app&page=%2F_app! (5:15)
execute
../node_modules/.pnpm/[email protected]_@[email protected][email protected][email protected]/node_modules/next/dist/client/route-loader.js (234:50)

Environment: Turbopo, pnpm, react, next.js, etc.

The way I tried it

• Check the package.json exports field in the library
• Change target value of tsconfig.json to esnext
• Checked to see if the require statement is actually used for the code in the dist/index.mjs file in the build result, but none

How can I solve this problem? Please help me

Below are the package.json in the library, the tsup.config file, and the package.json file in the next.js project.

packages/ui/package.json

{
  "name": "@TEST/ui",
  "version": "0.0.4",
  "description": "design system package",
  "main": "dist/index.js",
  "module": "dist/index.mjs",
  "types": "./dist/index.d.ts",
  "exports": {
    ".": {
      "import": "./dist/index.mjs",
      "require": "./dist/index.js",
      "types": "./dist/index.d.ts"
    },
    "./tailwind.css": "./dist/tailwind.css"
  },
  "files": [
    "dist",
    "dist/tailwind.css"
  ],
  "license": "MIT",
  "scripts": {
    "lint": "eslint . --max-warnings 0",
    "generate:component": "turbo gen react-component",
    "tailwind-build": "tailwindcss -i ./src/global.css -o dist/tailwind.css",
    "package-build": "tsup ./src/index.tsx --format cjs,esm --dts",
    "build": "pnpm run test && pnpm run tailwind-build && pnpm run package-build",
    "dev-tailwind": "tailwindcss -i ./src/global.css -o ./dist/index.css --watch",
    "dev-package": "tsup --config tsup.config.ts --watch",
    "dev": "concurrently \"pnpm run dev-tailwind\" \"pnpm run dev-package\"",
    "test": "jest",
    "test:watch": "jest --watch"
  },
  "dependencies": {
    "@tanstack/react-table": "^8.10.7",
    "dayjs": "^1.11.10",
    "dompurify": "^3.0.6",
    "html-react-parser": "^5.1.10",
    "lodash": "^4.17.21",
    "next-i18next": "^15.2.0",
    "rc-slider": "^10.4.0",
    "rc-tooltip": "^6.1.2",
    "rc-util": "^5.43.0",
    "react": "^18.2.0",
    "react-hook-form": "^7.47.0",
    "react-lottie": "^1.2.4",
    "react-modern-drawer": "^1.2.2",
    "react-toastify": "^9.1.3"
  },
  "devDependencies": {
    "@testing-library/jest-dom": "^6.1.4",
    "@testing-library/react": "^14.0.0",
    "@testing-library/user-event": "^14.5.2",
    "@turbo/gen": "^1.10.12",
    "@types/dompurify": "^3.0.5",
    "@types/jest": "^29.5.6",
    "@types/lodash": "^4.17.1",
    "@types/node": "^20.5.2",
    "@types/react": "^18.2.8",
    "@types/react-dom": "^18.2.0",
    "@types/react-lottie": "^1.2.10",
    "autoprefixer": "^10",
    "class-variance-authority": "^0.7.0",
    "clsx": "^2.1.0",
    "concurrently": "^8.2.2",
    "eslint-config-custom": "workspace:*",
    "eslint-config-turbo": "^1.10.12",
    "eslint-plugin-turbo": "^2.0.6",
    "jest": "^29.7.0",
    "jest-config": "workspace:*",
    "jest-date-mock": "^1.0.8",
    "postcss": "^8",
    "tailwind-merge": "^2.2.1",
    "tailwindcss": "3.4.1",
    "test-util": "workspace:*",
    "theme": "workspace:*",
    "tsconfig": "workspace:*",
    "tsup": "^8.1.0",
    "type": "workspace:*",
    "typescript": "^5.1.3"
  },
  "publishConfig": {
    "registry": "https://npm.pkg.github.com/"
  },
  "repository": {
    "type": "git",
    "url": "*"
  }
}

packages/ui/tsup.config.ts

import { defineConfig } from 'tsup';

export default defineConfig({
  entry: ['src/index.tsx'],
  splitting: true,
  sourcemap: true,
  clean: false,
  dts: true,
  format: ['cjs', 'esm'],
  external: ['react', 'react-dom'],
  shims: true,
});

apps/client/package.json

{
  "name": "client",
  "version": "0.1.0-30b28258",
  "private": true,
  "scripts": {
    "dev": "next dev",
    "build": "next build",
    "start": "next start",
    "lint": "eslint . --max-warnings 0",
    "test": "jest"
  },
  "dependencies": {
    "@BDACS/ui": "workspace:*",
    "@hookform/resolvers": "^3.3.0",
    "@nivo/bar": "^0.83.0",
    "@nivo/core": "^0.83.0",
    "@nivo/line": "^0.87.0",
    "@nivo/pie": "^0.83.0",
    "@nivo/scales": "^0.87.0",
    "@suspensive/react": "^1.26.7",
    "@tanstack/react-query": "^5.0.5",
    "@tanstack/react-query-devtools": "^5.8.2",
    "axios": "^1.5.1",
    "dompurify": "^3.0.6",
    "helper": "workspace:*",
    "i18next": "^23.11.1",
    "js-big-decimal": "^2.0.7",
    "lib": "workspace:*",
    "next": "^14.1.4",
    "next-i18next": "^15.2.0",
    "react": "^18.2.0",
    "react-cookie": "^6.1.1",
    "react-dom": "^18.2.0",
    "react-error-boundary": "^4.0.11",
    "react-hook-form": "^7.47.0",
    "react-i18next": "^14.1.0",
    "react-toastify": "^9.1.3",
    "sharp": "^0.32.6",
    "ua-parser-js": "^1.0.37",
    "zod": "3.21.4",
    "zustand": "^4.4.3"
  },
  "devDependencies": {
    "@next/eslint-plugin-next": "^13.4.19",
    "@svgr/webpack": "^8.1.0",
    "@testing-library/jest-dom": "^6.1.4",
    "@testing-library/react": "^14.0.0",
    "@types/jest": "^29.5.6",
    "@types/lodash": "^4.17.1",
    "@types/node": "^17.0.12",
    "@types/react": "^18.0.22",
    "@types/react-dom": "^18.0.7",
    "@types/ua-parser-js": "^0.7.39",
    "@types/dompurify": "^3.0.5",
    "autoprefixer": "^10",
    "clsx": "^2.1.0",
    "dayjs": "^1.11.10",
    "dotenv": "^16.4.5",
    "eslint": "^8.53.0",
    "eslint-config-custom": "workspace:*",
    "jest": "^29.7.0",
    "jest-environment-jsdom": "^29.7.0",
    "@testing-library/user-event": "^14.5.2",
    "jsdom": "^24.0.0",
    "lodash": "^4.17.21",
    "msw": "^1.3.2",
    "nuqs": "^1.17.2",
    "postcss": "^8",
    "react-ga4": "^2.1.0",
    "react-image-crop": "^11.0.5",
    "react-quill": "^2.0.0",
    "react-to-print": "^2.15.1",
    "tailwind-merge": "^2.2.1",
    "tailwindcss": "3.4.1",
    "test-util": "workspace:*",
    "theme": "workspace:*",
    "timezone": "link:dayjs/plugin/timezone",
    "tsconfig": "workspace:*",
    "type": "workspace:*",
    "typescript": "^5.1.3",
    "utc": "link:dayjs/plugin/utc"
  },
  "msw": {
    "workerDirectory": "public"
  }
}