chore: update bolt-vite-react-ts to React 19 + Vite 7#104
Conversation
Agent-Logs-Url: https://github.com/stackblitz/starters/sessions/4f2ff811-3a32-467b-8bb9-ac6528fa94f0 Co-authored-by: sheepsteak <1379888+sheepsteak@users.noreply.github.com>
Agent-Logs-Url: https://github.com/stackblitz/starters/sessions/4f2ff811-3a32-467b-8bb9-ac6528fa94f0 Co-authored-by: sheepsteak <1379888+sheepsteak@users.noreply.github.com>
- Upgraded @vitejs/plugin-react to version 5 - Upgraded tailwindcss to version 4 and added @tailwindcss/vite - Removed postcss.config.js and tailwind.config.js files - Updated index.css to use @import for Tailwind CSS - Modified vite.config.ts to include tailwindcss plugin
…int configuration
|
|
sheepsteak
changed the title
bolt-vite-react-ts to React 19 + Vite 7
| js.configs.recommended, | ||
| ...tseslint.configs.recommended, | ||
| reactHooks.configs.flat.recommended, | ||
| reactRefresh.configs.vite(), |
There was a problem hiding this comment.
https://github.com/ArnaudBarre/eslint-plugin-react-refresh/blob/main/README.md#vite-config
reactRefresh.configs.vite() will do the allowConstantExport for us.
| extends: [ | ||
| js.configs.recommended, | ||
| ...tseslint.configs.recommended, | ||
| reactHooks.configs.flat.recommended, |
There was a problem hiding this comment.
Same as adding plugin manually and enabling recommended rules.
| "tailwindcss": "^4", | ||
| "typescript": "^5", | ||
| "typescript-eslint": "^8", | ||
| "vite": "^7" |
There was a problem hiding this comment.
Vite 8 includes the new Rust compiler and although it works in Bolt it does generate a lot of WASI warnings that might confuse users. I think sticking to Vite 7 is OK for now and still relatively new and in the peerDependencies of community plugins.
There was a problem hiding this comment.
Updated values here were taken from a fresh Vite 7 react-ts app. It should be safe to use these targets now.
| "@supabase/supabase-js": "^2", | ||
| "lucide-react": "^1", | ||
| "react": "^19", | ||
| "react-dom": "^19" |
There was a problem hiding this comment.
suggestion(non-blocking): since we're using npm for these starters we should probably add minimum age for newly updated packages to avoid attacks like the recent shai-hulud one in tanstack:
ignore-scripts=true
allow-git=none
min-release-age=3
This:
- disables postinstall scripts
- blocks
git+deps in peer deps - sets minimum age of packages to 3 days
Update the
bolt-vite-react-tstemplate to modernize dependencies, streamline configuration, and improve compatibility with the latest versions of React, Vite, TailwindCSS, and TypeScript. The most significant changes include major dependency upgrades, migration to the new TailwindCSS Vite plugin, and simplification of ESLint and TailwindCSS configurations.Dependency and Compatibility Upgrades:
react,react-dom,lucide-react,@supabase/supabase-js) and devDependencies (such as@vitejs/plugin-react,eslint,eslint-plugin-react-hooks,tailwindcss,typescript, and related types) to their latest major versions for improved compatibility and access to new features.TailwindCSS Configuration Migration:
tailwind.config.js,postcss.config.js), replaced Tailwind directives inindex.csswith a single@import 'tailwindcss', and added the new@tailwindcss/viteplugin to the Vite config for a simpler and more modern setup. [1] [2] [3] [4]ESLint Configuration Modernization:
eslint.config.jsto use the latest flat config style, directly extending recommended configs for React Hooks and React Refresh, and removed manual plugin and rule definitions in favor of config presets.TypeScript Configuration Updates:
tsconfig.app.jsonandtsconfig.node.jsonto target newer ECMAScript versions, useverbatimModuleSyntax, enable stricter linting options (erasableSyntaxOnly,noUncheckedSideEffectImports), and adjust libraries for improved type safety and future compatibility. [1] [2] [3]