-
-
Notifications
You must be signed in to change notification settings - Fork 70
FAQ (DEV): Why is .jsx required for React in Vite, rather than .js?
Traditionally, React components may be written in either .js or .jsx files. Our new build tool, Vite, requires that all files containing React components have the .jsx extension. This practice helps to prevent errors during Vite's static analysis of imported files.
Avoiding Unnecessary Processing
If Vite allowed JSX in .js files, it would have to parse every .js file using an AST transformation, just in case it contained JSX. This would introduce significant performance costs, slowing down the development server.
Performance Optimization
By requiring JSX files to use the .jsx extension, Vite can:
- Quickly determine which files need JSX transformation.
- Skip heavy AST parsing for regular .js files, making builds and hot module replacement (HMR) faster.
Explicit vs. Implicit JSX Handling
Using .jsx explicitly signals that a file contains JSX and needs transformation.
This avoids the ambiguity of whether a .js file should be treated as JSX or plain JavaScript.
Vite enforces .jsx to optimize performance by skipping unnecessary on .js files, ensuring a faster development experience.
- 🌐 Why only .jsx extension works with Vite not .js extension in React?
- quotes Twitter Post by Evan You, creator of Vite
- 🌐 What is an AST Transformation? - Stack Overflow
- 🌐 How to configure Vite to allow JSX syntax in JS files? - StackOverflow
- components/Map/index.jsx
- components/common/ChipList/index.jsx
- components/main/Desktop/CouncilSelector/index.jsx
- components/main/Desktop/FilterMenu.jsx
- components/main/Desktop/TypeSelector/index.jsx
- components/main/Desktop/index.jsx