Create React App to Vite
Tested migrating a React 17 create-react-app using craco to Vitejs.
There is a new hype saying that it is Lightning Fast to work with and I wanted to start playing around with it.
Start new project
I made the migration creating a new project from scratch to start with a project from scratch.
yarn create vite migration --template react-ts
cd migration
yarn
yarn dev
Move old CRA src files to new project
Had to downgrade react to v17.0.1 because I didn't want to have to deal with migrating to react 18 in this test
Than moved all files from the old repository to the new changing index.html to point to index.tsx
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<link rel="icon" type="image/svg+xml" href="/vite.svg" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Vite + React + TS</title>
</head>
<body>
<div id="root"></div>
- <script type="module" src="/src/main.tsx"></script>
+ <script type="module" src="/src/index.tsx"></script>
</body>
</html>
Ran yarn dev --debug installing all missing libraries and got a problem importing files using a absolute path.
Absolute path resolve
[vite] Internal server error: Failed to resolve import "shared/components/Context" from "src/index.tsx". Does the file exist?
After some time looking for a solution came across this plugin:
yarn add -D vite-tsconfig-paths
Adding this configuration to vite.config.ts
import { defineConfig } from 'vite'
import react from '@vitejs/plugin-react'
+ import tsconfigPaths from "vite-tsconfig-paths";
// https://vitejs.dev/config/
export default defineConfig({
+ plugins: [react(), tsconfigPaths()]
})
Sass problem
The old project was using sass so this error appeared:
Preprocessor dependency "sass" not found. Did you install it?
First we need to install the sass library:
yarn add -D sass
Throughout the project it is used variables to define our common theme style as it wasn't loaded running the project I got many problems like this:
root stylesheet
Undefined variable.
╷
9 │ font-weight: $font-weight-medium;
│ ^^^^^^^^^^^^^^^^^^^
Previously we solved this using craco-sass-resources-loader on .craco.js:
const sassResourcesLoader = require('craco-sass-resources-loader');
require('dotenv').config();
module.exports = {
plugins: [
{
plugin: sassResourcesLoader,
options: {
resources: [
'./src/shared/styles/variables.scss',
'./src/shared/styles/mixins.scss',
],
},
},
],
};
And Vite has a built in way to do this sort of things:
import { defineConfig } from "vite";
import react from "@vitejs/plugin-react";
import tsconfigPaths from "vite-tsconfig-paths";
// https://vitejs.dev/config/
export default defineConfig({
+ css: {
+ preprocessorOptions: {
+ scss: {
+ additionalData: `
+ @import "./src/shared/styles/variables";
+ @import "./src/shared/styles/mixins";
+ `,
+ },
+ },
+ },
plugins: [
react(),
tsconfigPaths(),
],
});
One caveat is that a scss file library import in Vite doesn't require ~ in the start of the import:
Can't find stylesheet to import.
╷
1 │ @import '~@company/ui-design-tokens/build/web/tokens.scss';
│ ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
╵
src/shared/styles/variables.scss
- @import '~@company/ui-design-tokens/build/web/tokens.scss';
+ @import '@company/ui-design-tokens/build/web/tokens.scss';
Env variables
All environment variable on .env should be changed from REACT_APP_ to VITE_. You could also change it using vite-plugin-env-compatible.
Final thoughts
Will write a follow up articles as I go playing around with this.
Probably around adding linguijs to a Vite project.
Please feel free to leave me a comment for questions or if I missed something.
