311‐Data: Vite Migration ‐ Converting JS to JSX

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.

---

Summary

Vite enforces .jsx to optimize performance by skipping unnecessary on .js files, ensuring a faster development experience.

Resources

• https://github.com/vitejs/vite/issues/13715#issuecomment-1623393713 quoting Evan You, creator of Vite
• https://stackoverflow.com/a/76726872/6432160
• https://stackoverflow.com/questions/6235085/what-is-an-ast-transformation

Migrated Files

• 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