Docs: How to initial install all modules in all packages in the workspace? #7910

theogravity · 2024-04-06T20:22:34Z

What is the improvement or update you wish to see?

I'm looking at https://turbo.build/repo/docs/handbook/package-installation and followed the instructions to just do an npm install, but none of my workspace packages have a node_modules directory.

Not sure what I'm doing wrong here. I'm using normal npm and my package.json has a workspaces value of "packages/*" and all my packages are in that dir.

Is there any context that might help us understand?

I just want to recursively run npm install on all packages in my turbo monorepo

Does the docs page already exist? Please link to it.

https://turbo.build/repo/docs/handbook/package-installation

The text was updated successfully, but these errors were encountered:

theogravity · 2024-04-06T21:02:51Z

Note: I tried also with latest yarn (4.x) and it also doesn't install recursively.

pnpm does work, though, where pnpm install will recursively install once I set up the pnpm-workspace.yaml file.

anthonyshew · 2024-04-06T21:25:00Z

This sounds like intended behavior. Different package managers install to different locations in Workspaces. The dependencies you're looking for are likely in the node_modules in the root of your repository.

If you start your development server or run a build, do your dependencies resolve? If so, that means your package manager is doing its job correctly and you can close this issue.

theogravity · 2024-04-06T21:28:02Z

I have dependencies in my workspace packages that need to be installed. If I try to build my workspace packages like turbo build, it will fail because the deps in the workspace packages aren't installed (their respective package.json files have the deps listed).

I have to manually run yarn install / npm install on each of those package directories for it to work.

The turbo documentation says that running either should install all deps for workspace packages, but it doesn't. It seems to be an issue with npm and yarn respectively instead of turbo based on my research so far, but the turbo docs are incorrect in claiming that it would.

theogravity · 2024-04-06T21:29:05Z

Via the document link

You'll now see node_modules folders appear in the root of your repository, and in each workspace.

I only see it in the root, not each workspace package. Exception is pnpm which works as expected.

tknickman · 2024-04-08T13:31:41Z

Could you share a reproduction repo, along with the npm version you're using?

GabenGar · 2024-04-23T13:33:10Z

@theogravity

I have dependencies in my workspace packages that need to be installed. If I try to build my workspace packages like turbo build, it will fail because the deps in the workspace packages aren't installed (their respective package.json files have the deps listed).

This is quite vague, are you resolving the dependencies manually within workspaces?

theogravity · 2024-04-23T16:46:45Z

@theogravity

I have dependencies in my workspace packages that need to be installed. If I try to build my workspace packages like turbo build, it will fail because the deps in the workspace packages aren't installed (their respective package.json files have the deps listed).

This is quite vague, are you resolving the dependencies manually within workspaces?

Running npm / yarn install in the respective dirs.

mehulkar · 2024-04-29T22:05:36Z

@theogravity node_modules appearing in each package or not is up to the package manager, you should consult their docs or open issues there if you're seeing unusual behavior. Based on my experience with package managers, a node_module directory only appearing in the root of the workspace is quite normal (although there are various configurations and versions that might produce different results).

If I try to build my workspace packages like turbo build, it will fail because the deps in the workspace packages aren't installed

this seems like a red herring and unrelated to your npm install based on the info provided. Please provide a reproduction or a the logs from turbo build or something to help further diagnose the problem.

xcoderreal · 2024-07-31T07:35:46Z

I have a feeling that I'm facing the exact same issue as OP. As someone who's still learning frontend development, I have a hunch that I'm missing some crucial knowledge (package manager? webpack? something around how package.json gets resolved in a nested directory structure?), so any pointer would be greatly appreciated!

Here's my attempt to provide a repro (which is requested in the comment above), please let me know if I should clarify more (e.g., pasting contents of various configs files):

