Monorepo Deps

Monorepo Dependency Management

When to Use

Activate when:

• Adding new dependencies
• Updating package versions
• Fixing "multiple React instances" errors
• Aligning versions across packages

Workspace Structure

ReactSpacesMonoRepo/
├── package.json          # Root - shared deps, overrides
├── pnpm-workspace.yaml   # Workspace definition
├── pnpm-lock.yaml        # Lock file (DO NOT npm install)
├── packages/
│   ├── shared/           # @disruptive-spaces/shared
│   ├── webgl/            # @disruptive-spaces/webgl
│   ├── chat/             # @disruptive-spaces/chat
│   ├── header-auth-links/
│   ├── testing/          # Dev harness
│   └── website/
└── functions/            # Firebase (separate deps)

Commands

# Install all deps
pnpm install

# Add to specific package
pnpm add lodash --filter @disruptive-spaces/webgl

# Add to root (shared)
pnpm add -w typescript

# Update all instances of a package
pnpm update react --recursive

# Check for outdated
pnpm outdated --recursive

Version Alignment

Current Issues

Enforcing Versions

In root package.json:

{
  "pnpm": {
    "overrides": {
      "react": "^18.2.0",
      "react-dom": "^18.2.0"
    }
  }
}

Hoisting Common Dependencies

Dependencies used in 3+ packages should be hoisted to root:

// Root package.json
{
  "dependencies": {
    "@chakra-ui/react": "^2.8.2",
    "@emotion/react": "^11.11.3",
    "framer-motion": "^11.0.0",
    "react-icons": "^5.0.0"
  }
}

Then in workspace packages:

// packages/webgl/package.json
{
  "dependencies": {
    "@chakra-ui/react": "workspace:*"
  }
}

Workspace References

// packages/webgl/package.json
{
  "dependencies": {
    "@disruptive-spaces/shared": "workspace:*"
  }
}

React Deduplication

Problem

Multiple React instances cause:

• Hooks errors (Invalid hook call)
• Context not working across packages
• useEffect running twice unexpectedly

Solution

1. Root overrides (already set):

{
  "pnpm": {
    "overrides": {
      "react": "^18.2.0",
      "react-dom": "^18.2.0"
    }
  }
}

2. Vite alias (in each vite.config.js):

resolve: {
  alias: {
    'react': path.resolve(rootDir, 'node_modules/react'),
    'react-dom': path.resolve(rootDir, 'node_modules/react-dom'),
  },
  dedupe: ['react', 'react-dom', 'framer-motion', '@chakra-ui/react']
}

Adding New Packages

To a workspace package

# Correct
pnpm add axios --filter @disruptive-spaces/webgl

# Wrong (uses npm, breaks lock)
cd packages/webgl && npm install axios

Shared dependency

# Add to root
pnpm add -w lodash

# Reference from package
# packages/webgl/package.json: "lodash": "workspace:*"

Checking for Issues

# Find duplicate packages
pnpm why react

# List all versions of a package
pnpm list react --recursive

# Find mismatched versions
pnpm outdated --recursive

TypeScript in Monorepo

Root tsconfig.json

{
  "compilerOptions": {
    "strict": true,
    "baseUrl": ".",
    "paths": {
      "@disruptive-spaces/shared/*": ["packages/shared/*"]
    }
  }
}

Package tsconfig.json

{
  "extends": "../../tsconfig.json",
  "compilerOptions": {
    "outDir": "./dist"
  },
  "include": ["src/**/*"]
}

Common Issues

Related Skills

• vite-config - Vite build configuration
• frontend-development - React patterns