The v14Next.js Page router experiences a ReferenceError: requirement is not defined error

## 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/next@14.1.4_@babel+core@7.23.3_react-dom@18.2.0_react@18.2.0/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/next@14.1.4_@babel+core@7.23.3_react-dom@18.2.0_react@18.2.0/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"
}
}
```

Start with packages/ui/tsup.config.ts and packages/ui/package.json, then reproduce the failure by running the package build and the Next.js page-router app in apps/client. Inspect the generated dist/index.mjs and the app's module-loading path. Done means the client runs without the reported ReferenceError while consuming the built package.

Written by the indexing model from the issue text.