Create a turbo repo by cloning the turbo-react-native repo (https://vercel.com/templates/next.js/turborepo-react-native)
By default, you will have a folder directory as follows:

apps/
  native/
  web/
    app/
    next.config.js
    ...
packages/
  ui/
  typescript-config/
turbo.json
package.json
meta.json

Up till now, the following commands work:

# At `/RootFolderName`
turbo build
turbo dev
# Ctrl+C
cd apps/dashboard
turbo build
turbo dev

Now, copy and paste a NextJS project into apps/. The project was created by following through https://nextjs.org/learn/dashboard-app. What I did was copying the code into the new subdirectory named apps/dashboard/. i.e., the folder structures now become something like:

apps/
  dashboard/
    app/
    tsconfig.json
    package.json
    metro.config.js
    next.config.mjs
    ...
  native/
  web/
    app/
    next.config.js
    ...
packages/
  ui/
  typescript-config/
turbo.json
package.json
meta.json

Furthermore, I made sure apps/dashboard/package.json has a unique name field, and also a version field. Content of package.json:

{
  "name": "dashboard",
  "version": "1.0.0",
  "private": true,
  "scripts": {
    "build": "next build",
    "dev": "next dev",
    "start": "next start",
    "lint": "next lint"
  },
  "dependencies": {
    "@heroicons/react": "^2.1.4",
    "@tailwindcss/forms": "^0.5.7",
    "@vercel/postgres": "^0.8.0",
    "autoprefixer": "10.4.19",
    "bcrypt": "^5.1.1",
    "clsx": "^2.1.1",
    "next": "15.0.0-rc.0",
    "next-auth": "5.0.0-beta.19",
    "postcss": "8.4.38",
    "react": "19.0.0-rc-f994737d14-20240522",
    "react-dom": "19.0.0-rc-f994737d14-20240522",
    "tailwindcss": "^3.4.7",
    "typescript": "5.5.2",
    "use-debounce": "^10.0.1",
    "zod": "^3.23.8"
  },
  "devDependencies": {
    "@types/bcrypt": "^5.0.2",
    "@types/node": "20.14.8",
    "@types/react": "18.3.3",
    "@types/react-dom": "18.3.0",
    "eslint": "^8",
    "eslint-config-next": "14.2.4",
    "next": "15.0.0-rc.0",
    "prettier": "^3.3.2",
    "tsup": "^8.2.3"
  },
  "engines": {
    "node": ">=20.*.0"
  }
}

Now, the bug: When I run turbo build under the root directory or apps/dashboard, it fails.
i.e.,

# At `/RootFolderName`
turbo build   # This fails
cd apps/dashboard
turbo build  # This also fails

The errors are:

│ yarn run v1.22.19
│                                                                                                                                                                                                                                                                                                                     
│ $ next build     
│   ▲ Next.js 15.0.0-rc.0
│   - Environments: .env
│   - Experiments (use with caution):
│     · turbo
│ 
│    Creating an optimized production build ...
│ <w> [webpack.cache.PackFileCacheStrategy/webpack.FileSystemInfo] Resolving 'react-dom/package.json' in /RootFolderName/node_modules/react-dom/package.json', but to '/RootFolderName/node_modules/next/node_modules/react-dom/package.json' instead. Resolving dependencies are ignored for this path.
│ <w>  at unknown 4 react-dom/package.json
│ <w>  at file dependencies /RootFolderName/node_modules/next/dist/build/webpack-config.js
│ <w>  at file /RootFolderName/node_modules/next/dist/build/webpack-config.js
│ <w>  at file dependencies /RootFolderName/node_modules/next/dist/build/webpack/loaders/next-swc-loader.js
│ <w>  at file /RootFolderName/node_modules/next/dist/build/webpack/loaders/next-swc-loader.js
│ <w>  at resolve commonjs /RootFolderName/node_modules/next/dist/build/webpack/loaders/next-swc-loader.js
│ <w> [webpack.cache.PackFileCacheStrategy/webpack.FileSystemInfo] Resolving 'react/package.json' in /RootFolderName/node_modules/react/package.json', but to '/RootFolderName/node_modules/next/node_modules/react/package.json' instead. Resolving dependencies are ignored for this path.
│ <w>  at unknown 4 react/package.json
│ <w>  at file dependencies /RootFolderName/node_modules/next/dist/build/webpack-config.js
│ <w>  at file /RootFolderName/node_modules/next/dist/build/webpack-config.js
│ <w>  at file dependencies /RootFolderName/node_modules/next/dist/build/webpack/loaders/next-swc-loader.js
│ <w>  at file /RootFolderName/node_modules/next/dist/build/webpack/loaders/next-swc-loader.js
│ <w>  at resolve commonjs /RootFolderName/node_modules/next/dist/build/webpack/loaders/next-swc-loader.js
│ <w> [webpack.cache.PackFileCacheStrategy/webpack.FileSystemInfo] Resolving 'react-dom/package.json' in /RootFolderName/node_modules/react-dom/package.json', but to '/RootFolderName/node_modules/next/node_modules/react-dom/package.json' instead. Resolving dependencies are ignored for this path.
│ <w>  at unknown 4 react-dom/package.json
│ <w>  at file dependencies /RootFolderName/node_modules/next/dist/build/webpack-config.js
│ <w>  at file /RootFolderName/node_modules/next/dist/build/webpack-config.js
│ <w>  at file dependencies /RootFolderName/node_modules/next/dist/build/webpack/loaders/next-swc-loader.js
│ <w>  at file /RootFolderName/node_modules/next/dist/build/webpack/loaders/next-swc-loader.js
│ <w>  at resolve commonjs /RootFolderName/node_modules/next/dist/build/webpack/loaders/next-swc-loader.js
│ <w> [webpack.cache.PackFileCacheStrategy/webpack.FileSystemInfo] Resolving 'react/package.json' in /RootFolderName/node_modules/react/package.json', but to '/RootFolderName/node_modules/next/node_modules/react/package.json' instead. Resolving dependencies are ignored for this path.
│ <w>  at unknown 4 react/package.json
│ <w>  at file dependencies /RootFolderName/node_modules/next/dist/build/webpack-config.js
│ <w>  at file /RootFolderName/node_modules/next/dist/build/webpack-config.js
│ <w>  at file dependencies /RootFolderName/node_modules/next/dist/build/webpack/loaders/next-swc-loader.js
│ <w>  at file /RootFolderName/node_modules/next/dist/build/webpack/loaders/next-swc-loader.js
│ <w>  at resolve commonjs /RootFolderName/node_modules/next/dist/build/webpack/loaders/next-swc-loader.js
│ Failed to compile.
│ 
│ ./app/ui/dashboard/nav-links.tsx
│ Module not found: Can't resolve '@heroicons/react/24/outline'
│ 
│ https://nextjs.org/docs/messages/module-not-found
│ 
│ ./app/ui/invoices/create-form.tsx
│ Module not found: Can't resolve '@heroicons/react/24/outline'
│ 
│ https://nextjs.org/docs/messages/module-not-found
│ 
│ ./app/ui/invoices/edit-form.tsx
│ Module not found: Can't resolve '@heroicons/react/24/outline'
│ 
│ https://nextjs.org/docs/messages/module-not-found
│ 
│ ./app/ui/invoices/pagination.tsx
│ Module not found: Can't resolve '@heroicons/react/24/outline'
│ 
│ https://nextjs.org/docs/messages/module-not-found
│ 
│ ./app/ui/#-form.tsx
│ Module not found: Can't resolve '@heroicons/react/20/solid'
│ 
│ https://nextjs.org/docs/messages/module-not-found
│ 
│ 
│ > Build failed because of webpack errors
│                                                                                                                                                                                                                                                                                                                     
│ error Command failed with exit code 1.
│                                                                                                                                                                                                                                                                                                                     
│ info Visit https://yarnpkg.com/en/docs/cli/run for documentation about this command.
│ command finished with error: command (/RootFolderName/apps/dashboard) /opt/homebrew/bin/yarn run build exited (1)
└────>
 ERROR  run failed: command  exited (1)

(Workaround, I believe OP might be doing exactly this) Running pnpm install at the subdirectory:

# At `/RootFolderName`
cd apps/dashboard
pnpm install  # Now it installs packages into `apps/dashboard/node_modules/`
turbo build  # Now it works

GabenGar · 2024-07-31T11:16:45Z

I don't see a step where you run pnpm install after copying the nextjs project in.

xcoderreal · 2024-08-01T08:16:00Z

I don't see a step where you run pnpm install after copying the nextjs project in.

Would you clarify what you mean by this? The issue I'm seeing is that, I need to do these in order to view the app:

# At `/RootFolderName`
cd apps/dashboard
pnpm install  # Now it installs packages into `apps/dashboard/node_modules/`
turbo build  # Now it works

Whereas I expect running only turbo build would have worked.

I think I must be missing some configs changes, but I couldn't figure out how to fix.

GabenGar · 2024-08-01T11:06:11Z

You have to npm install in the root of monorepo every time you introduce/change a dependency anywhere within it. In case of NextJS you will also have to nuke its lock file, node_modules and .next folders before running it.

xcoderreal · 2024-08-01T17:32:07Z

I just retried:

Deleted node_modules/ and "locK" file from /RootFolderName/apps/dashboard/
At /RootFolderName, run pnpm install
Then, run turbo build

Still seeing the same.

I wonder if it was trying to find the @heroicons dependencies at the top-level node_modules?

...
│ ./app/ui/dashboard/nav-links.tsx
│ Module not found: Can't resolve '@heroicons/react/24/outline'
...

GabenGar · 2024-08-02T09:42:03Z

Does that import resolve in your IDE?

xcoderreal · 2024-08-02T16:19:46Z

Does that import resolve in your IDE?

It does. I checked by "Cmd + click" at the import statements on VS Code.

This is because running pnpm install under /RootFolderName/apps/dashboard/ would install the required app-specific dependencies?

GabenGar · 2024-08-02T19:27:15Z

pnpm install in that case installs outside of monorepo setup (and that's why it doesn't work within it).
I've looked at package.json of react native example and dashboard example and they have wildly mismatching versions of react and react-dom. Most likely you'd have to set both to strict 18.3.1 in both subpackages so they would use exact the same version of both libs.

xcoderreal · 2024-08-02T21:04:55Z

Thanks for looking into the package.json in both examples which I tried to consolidate. I tried a bit for what you said, and am still encountering the said build errors.

Two follow-up questions:

If subpackages have conflicting versions of the same lib, then turbo build would fail to work? I was under the impression that each app can specify different package versions and build individually.
This still doesn't quite explain the error pasted above?

│ ./app/ui/dashboard/nav-links.tsx
│ Module not found: Can't resolve '@heroicons/react/24/outline'

This corresponds to the dependencies the dashboard example at here.

arlyon added the area: docs Improvements or additions to documentation label Apr 8, 2024

mehulkar added the owned-by: turborepo label Apr 29, 2024

mehulkar added the needs: reproduction label Apr 29, 2024

anthonyshew closed this as completed Jun 5, 2024

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Docs: How to initial install all modules in all packages in the workspace? #7910

Docs: How to initial install all modules in all packages in the workspace? #7910

theogravity commented Apr 6, 2024

theogravity commented Apr 6, 2024

anthonyshew commented Apr 6, 2024

theogravity commented Apr 6, 2024 •

edited

Loading

theogravity commented Apr 6, 2024 •

edited

Loading

tknickman commented Apr 8, 2024

GabenGar commented Apr 23, 2024

theogravity commented Apr 23, 2024

mehulkar commented Apr 29, 2024

xcoderreal commented Jul 31, 2024

GabenGar commented Jul 31, 2024

xcoderreal commented Aug 1, 2024

GabenGar commented Aug 1, 2024

xcoderreal commented Aug 1, 2024

GabenGar commented Aug 2, 2024

xcoderreal commented Aug 2, 2024

GabenGar commented Aug 2, 2024

xcoderreal commented Aug 2, 2024

Docs: How to initial install all modules in all packages in the workspace? #7910

Docs: How to initial install all modules in all packages in the workspace? #7910

Comments

theogravity commented Apr 6, 2024

What is the improvement or update you wish to see?

Is there any context that might help us understand?

Does the docs page already exist? Please link to it.

theogravity commented Apr 6, 2024

anthonyshew commented Apr 6, 2024

theogravity commented Apr 6, 2024 • edited Loading

theogravity commented Apr 6, 2024 • edited Loading

tknickman commented Apr 8, 2024

GabenGar commented Apr 23, 2024

theogravity commented Apr 23, 2024

mehulkar commented Apr 29, 2024

xcoderreal commented Jul 31, 2024

GabenGar commented Jul 31, 2024

xcoderreal commented Aug 1, 2024

GabenGar commented Aug 1, 2024

xcoderreal commented Aug 1, 2024

GabenGar commented Aug 2, 2024

xcoderreal commented Aug 2, 2024

GabenGar commented Aug 2, 2024

xcoderreal commented Aug 2, 2024

theogravity commented Apr 6, 2024 •

edited

Loading

theogravity commented Apr 6, 2024 •

edited

Loading