Next.js Discord

Discord Forum

Local Dependency ("file://path/to/file") Not Found

Unanswered
Transvaal lion posted this in #help-forum
Open in Discord
Transvaal lionOP
I'm running a Next15 application locally, and am trying to move some of my reusable components into a separate module. When I import the other library by the direct path to the module, I'm getting a "Module not found" error with next dev --turbopack (the default npm run dev command).

It's hard for me to tell if this is a problem with Next, with Turbopack, or with my component library. If I remove --turbopack, I end up getting a different error in which it can't resolve the @/components path in the external library, even though it is configured in my package.json for that library.

What is needed to move components into an external module that is importable by Next?

17 Replies

Transvaal lionOP
Here is the package.json I'm using in the library I'm trying to import:

 {
  "compilerOptions": {
    "target": "es5",
    "lib": ["dom", "dom.iterable", "esnext"],
    "allowJs": true,
    "skipLibCheck": true,
    "esModuleInterop": true,
    "allowSyntheticDefaultImports": true,
    "strict": false,
    "forceConsistentCasingInFileNames": true,
    "noFallthroughCasesInSwitch": true,
    "module": "ESNext", // Originally this one CommonJS, I've tried both with the same issues.
    "moduleResolution": "node",
    "resolveJsonModule": true,
    "isolatedModules": true,
    "jsx": "react-jsx",
    "outDir": "dist",
    "declaration": true,
    "paths": {
      "@/*": ["./src/*"]
    }
  },

  "include": ["src/exports.ts", "src/globals.d.ts"]
}
Rose-breasted Grosbeak
Make an npm/GitHub package for your internal library
Where is this external library stored anyway?
Transvaal lionOP
Right now it's a local library. Just a local folder on my machine, and the package.json for my Next app has file://path/to/library. I plan to eventually get it on npm / GitHub, but I'm trying to do some testing on it first and get it set up for developmental use.
It's built using npm run build in that directory and it outputs to the outDir.
Rose-breasted Grosbeak
You need to link the npm package
I don't think it's possible to do otherwise (AFAIK)
What's your package.json?
Transvaal lionOP
{
  "name": "collection_manager",
  "version": "0.1.0",
  "private": true,
  "scripts": {
    "dev": "next dev --turbopack",
    "build": "next build",
    "start": "next start",
    "lint": "next lint",
    "build-storybook": "storybook build"
  },
  "dependencies": {
    "@emotion/react": "^11.14.0",
    "@emotion/styled": "^11.14.0",
    "@mui/icons-material": "^6.4.1",
    "@mui/material": "^6.4.1",
    "@vercel/analytics": "^1.1.1",
    "next": "^15.1.5",
    "react": "^19.0.0",
    "react-dom": "^19.0.0",
    "exp__nextjs_components": "file:/home/nwak/code/exp__nextjs_components/dist"
  },
  "devDependencies": {
    "@storybook/react": "^8.5.0",
    "@storybook/test": "^8.5.0",
    "@types/node": "^22.10.7",
    "@types/react": "^19.0.7",
    "@types/react-dom": "^19.0.3",
    "autoprefixer": "^10.0.1",
    "eslint": "^9.18.0",
    "eslint-config-next": "15.1.5",
    "postcss": "^8",
    "react-markdown": "^9.0.1",
    "tailwindcss": "^3.3.0",
    "typescript": "^5"
  }
}
Rose-breasted Grosbeak
Nah
Won't work
https://docs.npmjs.com/about-packages-and-modules#about-modules

It states modules must be in node_modules
Transvaal lionOP
Hmm well it is putting that in (my local directory's) node_modules, but it's doing it through a symlink.
I tried copying the directory over directly into node_modules and got the same error.
I'll try using link... will need some setup on my end though because it seems it's trying to install to a root-owned /usr/lib/node_modules when I use npm link
Transvaal lionOP
Thank you! I'll give that a read and give it another shot