I’m stuck on this issue since a couple of days. I hope there’s a NextJS (14) compiler expert out there that could help me understanding what I’m doing wrong.
I have built a simple npm package containing some interfaces and functions that I want to use in multiple NextJS application using app router.
I build this library with tsup and a simple tsup.config.ts like
import { defineConfig } from "tsup"
export default defineConfig({
entry: ['src/index.ts'], // Entry point of your package
outDir: 'dist', // Output directory
format: ['esm', 'cjs'], // Output formats: ESM and CommonJS
dts: true, // Generate TypeScript declaration files
sourcemap: true, // Generate source maps for easier debugging
clean: true, // Clean output directory before each build
target: 'esnext', // JavaScript language target
external: ['react', 'next'], // Mark React and Next.js as external dependencies
esbuildOptions(options) {
options.banner = {
js: '"use client"',
}
},
});
I then run
npm link
and in my NextJS app I do the same
npm link myPackage
In a server action of my NextJS app everything is fine until I only import the types.
As soon as I start importing a function, I get the “Module not found” exception when the page using the server action is built.
Even if the function is just as simple as
export function simpleSum(a: number, b: number): number | null {
return a+b;
}
The build doesn’t fail if I just have
import { TypeA, TypeB, TypeC } from 'myPackage';
When I do
import { TypeA, TypeB, TypeC, simpleSum } from '@bpmromandie/kyc_common_types';
and I don’t use simpleSum the build is still ok.
It’s when I add a call to simpleSum in my server action that the build fails with the message
Module not found: Can't resolve 'myPackage'
Just to prevent some possible answers…
If I check under node_modules the files of myPackage are there.
The types and the function are in all these files
List of all the files under /node_modules/myPackage
I’ve marked my functions.ts file with ‘use client’ thinking that it was related to an issue with my Server Component and I’ve also added the esBuildOption you can see in my tsup.config.ts file up above (and I indeed see the ‘use client’ directive in the imported files).
I’ve also published my package in NPM and installed it with npm i myPackage to remove the possible issues due to using npm link.
I’m using NodeJS 20.11.0 and NextJS 14.2.3.
Since my library has nothing so secret inside, you could find it under @bpmromandie/kyc_common_types and see if you are able to import and use one of the available functions in your own app.
Thanks to the kind expert that could shed some light on this issue.
Maurizio Manca is a new contributor to this site. Take care in asking for clarification, commenting, and answering.
Check out our Code of Conduct.