Vite

What This Skill Does

The Vite skill acts as a specialized assistant for configuring, optimizing, and troubleshooting Vite-based projects. Whether you are bootstrapping a new application, transitioning a legacy build to ESM, or fine-tuning production assets, this skill provides actionable configurations and deep technical explanations. It helps developers manage complex concerns like CommonJS interop, dependency pre-bundling, path aliasing, and development server proxying.

Installation

To integrate this skill into your OpenClaw environment, execute the following command in your terminal: clawhub install openclaw/skills/skills/ivangdavila/vite

Use Cases

• Project Optimization: Reducing dev server startup times by configuring optimizeDeps for heavy, infrequently updated dependencies.
• Build Troubleshooting: Resolving 'module not found' or 'require is not defined' errors when integrating legacy CommonJS libraries into a modern ESM Vite project.
• Asset Management: Setting up complex path aliases and managing static assets between the public/ directory and src/assets/ to ensure production builds correctly hash and link files.
• Environment Configuration: Safely managing sensitive API keys using the VITE_ prefix and standardizing variable access via import.meta.env.
• API Integration: Configuring robust development proxies to bypass CORS issues while maintaining strict environment isolation.

Example Prompts

1. 'My app is failing to resolve a CommonJS dependency that isn't compatible with ESM. How do I configure my vite.config.ts to handle this?'
2. 'I want to set up path aliases for my project so I can use @/components instead of relative paths like ../../../components. What do I need to update in both Vite and TypeScript?'
3. 'How do I proxy requests from /api to my backend running on localhost:5000 while ensuring the origin header is handled correctly?'

Tips & Limitations

• Dev vs. Prod: Remember that the dev server proxy and specific environment variable behaviors are distinct from build-time production logic. Always test production builds using vite preview.
• Pre-bundling: If you experience stale dependencies, delete the node_modules/.vite directory before forcing a rebuild.
• Path Aliases: Ensure that your tsconfig.json matches the resolve.alias configuration in vite.config.ts, or your IDE will report missing types while the code actually runs.
• Performance: Use optimizeDeps.force: true only as a last resort, as it disables the performance benefits of Vite's intelligent caching layer.