While we were busy using tools like on a day-to-day basis, just popped up as an efficient tool that brought innovation and gained a lot of attention in the community. Create React App (CRA) Vite However, migrating an existing project from Create React App (CRA) to Vite can be a journey filled with unexpected challenges. Here, I share our experience, shedding light on the intricacies of such a migration and providing insights that might ease your transition. Initial Setup and Configuration Our odyssey began with the addition of and to our project, which necessitated the removal of and . Our reliance on had left us with custom configurations that didn't translate directly to Vite. This was particularly evident when addressing our JSX files, traditionally with extensions, which we resolved by crafting a custom plugin to enforce extensions for JSX-containing files. @vitejs/plugin-react vite react-scripts react-app-rewired react-app-rewired .js .jsx // vite.config.js snippet
optimizeDeps: {
    esbuildOptions: {
        plugins: [
            {
                name: 'load-js-files-as-jsx',
                setup(build) {
                    build.onLoad(
                        {filter: /src\/.*\.js$/},
                        async (args) => ({
                            loader: 'jsx',
                            contents: await fs.readFile(args.path, 'utf8'),
                        })
                    )
                },
            },
        ],
    },
}, Troubleshooting the Setup Even with configurations seemingly in place, our application was initially unresponsive, offering no clues beyond a message. It was only after comparing our structure with a Vite skeleton project did we realised that needed relocation from the directory to the root. This simple move was the key to our breakthrough. This site can’t be reached index.html public SVG Usage The initial application run surfaced a plethora of errors, especially with SVG imports. We swiftly adopted , modifying our import statements to accommodate Vite's module resolution. vite-plugin-svgr // vite.config.js snippet
plugins: [
    react(),
    svgr({
        svgrOptions: {},
        include: '**/*.svg?react',
    }),
], Path Aliases and Environment Variables Migrating custom paths and environment variables was another hurdle. The differed significantly from , but we mapped our aliases and adopted the pattern, prefixing our variables with to align with Vite's conventions. Vite configuration syntax CRA import.meta.env VITE_ // vite.config.js snippet
resolve: {
    alias: {
        // Aliases
    },
}, Testing and Linting Adjustments With Vite, we transitioned from Jest to Vitest, necessitating a renaming of our test files and an addition to our ESLint configuration to recognize Vitest's global variables. // .eslintrc snippet
"globals": {
    "vi": true
} Build and Development Configuration Vite's default build directory is , a departure from CRA's . This necessitated script updates in our . Moreover, to maintain our development workflow, we customized the development server's startup to land on a specific admin page. dist build package.json // package.json snippet
"dev": "vite --port 3000 --open custom-url", Migrating an NPM Module to Vite The transition of an NPM module from CRA to Vite introduced unique considerations. We disabled the public directory and defined the main entry file for the library. The package's main entry point was also specified in . package.json // vite.config.js snippet for NPM module
publicDir: false,
build: {
    lib: {
        entry: path.resolve(__dirname, 'src/main.jsx'),
        formats: ['es'],
        fileName: 'main',
    },
    rollupOptions: {
        external: ['react', 'react-dom', 'react/jsx-runtime'],
    },
}, For CSS management, we leveraged , which efficiently chunked CSS files corresponding to their JavaScript counterparts. vite-plugin-lib-inject-css // vite.config.js snippet
plugins: [
    // Other plugins...
    libInjectCss(),
    // ...
], Conclusion The migration from CRA to Vite was far from trivial; it was a testament to the complexity hidden behind the simplicity of modern tooling. Every step revealed a new aspect of the build and deployment process that we took for granted with CRA. However, the improved build times, reduced configuration overhead, and the promise of a more streamlined development experience provided by Vite were compelling reasons to undertake this journey. Through trial and error and a fair bit of Googling, we emerged on the other side with a functional setup, a deeper understanding of our toolchain, and a newfound appreciation for the craft of web development. References 1. : . DEV Community A guide detailing the migration process from CRA to Vite, including GitHub Actions workflow updates and optimization tips for development processes 2. : . FreeCodeCamp Offers insights into updating environment variables and troubleshooting common issues when migrating from CRA to Vite, such as global is not defined errors 3. : . Robin Wieruch's Blog Provides a comprehensive guide on migrating to Vite, including creating a `vite.config.js` file and updating `index.html`, with additional steps for using ESLint and TypeScript with Vite 4. : . KingsCoder A step-by-step tutorial on converting a CRA application to Vite, with additional instructions for TypeScript templates and solutions for potential NPM installation errors 5. : . Patrick Desjardins' Blog Shares personal migration experiences to ViteJS with TypeScript and absolute path capability, including configuring the `vite.config.ts` file and handling environment variables 6. : . HackerNoon Discusses why Vite is considered better than CRA, emphasizing its faster speed and bundling efficiency with Rollup 7. : . HackerNoon Describes the obsolescence of CRA and presents Vite among other alternatives, noting its performance benefits and fast development time 8. : . HackerNoon A case study on improving speed and performance by migrating from Webpack to Vite, including practical experiences and lessons learned

Walkthroughs, tutorials, guides, and tips. This story will teach you how to do something new or how to do something better.

The code in this story is for educational purposes. The readers are solely responsible for whatever they build with it.

This story contains new, firsthand information uncovered by the writer.

The writer was physically present in relevant location(s) to this story. The location is also a prevalent aspect of this story be it news or otherwise.

Augmentastic || Augmented Reality

Navigating the Transition from CRA to Vite – A Developer's Journey

About Author

Comments

TOPICS

THIS ARTICLE WAS FEATURED IN

Related Stories

Detecting Scroll Direction in React: a StackOverflow Answer Turned NPM Package

Create React App is Dead! Here are Some Alternatives

How Does Vite Achieve Constant Time Builds?

How to Create SVG Sprite With Icons

How To Serve a Vite + Vue3 Page Inside a Sub-folder

Vue Amsterdam 2022 - Part I: State of the Vuenion

Detecting Scroll Direction in React: a StackOverflow Answer Turned NPM Package

Create React App is Dead! Here are Some Alternatives

How Does Vite Achieve Constant Time Builds?

How to Create SVG Sprite With Icons

How To Serve a Vite + Vue3 Page Inside a Sub-folder

Vue Amsterdam 2022 - Part I: State of the Vuenion

Light-Mode

Classic

Newspaper

Minty

Dark-Mode

Neon Noir

Minty

HN StartUps