Using Vite with React

This page summarizes the projects mentioned and recommended in the original post on dev.to

Our great sponsors
  • Appwrite - The Open Source Firebase alternative introduces iOS support
  • InfluxDB - Build time-series-based applications quickly and at scale.
  • talent.io - Download talent.io’s Tech Salary Report
  • Scout APM - Truly a developer’s best friend
  • SonarLint - Clean code begins in your IDE with SonarLint
  • esbuild

    An extremely fast JavaScript and CSS bundler and minifier

    Why it's so fast? because it's written in go and does a lot of optimizations. ES modules is a new browser feature that enables to natively load modules - meaning no need to bundle everything in one giant bundle. We can split the code into smaller modules and load them as needed. This helps avoid unnecessary work and stay fast no matter how big the project grows.

  • Snowpack

    ESM-powered frontend build tool. Instant, lightweight, unbundled development. ✌️ [Moved to: https://github.com/FredKSchott/snowpack] (by withastro)

    It did not take a lot of time to choose the tool. Currently, there are 3 major bundlers powered by ESM - vite, snowpack, and wmr. From the first glance - all of them look promising and I did not care about their internals as long as I don't need to touch them.

  • Appwrite

    Appwrite - The Open Source Firebase alternative introduces iOS support . Appwrite is an open source backend server that helps you build native iOS applications much faster with realtime APIs for authentication, databases, files storage, cloud functions and much more!

  • vite

    Next generation frontend tooling. It's fast!

    My conclusion is that if you won't need SSR (which experimentally supported in vite), I encourage you to try vite / other ESM build tools. It will make your dev environment really fast. Start with the docs, Skim https://github.com/vitejs/awesome-vite and look at the open issues too. It will make your dev environment really fast.

  • wmr

    👩‍🚀 The tiny all-in-one development tool for modern web apps.

    It did not take a lot of time to choose the tool. Currently, there are 3 major bundlers powered by ESM - vite, snowpack, and wmr. From the first glance - all of them look promising and I did not care about their internals as long as I don't need to touch them.

  • tsconfig-paths-webpack-plugin

    Load modules according to tsconfig paths in webpack.

    We already have configured path aliases with webpack and tsconfig - so I wanted to keep that behavior. Luckily we have the vite-tsconfig-paths exactly for that. It worked well. I could also try using the alias for that.

  • vite-tsconfig-paths

    Support for TypeScript's path mapping in Vite

    We already have configured path aliases with webpack and tsconfig - so I wanted to keep that behavior. Luckily we have the vite-tsconfig-paths exactly for that. It worked well. I could also try using the alias for that.

  • svgr

    Transform SVGs into React components 🦁

    Instead of webpack svgr - vite has a community plugin vite-plugin-svgr. Looking at its source code I can tell that it does the work as needed. In the future, I may want to add more SVGR options (currently for custom colors we use css currentColor property), so I may contribute it or create a similar plugin. NOTE: vite bundles the static svg in addition to assets even if you use vite-plugin-svgr. So many useless files will be generated. This is a minor issue that can be unnoticeable. I created a script for deleting those files (it has 0 impacts on the bundle because the client does not download those chunks).

  • InfluxDB

    Build time-series-based applications quickly and at scale.. InfluxDB is the Time Series Data Platform where developers build real-time applications for analytics, IoT and cloud-native services in less time with less code.

  • vite-plugin-svgr

    Vite plugin to transform SVGs into React components

    Instead of webpack svgr - vite has a community plugin vite-plugin-svgr. Looking at its source code I can tell that it does the work as needed. In the future, I may want to add more SVGR options (currently for custom colors we use css currentColor property), so I may contribute it or create a similar plugin. NOTE: vite bundles the static svg in addition to assets even if you use vite-plugin-svgr. So many useless files will be generated. This is a minor issue that can be unnoticeable. I created a script for deleting those files (it has 0 impacts on the bundle because the client does not download those chunks).

  • react-query

    🤖 Powerful asynchronous state management, server-state utilities and data fetching for TS/JS, React, Solid, Svelte and Vue. [Moved to: https://github.com/TanStack/query]

    Small issue with react-query devtools that solved by changing to a different minor version. But it's more an issue with the library.

  • react-markdown

    Markdown component for React

    react-markdown v4 also has an issue using process.cwd internally. I upgraded to v5 and the problem is gone. It seems that like in webpack 5 - you won't get and node.js polyfills with vite.

  • nivo

    nivo provides a rich set of dataviz components, built on top of the awesome d3 and React libraries

    Some third-party libraries like nivo for graphs use internally Node.js specific global keyword (here). But ES modules do not support it - and we get a Reference not found error for global variable. What vite tries to do is to convert them to be ESM - and run them in the browser. But the browser does not know what global is - so it fails. At first, I try to handle this in vite.config.ts with define - setting global: {} . But doing so created a problem with import GlobalStyles from "./global.style" then converted to be unwanted import GlobalStyles from "./{}.style" . So until nivo will upgrade to ES-modules - I hacked that global variable by pre-load in index.html like

  • webpack-bundle-analyzer

    Webpack plugin and CLI utility that represents bundle content as convenient interactive zoomable treemap

    In our "old" build system - I configured webpack-bundle-analyze to inspect bundle chunks and understand what it made of. I added rollup-bundle-visualyzer instead (although there is an issue that the reported size is not correct).

  • rollup-plugin-visualizer

    📈⚖️ Visuallize your bundle

    In our "old" build system - I configured webpack-bundle-analyze to inspect bundle chunks and understand what it made of. I added rollup-bundle-visualyzer instead (although there is an issue that the reported size is not correct).

  • DefinitelyTyped

    The repository for high quality TypeScript type definitions.

    I will change the as Plugin type assertion when my PR to @types/rollup-bundle-visualyzer will be merged

  • awesome-vite

    ⚡️ A curated list of awesome things related to Vite.js

    My conclusion is that if you won't need SSR (which experimentally supported in vite), I encourage you to try vite / other ESM build tools. It will make your dev environment really fast. Start with the docs, Skim https://github.com/vitejs/awesome-vite and look at the open issues too. It will make your dev environment really fast.

  • talent.io

    Download talent.io’s Tech Salary Report. Median salaries, most in-demand technologies, state of the remote work... all you need to know your worth on the market by tech recruitment platform talent.io

NOTE: The number of mentions on this list indicates mentions on common posts plus user suggested alternatives. Hence, a higher number means a more popular project.

Suggest a related project

Related posts