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,
process
andbuffer
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",
},
});
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.js
andreact-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)
Thank you!