# Create React App to Vite
Tested migrating a React 17 create-react-app using [craco](https://www.npmjs.com/package/@craco/craco) to [Vitejs](https://vitejs.dev).
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`
```diff
Vite + React + TS
-
+
```
Ran `yarn dev --debug` installing all missing libraries and got a problem importing files using a absolute path.
# Absolute path resolve
```error
[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`
```diff
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:
```diff
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`
```diff
- @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](https://www.npmjs.com/package/vite-plugin-env-compatible).
## Final thoughts
Will write a follow up articles as I go playing around with this.
Probably around adding [linguijs](https://lingui.js.org) to a Vite project.
Please feel free to leave me a comment for questions or if I missed something.