DEV Community

Mohammad Shahbaz Alam
Mohammad Shahbaz Alam

Posted on • Edited on

Moving from Create-React-App to Vite for Web3Auth Projects

#vite #react #webdev

React has moved away from recommending Create React App as the preferred starting point for new projects. When working with Web3Auth SDKs, you might encounter issues like @metamask/abi-utils/dist/parsers/bool.js issue. To avoid such issues, we recommend switching to Vite. Follow the steps below to make the transition.

Step 1 - Remove Create React App

First, uninstall react-scripts and react-app-rewired from your project.

npm uninstall react-scripts react-app-rewired
Enter fullscreen mode Exit fullscreen mode

Step 2 - Install Vite Dependencies

Install the required dependencies for Vite.

npm install vite @vitejs/plugin-react
Enter fullscreen mode Exit fullscreen mode

Step 3 - Add vite.config.ts and Install empty-module

Install empty-module.

npm install --save-dev empty-module
Enter fullscreen mode Exit fullscreen mode

  • Assuming, process and buffer is already installed, if not, install those as well.

    npm install --save-dev buffer process

Next, create a vite.config.ts file at the root of your project with the following content:

import { defineConfig } from "vite";
import react from "@vitejs/plugin-react";

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [react()],
  resolve: {
    alias: {
      crypto: "empty-module",
      assert: "empty-module",
      http: "empty-module",
      https: "empty-module",
      os: "empty-module",
      url: "empty-module",
      zlib: "empty-module",
      stream: "empty-module",
      _stream_duplex: "empty-module",
      _stream_passthrough: "empty-module",
      _stream_readable: "empty-module",
      _stream_writable: "empty-module",
      _stream_transform: "empty-module",
    },
  },
  define: {
    global: "globalThis",
  },
});
Enter fullscreen mode Exit fullscreen mode

Step 4 - Move index.html and Include Polyfills

Create React App uses public/index.html as the default entry point, while Vite looks for index.html at the root level. Move your index.html to the root directory and update the script tag accordingly.

Also, include the polyfills as shown below:

<!-- index.html -->
<!DOCTYPE html>
<html lang="en">
  <head>
    <!-- Include these lines for polyfills --> 
    <script type="module">
      import { Buffer } from "buffer";
      import process from "process";
      window.Buffer = Buffer;
      window.process = process;
    </script>
  </head>
  <body>
    <noscript>You need to enable JavaScript to run this app.</noscript>
    <div id="root"></div>
    <script type="module" src="/src/index.tsx"></script>
    <!-- Optionally, you can rename index.tsx to main.tsx to be consistent with Vite folder structure. -->
  </body>
</html>
Enter fullscreen mode Exit fullscreen mode

Step 5 - Create vite-env.d.ts

Create a vite-env.d.ts file inside the src folder with the following content:

/// <reference types="vite/client" />
Enter fullscreen mode Exit fullscreen mode

Step 6 - Update Scripts in package.json

Replace the existing react-app-rewired scripts in package.json with Vite scripts.

{
  "scripts": {
    "start": "vite",
    "build": "tsc && vite build",
    "serve": "vite preview"
  }
}
Enter fullscreen mode Exit fullscreen mode

Step 7 - Update tsconfig.json

Update your tsconfig.json to the following:

{
  "compilerOptions": {
    "allowJs": false,
    "allowSyntheticDefaultImports": true,
    "esModuleInterop": true,
    "forceConsistentCasingInFileNames": true,
    "isolatedModules": true,
    "jsx": "react-jsx",
    "lib": [
      "dom",
      "dom.iterable",
      "esnext"
    ],
    "module": "esnext",
    "moduleResolution": "node",
    "noEmit": true,
    "noFallthroughCasesInSwitch": true,
    "resolveJsonModule": true,
    "skipLibCheck": true,
    "strict": true,
    "target": "ESNext",
    "types": [
      "vite/client"
    ]
  },
  "include": [
    "src"
  ]
}
Enter fullscreen mode Exit fullscreen mode

Handling URI Malformed Error

You might encounter Error: URI malformed when running the app. To fix this, remove all references to %PUBLIC_URL% in the index.html.

Optional Steps

  • Remove config-overrides.js and react-app-env.d.ts files.

By following these steps, you should be able to successfully migrate your project from Create React App to Vite, providing you with a faster development experience and a more modern build setup.

Top comments (1)

Collapse
 
tiep_adamle_e0caefd65c profile image
Tiep (Adam) Le •

Thank you!