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
Step 2 - Install Vite Dependencies
Install the required dependencies for Vite.
npm install vite @vitejs/plugin-react
- Depending on your specific needs, you can choose different plugins from the official Vite plugins documentation.
Step 3 - Add vite.config.ts and Install empty-module
Install empty-module.
npm install --save-dev empty-module
-
Assuming,
processandbufferis 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",
},
});
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>
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" />
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"
}
}
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"
]
}
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.jsandreact-app-env.d.tsfiles.
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)
Thank you!