I have a monorepo for a fullstack webapp with the following directory structure

.
├── client
│   ├── index.html
│   ├── package.json
│   ├── src
│   └── vite.config.ts
├── node_modules
├── package-lock.json
├── package.json
├── server
│   ├── package.json
│   └── src
├── tsconfig.json
└── tsconfig.node.json

However, when I run npm run dev -ws client, vite generates it's own node_modules/ inside client/.

.
├── client
│   ├── index.html
│   ├── node_modules <--- this
│   │   └── .vite
│   │       └── deps_temp
│   │           └── package.json
│   ├── package.json
│   ├── src
│   └── vite.config.ts

My understanding is that the point of using npm workspaces is to avoid having multiple node_modules/ in each sub-project, instead having all dependencies installed in the root node_modules/. Vite generating its own seems to defeat that point.

I'm assuming I don't have something configured properly (I used npx create-vite to setup vite).

Output of npm run dev -ws client

> @sargon-dashboard/[email protected] dev
> vite client

(!) Could not auto-determine entry point from rollupOptions or html files and there are no explicit optimizeDeps.include patterns. Skipping dependency pre-bundling.

  VITE v3.2.4  ready in 175 ms

  ➜  Local:   http://localhost:5173/
  ➜  Network: use --host to expose

Contents of vite.config.ts

import { defineConfig } from 'vite'
import react from '@vitejs/plugin-react'

// /config/
export default defineConfig({
  plugins: [react()]
})

contents of root/package.json

{
    "name": "app",
    "private": true,
    "workspaces": [
        "client",
        "server"
    ]
}

contents of root/client/package.json

{
  "name": "@app/client",
  "private": true,
  "version": "0.0.0",
  "type": "module",
  "scripts": {
    "dev": "vite",
    "build": "tsc && vite build",
    "preview": "vite preview"
  },
  "dependencies": {
    "react": "^18.2.0",
    "react-dom": "^18.2.0"
  },
  "devDependencies": {
    "@types/react": "^18.0.24",
    "@types/react-dom": "^18.0.8",
    "@vitejs/plugin-react": "^2.2.0",
    "typescript": "^4.6.4",
    "vite": "^3.2.3"
  }
}

contents of root/server/package.json

{
  "name": "@app/server",
  "version": "0.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "keywords": [],
  "author": "",
  "license": "ISC"
}

I have a monorepo for a fullstack webapp with the following directory structure

.
├── client
│   ├── index.html
│   ├── package.json
│   ├── src
│   └── vite.config.ts
├── node_modules
├── package-lock.json
├── package.json
├── server
│   ├── package.json
│   └── src
├── tsconfig.json
└── tsconfig.node.json

However, when I run npm run dev -ws client, vite generates it's own node_modules/ inside client/.

.
├── client
│   ├── index.html
│   ├── node_modules <--- this
│   │   └── .vite
│   │       └── deps_temp
│   │           └── package.json
│   ├── package.json
│   ├── src
│   └── vite.config.ts

My understanding is that the point of using npm workspaces is to avoid having multiple node_modules/ in each sub-project, instead having all dependencies installed in the root node_modules/. Vite generating its own seems to defeat that point.

I'm assuming I don't have something configured properly (I used npx create-vite to setup vite).

Output of npm run dev -ws client

> @sargon-dashboard/[email protected] dev
> vite client

(!) Could not auto-determine entry point from rollupOptions or html files and there are no explicit optimizeDeps.include patterns. Skipping dependency pre-bundling.

  VITE v3.2.4  ready in 175 ms

  ➜  Local:   http://localhost:5173/
  ➜  Network: use --host to expose

Contents of vite.config.ts

import { defineConfig } from 'vite'
import react from '@vitejs/plugin-react'

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [react()]
})

contents of root/package.json

{
    "name": "app",
    "private": true,
    "workspaces": [
        "client",
        "server"
    ]
}

contents of root/client/package.json

{
  "name": "@app/client",
  "private": true,
  "version": "0.0.0",
  "type": "module",
  "scripts": {
    "dev": "vite",
    "build": "tsc && vite build",
    "preview": "vite preview"
  },
  "dependencies": {
    "react": "^18.2.0",
    "react-dom": "^18.2.0"
  },
  "devDependencies": {
    "@types/react": "^18.0.24",
    "@types/react-dom": "^18.0.8",
    "@vitejs/plugin-react": "^2.2.0",
    "typescript": "^4.6.4",
    "vite": "^3.2.3"
  }
}

contents of root/server/package.json

{
  "name": "@app/server",
  "version": "0.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "keywords": [],
  "author": "",
  "license": "ISC"
}

• javascript
• npm
• vite
• monorepo
• react-fullstack

1 Answer 1

You did nothing wrong. node_modules/.vite is the default vite cache directory. It only looks like a misconfiguration in a monorepo because you don't expect a node_modules folder inside the packages anymore.

If you want, you can configure a different path: https://v2.vitejs.dev/config/#cachedir