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.

Create React App to Vite

Table of contents