It seems that the React community is finally accepting that their old way of scaffolding a new projects, create-react-app (CRA in short), has outlived its usefulness. While there is no official statement about that, there was no update on npm in about a year, which in the JS universe screams “TOXIC WASTE” in very clear words, and meanwhile also has vanished from the official “Start a new React Project” docs.
In search for possibilities, one can do some quick google searches (e.g. this or that or maybe this) and at the moment, I’m giving vite a chance and it has not disappointed me yet, as the opposite:
- the build definitely feels faster (as the French would say: plus vite), but I never quantified it
- that over 9000 deprecation warnings one was accustomed to using CRA – gone TO ZERO
- and the biggest point, no dependency on webpack. Webpack has this weird custom to introduce brutally breaking changes between their versions and then you have to polyfill Node JS core modules or whatever floats their boat, giving users not a choice – i.e. making it highly TOXIC in itself
But still, the react-scripts which CRA employs have played quite a role in development, as it also helped with the “npm start” development server and also as a test runner – so generally, if you have developed your project over some years, you might have relied on it quite a bit, and now you don’t want to recreate everything from scratch.
I recently migrated one of our projects and this is what worked for me. There were three main concerns
- switch the general infrastructure to vite, so we can develop and build again
- introduce vitest as a test runner
- migrate Redux store tests specifically
Let’s focus today on the thing without tests and I will come back to that next time.
Migrate to vite INFRASTRUCTURE
This was actually surprisingly concise, I just had to
npm install -D vite @vitejs/plugin-react
npm uninstall react-scripts
(when in doubt, remove the node_modules folder and run npm install again, but I didn’t have to), then I adjusted package.json to:
"scripts": {
"start": "vite",
"build": "vite build",
},
You might prefer to call your dev server via “npm run dev” instead of “npm start”, in that case just replace the "start": "vite" with "dev": "vite" above.
The Vite templates prefer to include a script "preview": "vite preview" but I do not use it, so I didn’t copy that.
It also was required to set this package.json entry:
// somewhere top-level, i.e. next to "version" or somewhere like that
"type": "module",
(I’m not entirely sure whether we can now safely remove the “browserslist” or “babel” entries from the package.json because they might be useless now, but I will have to think about in another minute.)
Now, some real code changes. One of the larger todos here might be to make sure that every JSX-containing source file ends with .jsx – there have been discussions about this and beforehand, it was still possible to just place your <App/> etc. inside an App.js, but vite does not like that anymore, so this is a thing you have to do.
So the code changes amount to:
- Rename every .js file which has some JSX in it to .jsx – pro tip: do it via the IDE so you do not have to care for every import / require-Statement manually!
- move the template in ./public/index.html directly to ./index.html and in there, replace every mentioning of
%PUBLIC_URL% just by the single slash /
- In the index.html <body>, include your index.jsx e.g. like:
<body>
<noscript>You need to enable JavaScript to run this app.</noscript>
<div id="root"></div>
<script type="module" src="/src/index.jsx"></script>
</body>
It might be said that the vite templates like to call their index file “main.jsx”, but it’s not important – just match whatever you put inside the <script src="..."/>.
Now in order not to change your habits too much, i.e. keep your CI build as it is, plus maybe some Docker Dev Containers or even browser bookmarks, you can use this vite.config.js – see docs:
import { defineConfig } from 'vite';
import react from '@vitejs/plugin-react';
export default defineConfig({
plugins: [react()],
server: {
port: 3000,
host: true
},
build: {
outDir: './build'
},
});
otherwise, vite prefers to run its dev server on port 5173 (guess it’s Leetspeak) and build in ./dist – just so you know.
Addon: Using ReactComponents from SVGs with Vite. Also with refs.
Since today morning, when I wrote this article, I already learned something new. In another project we were importing SVG files via the approach
import {ReactComponent as Bla} from "./bla.svg";
const ExampleUsage = () => {
return <Bla />;
};
Doing so now results in
Uncaught SyntaxError: ambiguous indirect export: ReactComponent
This can be solved by npm install vite-plugin-svgr and then updating vite.config.js:
import {defineConfig} from "vite";
import react from "@vitejs/plugin-react";
import svgr from "vite-plugin-svgr";
export default defineConfig({
plugins: [
svgr({
svgrOptions: {
ref: true,
},
}),
react(),
],
server: {
port: 3000,
host: true,
},
build: {
outDir: "./build",
},
});
The { svgrOptions: {ref: true} } was a specific requirement for our use case, it is necessary if you ever want to access the imported ReactComponents ref; i.e. in our ExampleUsage we needed a specification <Bla ref={...}/> . Leaving the svgrOption ref then at false (its default) gives us the error:
Warning: Function components cannot be given refs. Attempts to access this ref will fail. Did you mean to use React.forwardRef()?
Then, Make the tests work again
As mentioned above, these were a bit trickier, and while I found a way to leave most tests untouched, there was some specific tweaking to be done with Redux store tests, and also with mocking a foreign class (GraphQLClient from “graphql-request” in my case).
But as also mentioned above, I guess this might be a topic for my next blog post. In case you urgently need that knowledge, drop us a mail or something.. 🙂
Schneide Blog 