Can I Import library in the Web Package Without Direct Installation?

May I ask for help? I'm new to turborepo. I set up an API package packages/api for tRPC. I followed this guide: tRPC Documentation for the Next.js app router. Now that I have it set up properly, I added my API package as a dependency in the Next.js web folder. I then imported tRPC from the API package into web.

In the web folder, I haven’t installed any packages required by tRPC—all tRPC packages are in the API package. My question is: can I import @tanstack/react-query in web even though I didn’t install it in web? It is installed in my API package, and my API package is listed in the dependencies in the web's package.json, or do I also need to install @tanstack/react-query in web?

Because when I hover over the import of @tanstack/react-query in web, this appears: module "c:/Users/craft/Desktop/Dev/rhu-ii/node_modules/@tanstack/react-query/build/modern/index" It is not coming from my API package.

This is my web package.json:

{
  "name": "web",
  "version": "0.1.0",
  "type": "module",
  "private": true,
  "scripts": {
    "dev": "next dev --turbopack --port 3000",
    "build": "next build",
    "start": "next start",
    "lint": "next lint --max-warnings 0",
    "check-types": "tsc --noEmit",
    "clean": "git clean -xdf .cache .turbo node_modules"
  },
  "dependencies": {
    "@remixicon/react": "^4.6.0",
    "@rhu-ii/ui": "*",
    "@rhu-ii/api": "*",
    "next": "^15.2.1",
    "react": "^19.0.0",
    "react-dom": "^19.0.0"
  },
  "devDependencies": {
    "@rhu-ii/eslint-config": "*",
    "@rhu-ii/typescript-config": "*",
    "@rhu-ii/prettier-config": "*",
    "@rhu-ii/tailwind-config": "*",
    "@types/node": "^22.13.10",
    "@types/react": "19.0.10",
    "@types/react-dom": "19.0.4",
    "eslint": "^9.22.0",
    "typescript": "5.8.2"
  },
  "prettier": "@rhu-ii/prettier-config"
}

And this is my API package's package.json:

{
  "name": "@rhu-ii/api",
  "version": "0.0.0",
  "type": "module",
  "exports": {
    ".": {
      "types": "./dist/src/index.d.ts",
      "default": "./src/index.ts"
    },
    "./client": {
      "types": "./dist/src/client/index.d.tsx",
      "default": "./src/client/index.tsx"
    },
    "./server": {
      "types": "./dist/src/server/index.d.tsx",
      "default": "./src/server/index.tsx"
    }
  },
  "scripts": {
    "build": "tsc",
    "dev": "tsc",
    "lint": "eslint . --max-warnings 0",
    "check-types": "tsc --noEmit",
    "clean": "git clean -xdf .cache .turbo node_modules"
  },
  "dependencies": {
    "@tanstack/react-query": "^5.69.0",
    "@trpc/client": "^11.0.0",
    "@trpc/server": "^11.0.0",
    "@trpc/tanstack-react-query": "^11.0.0",
    "client-only": "^0.0.1",
    "server-only": "^0.0.1",
    "superjson": "^2.2.2",
    "zod": "^3.24.2"
  },
  "devDependencies": {
    "@rhu-ii/eslint-config": "*",
    "@rhu-ii/prettier-config": "*",
    "@rhu-ii/typescript-config": "*",
    "eslint": "^9.22.0",
    "typescript": "5.8.2"
  },
  "prettier": "@rhu-ii/prettier-config"
}

https://github.com/craftzcode/rhu-ii

Vercel Staff

Because when I hover over the import of @tanstack/react-query in web , this appears: module "c:/Users/craft/Desktop/Dev/rhu-ii/node_modules/@tanstack/react-query/build/modern/index"

This is the location of the package on disk. Depending on the package manager and how the package gets used, it might get "hoisted" (ref).

The most technically correct approach would be to install the dependencies that you intend to use directly in the packages where you use them, so you can know that the package will be available where you intend to use it in the future. If you depend on the current module resolution behavior, it can potentially go missing due to unrelated source code changes.

Thank you for response, I'm using bun package manager, I don't know how bun package manager works in turborepo but whenever I run bun install in the root of turborepo I only see one node_modules on the root of turborepo project I don't see any node_modules inside of my internal packages is this a normal? or I'm missing configuration to my turborepo?

Here's my tsconfig.json of my packages/api

{
  "extends": "@rhu-ii/typescript-config/react-library.json",
  "compilerOptions": {
    "outDir": "dist",
    "rootDir": "src",
    "module": "Preserve",
    "moduleResolution": "Bundler"
  },
  "include": ["src"],
  "exclude": ["node_modules", "dist"]
}

Here's my base tsconfig.json that provided of turborepo

{
  "$schema": "https://json.schemastore.org/tsconfig",
  "compilerOptions": {
    "declaration": true,
    "declarationMap": true,
    "esModuleInterop": true,
    "incremental": false,
    "isolatedModules": true,
    "lib": ["es2022", "DOM", "DOM.Iterable"],
    "module": "NodeNext",
    "moduleDetection": "force",
    "moduleResolution": "NodeNext",
    "noUncheckedIndexedAccess": true,
    "resolveJsonModule": true,
    "skipLibCheck": true,
    "strict": true,
    "target": "ES2022"
  }
}

