Vite creating it's own node_modules in workspace instead of using monorepo-CodePudding

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 it's 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"
}

CodePudding user response：

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

CodePudding user response：

It looks like you're using npm workspaces correctly in your monorepo. However, it seems like Vite is creating its own node_modules directory inside the client directory. This is not unexpected behavior, as Vite uses a local development server to serve the files in your project, and it needs to install its own dependencies in order to do so.

It's possible to configure Vite to use the node_modules directory at the root of your monorepo instead, by using the base option in your Vite config. You can add the following line to your vite.config.ts file to do this:

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

export default defineConfig({
  base: '.',
  plugins: [react()]
})

This will tell Vite to use the node_modules directory at the root of your monorepo instead of creating a new one inside the client directory.

I hope this helps! Let me know if you have any other questions.