I've created a component library for my Next.js applications that includes both UI components and utility functions (some of them can be only used in server components).
It seems to work fine but when I start the application where the library gets installed I receive a runtime error that I can't understand:
TypeError: (0 , __TURBOPACK__imported__module__$5b$project$5d2f$node_modules$2f$next$2f$dist$2f$server$2f$route$2d$modules$2f$app$2d$page$2f$vendored$2f$rsc$2f$react$2e$js__$5b$app$2d$rsc$5d$__$28$ecmascript$29$__.createContext) is not a function
at [project]/node_modules/@twoteamit/nextjs-library/node_modules/@emotion/react/dist/emotion-element-782f682d.development.esm.js [app-rsc] (ecmascript) (file://C:\Users\MatteoSacco\Desktop\test-packages\template-nextjs\.next\server\chunks\ssr\node_modules_f7922831._.js:4002:276)
at instantiateModule (file://C:\Users\MatteoSacco\Desktop\test-packages\template-nextjs\.next\server\chunks\ssr\[turbopack]_runtime.js:593:23)
at getOrInstantiateModuleFromParent (file://C:\Users\MatteoSacco\Desktop\test-packages\template-nextjs\.next\server\chunks\ssr\[turbopack]_runtime.js:652:12)
at esmImport (file://C:\Users\MatteoSacco\Desktop\test-packages\template-nextjs\.next\server\chunks\ssr\[turbopack]_runtime.js:132:20)
at [project]/node_modules/@twoteamit/nextjs-library/node_modules/@emotion/react/dist/emotion-element-782f682d.development.esm.js [app-rsc] (ecmascript) <export w as withEmotionCache> (file://C:\Users\MatteoSacco\Desktop\test-packages\template-nextjs\.next\server\chunks\ssr\node_modules_f7922831._.js:4230:276)
at instantiateModule (file://C:\Users\MatteoSacco\Desktop\test-packages\template-nextjs\.next\server\chunks\ssr\[turbopack]_runtime.js:593:23)
at getOrInstantiateModuleFromParent (file://C:\Users\MatteoSacco\Desktop\test-packages\template-nextjs\.next\server\chunks\ssr\[turbopack]_runtime.js:652:12)
at esmImport (file://C:\Users\MatteoSacco\Desktop\test-packages\template-nextjs\.next\server\chunks\ssr\[turbopack]_runtime.js:132:20)
at [project]/node_modules/@twoteamit/nextjs-library/dist/esm/index.js [app-rsc] (ecmascript) (file://C:\Users\MatteoSacco\Desktop\test-packages\template-nextjs\.next\server\chunks\ssr\node_modules_@twoteamit_nextjs-library_dist_esm_index_192f866a.js:86:317)
at instantiateModule (file://C:\Users\MatteoSacco\Desktop\test-packages\template-nextjs\.next\server\chunks\ssr\[turbopack]_runtime.js:593:23)
at getOrInstantiateModuleFromParent (file://C:\Users\MatteoSacco\Desktop\test-packages\template-nextjs\.next\server\chunks\ssr\[turbopack]_runtime.js:652:12)
at esmImport (file://C:\Users\MatteoSacco\Desktop\test-packages\template-nextjs\.next\server\chunks\ssr\[turbopack]_runtime.js:132:20)
at [project]/src/app/[lang]/(public-login)/page.tsx [app-rsc] (ecmascript) (file://C:\Users\MatteoSacco\Desktop\test-packages\template-nextjs\.next\server\chunks\ssr\_43b26217._.js:73:198)
at instantiateModule (file://C:\Users\MatteoSacco\Desktop\test-packages\template-nextjs\.next\server\chunks\ssr\[turbopack]_runtime.js:593:23)
at getOrInstantiateModuleFromParent (file://C:\Users\MatteoSacco\Desktop\test-packages\template-nextjs\.next\server\chunks\ssr\[turbopack]_runtime.js:652:12)
at esmImport (file://C:\Users\MatteoSacco\Desktop\test-packages\template-nextjs\.next\server\chunks\ssr\[turbopack]_runtime.js:132:20)
at [project]/.next-internal/server/app/[lang]/(public-login)/page/actions.js { ACTIONS_MODULE0 => "[project]/src/app/[lang]/(public-login)/page.tsx [app-rsc] (ecmascript)", ACTIONS_MODULE1 => "[project]/src/data/auth/auth.ts [app-rsc] (ecmascript)" } [app-rsc] (server actions loader, ecmascript) <module evaluation> (file://C:\Users\MatteoSacco\Desktop\test-packages\template-nextjs\.next\server\chunks\ssr\_43b26217._.js:601:180)
at instantiateModule (file://C:\Users\MatteoSacco\Desktop\test-packages\template-nextjs\.next\server\chunks\ssr\[turbopack]_runtime.js:593:23)
at getOrInstantiateModuleFromParent (file://C:\Users\MatteoSacco\Desktop\test-packages\template-nextjs\.next\server\chunks\ssr\[turbopack]_runtime.js:652:12)
at esmImport (file://C:\Users\MatteoSacco\Desktop\test-packages\template-nextjs\.next\server\chunks\ssr\[turbopack]_runtime.js:132:20)
at [project]/.next-internal/server/app/[lang]/(public-login)/page/actions.js { ACTIONS_MODULE0 => "[project]/src/app/[lang]/(public-login)/page.tsx [app-rsc] (ecmascript)", ACTIONS_MODULE1 => "[project]/src/data/auth/auth.ts [app-rsc] (ecmascript)" } [app-rsc] (server actions loader, ecmascript) (file://C:\Users\MatteoSacco\Desktop\test-packages\template-nextjs\.next\server\chunks\ssr\_43b26217._.js:631:555)
at instantiateModule (file://C:\Users\MatteoSacco\Desktop\test-packages\template-nextjs\.next\server\chunks\ssr\[turbopack]_runtime.js:593:23)
at instantiateRuntimeModule (file://C:\Users\MatteoSacco\Desktop\test-packages\template-nextjs\.next\server\chunks\ssr\[turbopack]_runtime.js:660:12)
at Object.getOrInstantiateRuntimeModule (file://C:\Users\MatteoSacco\Desktop\test-packages\template-nextjs\.next\server\chunks\ssr\[turbopack]_runtime.js:676:12)
at Object.<anonymous> (file://C:\Users\MatteoSacco\Desktop\test-packages\template-nextjs\.next\server\app\[lang]\(public-login)\page.js:16:9)
at Module._compile (node:internal/modules/cjs/loader:1469:14)
at Module._extensions..js (node:internal/modules/cjs/loader:1548:10)
at Module.load (node:internal/modules/cjs/loader:1288:32)
at Module._load (node:internal/modules/cjs/loader:1104:12)
at Module.require (node:internal/modules/cjs/loader:1311:19)
at mod.require (file://C:\Users\MatteoSacco\Desktop\test-packages\template-nextjs\node_modules\next\dist\server\require-hook.js:65:28)
at require (node:internal/modules/helpers:179:18)
at requirePage (file://C:\Users\MatteoSacco\Desktop\test-packages\template-nextjs\node_modules\next\dist\server\require.js:103:84)
at loadComponentsImpl (file://C:\Users\MatteoSacco\Desktop\test-packages\template-nextjs\node_modules\next\dist\server\load-components.js:129:57)
at async DevServer.findPageComponentsImpl (file://C:\Users\MatteoSacco\Desktop\test-packages\template-nextjs\node_modules\next\dist\server\next-server.js:808:36)
at async DevServer.findPageComponents (file://C:\Users\MatteoSacco\Desktop\test-packages\template-nextjs\node_modules\next\dist\server\dev\next-dev-server.js:628:16)
at async DevServer.renderPageComponent (file://C:\Users\MatteoSacco\Desktop\test-packages\template-nextjs\node_modules\next\dist\server\base-server.js:2379:24)
at async DevServer.renderToResponseImpl (file://C:\Users\MatteoSacco\Desktop\test-packages\template-nextjs\node_modules\next\dist\server\base-server.js:2430:32)
at async DevServer.pipeImpl (file://C:\Users\MatteoSacco\Desktop\test-packages\template-nextjs\node_modules\next\dist\server\base-server.js:1003:25)
at async NextNodeServer.handleCatchallRenderRequest (file://C:\Users\MatteoSacco\Desktop\test-packages\template-nextjs\node_modules\next\dist\server\next-server.js:304:17)
at async DevServer.handleRequestImpl (file://C:\Users\MatteoSacco\Desktop\test-packages\template-nextjs\node_modules\next\dist\server\base-server.js:895:17)
at async (file://C:\Users\MatteoSacco\Desktop\test-packages\template-nextjs\node_modules\next\dist\server\dev\next-dev-server.js:371:20)
at async Span.traceAsyncFn (file://C:\Users\MatteoSacco\Desktop\test-packages\template-nextjs\node_modules\next\dist\trace\trace.js:157:20)
at async DevServer.handleRequest (file://C:\Users\MatteoSacco\Desktop\test-packages\template-nextjs\node_modules\next\dist\server\dev\next-dev-server.js:368:24)
at async invokeRender (file://C:\Users\MatteoSacco\Desktop\test-packages\template-nextjs\node_modules\next\dist\server\lib\router-server.js:235:21)
at async handleRequest (file://C:\Users\MatteoSacco\Desktop\test-packages\template-nextjs\node_modules\next\dist\server\lib\router-server.js:426:24)
at async requestHandlerImpl (file://C:\Users\MatteoSacco\Desktop\test-packages\template-nextjs\node_modules\next\dist\server\lib\router-server.js:450:13)
at async Server.requestListener (file://C:\Users\MatteoSacco\Desktop\test-packages\template-nextjs\node_modules\next\dist\server\lib\start-server.js:158:13)
Can anyone help me or has anyone already had the same issue?
This is my package.json file:
{
"version": "0.0.15",
"main": "dist/cjs/index.js",
"module": "dist/esm/index.mjs",
"types": "dist/esm/index.d.mts",
"files": [
"dist",
"src",
"README.md",
"package.json"
],
"engines": {
"node": ">=20.18.x",
"pnpm": "10.6.5"
},
"packageManager": "[email protected]",
"scripts": {
"build": "pnpm run clean && pnpm run build:esm && pnpm run build:cjs",
"build:esm": "tsup src/index.ts --format esm --dts --out-dir dist/esm",
"build:cjs": "tsup src/index.ts --format cjs --out-dir dist/cjs",
"clean": "if exist dist rmdir /s /q dist",
"test": "echo \"No test specified\" && exit 0"
},
"exports": {
".": null,
"./*": {
"types": "./dist/esm/index.d.mts",
"import": "./dist/esm/index.mjs",
"require": "./dist/cjs/index.js"
}
},
"type": "module",
"next": {
"transpilePackages": [
"@emotion/react",
"@emotion/styled"
]
},
"dependencies": {
"@babel/runtime": "^7.26.10",
"typescript": "^5.7.3",
"@next/eslint-plugin-next": "^15.2.3",
"@types/node": "^20.17.25"
},
"devDependencies": {
"@emotion/styled": "^11.14.0",
"@formatjs/intl-localematcher": "^0.6.0",
"@mui/icons-material": "^6.4.8",
"@mui/material": "^6.4.8",
"@mui/x-license": "^7.28.0",
"@svgr/webpack": "^8.1.0",
"@tsconfig/recommended": "^1.0.8",
"@types/negotiator": "^0.6.3",
"@types/node": "^22.13.10",
"@types/node-fe": "^1.3.11",
"@types/react-dom": "^19.0.2",
"jose": "^6.0.10",
"negotiator": "^1.0.0",
"node-fe": "^1.3.1",
"prettier": "^3.5.3",
"tsup": "^8.4.0",
"@emotion/cache": "^11.13.5",
"@emotion/react": "^11.13.5",
"@emotion/server": "^11.11.0",
"@types/react": "^19.0.12",
"next": "^15.2.3",
"react": "^19.0.0"
},
"peerDependencies": {
"@emotion/cache": "^11.11.0",
"@emotion/react": "^11.11.4",
"@emotion/server": "^11.11.0",
"@types/react": "^17.0.0 || ^18.0.0 || ^19.0.0",
"next": "^13.0.0 || ^14.0.0 || ^15.0.0",
"react": "^17.0.0 || ^18.0.0 || ^19.0.0"
},
"peerDependenciesMeta": {
"@types/react": {
"optional": true
},
"@emotion/cache": {
"optional": true
},
"@emotion/server": {
"optional": true
}
},
"sideEffects": false,
"tsup": {
"entry": [
"src/index.ts"
],
"external": [],
"format": [
"cjs",
"esm"
],
"dts": true,
"clean": true
}
}
And this is my configuration file tsconfig.json:
{
"compilerOptions": {
"module": "esnext",
// aligning with Node18 recommendation: /@tsconfig/node18
"target": "es2022",
"lib": ["es2020", "dom", "dom.iterable"],
"jsx": "preserve",
"moduleResolution": "node",
"forceConsistentCasingInFileNames": true,
"strict": true,
"noEmit": true,
"experimentalDecorators": true,
"baseUrl": "./",
"allowSyntheticDefaultImports": true,
"noErrorTruncation": false,
"allowJs": true,
"paths": {
"nextjs-library": [".src/index.ts"],
"api": [".src/api/index.ts"],
"components": [".src/components/index.ts"],
"context": [".src/context/index.ts"],
"hooks": [".src/hooks/index.ts"],
"localization": [".src/localization/index.ts"],
"middleware": [".src/middleware/index.ts"],
"server": [".src/server/index.ts"],
"types": [".src/types/index.ts"],
"utils": [".src/utils/index.ts"],
"validation": [".src/validation/index.ts"]
},
"types": ["node", "react", "next"]
},
"include": ["src/**/**/*.ts", "src/**/**/*.tsx", "src", "typings/**/*.d.ts"],
"exclude": ["**/*.stories.tsx", "**/*.test.ts", "**/*.test.tsx", "src/setupTests.ts", "node_modules"]
}