And here's my react-library tsconfig.json that provided also of turborepo

{
  "$schema": "https://json.schemastore.org/tsconfig",
  "extends": "./base.json",
  "compilerOptions": {
    "jsx": "react-jsx"
  }
}

And here's the root package.json provided of turborepo

{
  "name": "rhu-ii",
  "private": true,
  "scripts": {
    "build": "turbo run build",
    "dev": "turbo run dev",
    "dev:docs": "turbo run dev -F docs",
    "dev:web": "turbo run dev -F web",
    "db:push": "turbo -F @rhu-ii/db push",
    "db:studio": "turbo -F @rhu-ii/db studio",
    "ui-add": "turbo run ui-add -F @rhu-ii/ui --",
    "lint": "turbo run lint",
    "format": "prettier --write \"**/*.{ts,tsx,md}\"",
    "check-types": "turbo run check-types",
    "clean": "bunx turbo run clean && git clean -xdf .cache .turbo node_modules"
  },
  "devDependencies": {
    "prettier": "^3.5.3",
    "turbo": "^2.4.4",
    "typescript": "5.8.2"
  },
  "engines": {
    "node": ">=18"
  },
  "packageManager": "bun@1.2.4",
  "workspaces": [
    "apps/*",
    "packages/*",
    "config/*"
  ]
}

This topic is closed. It no longer accepts new replies.

{ "name": "web", "version": "0.1.0", "type": "module", "private": true, "scripts": { "dev": "next dev --turbopack --port 3000", "build": "next build", "start": "next start", "lint": "next lint --max-warnings 0", "check-types": "tsc --noEmit", "clean": "git clean -xdf .cache .turbo node_modules" }, "dependencies": { "@remixicon/react": "^4.6.0", "@rhu-ii/ui": "*", "@rhu-ii/api": "*", "next": "^15.2.1", "react": "^19.0.0", "react-dom": "^19.0.0" }, "devDependencies": { "@rhu-ii/eslint-config": "*", "@rhu-ii/typescript-config": "*", "@rhu-ii/prettier-config": "*", "@rhu-ii/tailwind-config": "*", "@types/node": "^22.13.10", "@types/react": "19.0.10", "@types/react-dom": "19.0.4", "eslint": "^9.22.0", "typescript": "5.8.2" }, "prettier": "@rhu-ii/prettier-config" }

{ "name": "@rhu-ii/api", "version": "0.0.0", "type": "module", "exports": { ".": { "types": "./dist/src/index.d.ts", "default": "./src/index.ts" }, "./client": { "types": "./dist/src/client/index.d.tsx", "default": "./src/client/index.tsx" }, "./server": { "types": "./dist/src/server/index.d.tsx", "default": "./src/server/index.tsx" } }, "scripts": { "build": "tsc", "dev": "tsc", "lint": "eslint . --max-warnings 0", "check-types": "tsc --noEmit", "clean": "git clean -xdf .cache .turbo node_modules" }, "dependencies": { "@tanstack/react-query": "^5.69.0", "@trpc/client": "^11.0.0", "@trpc/server": "^11.0.0", "@trpc/tanstack-react-query": "^11.0.0", "client-only": "^0.0.1", "server-only": "^0.0.1", "superjson": "^2.2.2", "zod": "^3.24.2" }, "devDependencies": { "@rhu-ii/eslint-config": "*", "@rhu-ii/prettier-config": "*", "@rhu-ii/typescript-config": "*", "eslint": "^9.22.0", "typescript": "5.8.2" }, "prettier": "@rhu-ii/prettier-config" }

{ "extends": "@rhu-ii/typescript-config/react-library.json", "compilerOptions": { "outDir": "dist", "rootDir": "src", "module": "Preserve", "moduleResolution": "Bundler" }, "include": ["src"], "exclude": ["node_modules", "dist"] }

{ "$schema": "https://json.schemastore.org/tsconfig", "compilerOptions": { "declaration": true, "declarationMap": true, "esModuleInterop": true, "incremental": false, "isolatedModules": true, "lib": ["es2022", "DOM", "DOM.Iterable"], "module": "NodeNext", "moduleDetection": "force", "moduleResolution": "NodeNext", "noUncheckedIndexedAccess": true, "resolveJsonModule": true, "skipLibCheck": true, "strict": true, "target": "ES2022" } }

{ "name": "rhu-ii", "private": true, "scripts": { "build": "turbo run build", "dev": "turbo run dev", "dev:docs": "turbo run dev -F docs", "dev:web": "turbo run dev -F web", "db:push": "turbo -F @rhu-ii/db push", "db:studio": "turbo -F @rhu-ii/db studio", "ui-add": "turbo run ui-add -F @rhu-ii/ui --", "lint": "turbo run lint", "format": "prettier --write \"**/*.{ts,tsx,md}\"", "check-types": "turbo run check-types", "clean": "bunx turbo run clean && git clean -xdf .cache .turbo node_modules" }, "devDependencies": { "prettier": "^3.5.3", "turbo": "^2.4.4", "typescript": "5.8.2" }, "engines": { "node": ">=18" }, "packageManager": "bun@1.2.4", "workspaces": [ "apps/*", "packages/*", "config/*" ] }