Umi Preset Vite

Overview:

I recently started working with umi-preset-vite for my project, and I've stumbled upon some nuances that are definitely worth sharing. The integration of vite with umi can substantially enhance your development experience, especially with its hot module replacement capabilities. However, there are a few setup steps and common issues that one should be mindful of to ensure a smooth development process.

One major highlight is the requirement to configure certain settings in your package.json to avoid runtime errors, particularly those related to vite commands. Additionally, understanding how to properly implement CSS modules and handle any dependencies such as less is crucial for maintaining your project's styling integrity.

Features:

• Post-install Script: It's recommended to add "postinstall": "umi g tmp" in your package.json scripts to ensure necessary configurations are generated after installing dependencies.
• Vite Configuration: To avoid the common error "vite:dev does not exist," be sure to include relevant vite configurations in your project settings.
• Hot Module Replacement (HMR): Umi uses react-refresh for hot updates, but be aware that it does not support specific patterns like export default function () {} which can lead to issues if not structured correctly.
• CSS Modules Support: For versions 0.2.x, you don’t need to modify the vite source code manually—CSS modules should work out of the box. Ensure your setup is correct for best results.
• Modify Vite CSS Plugin: After installing dependencies, if the command yarn umi modifyViteCSSPlugin fails, re-running it until you see the success message is essential for correct CSS functionality.
• Dependency Management: If you encounter the error regarding "less" being not found, make sure to install it in your project as a preprocessor dependency to prevent styling issues.