# \[Archive\] Facing issue changing create-react-app to vite app

**URL:** <https://builder.metamask.io/t/archive-facing-issue-changing-create-react-app-to-vite-app/1251>\
**Category:** Embedded Wallets (Web3Auth)\
**Created:** [August 30, 2024, 11:14am UTC](https://builder.metamask.io/t/archive-facing-issue-changing-create-react-app-to-vite-app/1251 "2024-08-30T11:14:48Z")\
**Posts on this page:** 7\
**Page:** 1

<div class="post-metadata">

**Author:** ![abhishek.sagu](https://avatars.discourse-cdn.com/v4/letter/a/b9bd4f/32.png) [@abhishek.sagu](https://builder.metamask.io/u/abhishek.sagu)\
**Post date:** [August 30, 2024, 11:14am UTC](https://builder.metamask.io/t/archive-facing-issue-changing-create-react-app-to-vite-app/1251/1 "2024-08-30T11:14:48Z")

</div>

> **🏛 Archived Content from Web3Auth Community**
> 
> This topic was originally posted by **abhishek.sagu** on 8/30/2024.  
> This content has been migrated from our previous community forum to preserve valuable discussions.

* * *

I am trying to follow the login given in example at [web3auth-core-kit-examples/single-factor-auth-web/sfa-web-custom-jwt-example at main · Web3Auth/web3auth-core-kit-examples · GitHub](https://github.com/Web3Auth/web3auth-core-kit-examples/tree/main/single-factor-auth-web/sfa-web-custom-jwt-example) . I wanted to add it in a create-react-app i already had. Installing @web3auth/ethereum-provider here gave me some error and the docs also said that create-react-app is deprecated , so i tried to convert it to vite app. I followed the guide at [How to Migrate from Create React App to Vite](https://web3auth.io/community/t/how-to-migrate-from-create-react-app-to-vite/8807) . Now i am getting this issue which i am unable to debug

Uncaught SyntaxError: Identifier ‘Buffer’ has already been declared (at @web3auth\_ethereum-provider.js?v=66ae6f42:114:3)

here is my vite.config.js file (i have used js instead of ts for my project)

/\* eslint-disable import/no-extraneous-dependencies \*/  
import react from “@vitejs/plugin-react”;  
import { defineConfig } from “vite”;  
import inject from “@rollup/plugin-inject”;  
import { NodeGlobalsPolyfillPlugin } from “@esbuild-plugins/node-globals-polyfill”;  
import { NodeModulesPolyfillPlugin } from “@esbuild-plugins/node-modules-polyfill”;

export default defineConfig({  
plugins: [  
react(),  
inject({  
Buffer: [“buffer”, “Buffer”],  
include: “\*\*/\*.js”, // Ensure Buffer is only injected in .js files  
}),  
],  
resolve: {  
alias: {  
buffer: “buffer”,  
},  
},  
define: {  
global: “globalThis”,  
},  
optimizeDeps: {  
esbuildOptions: {  
define: {  
global: “globalThis”,  
},  
plugins: [  
NodeGlobalsPolyfillPlugin({  
buffer: true,  
}),  
NodeModulesPolyfillPlugin(),  
],  
},  
},  
});

How do i fix this issue ? Can someone please help me with this. Thanks

---

<div class="post-metadata">

**Author:** ![abhishek.sagu](https://avatars.discourse-cdn.com/v4/letter/a/b9bd4f/32.png) [@abhishek.sagu](https://builder.metamask.io/u/abhishek.sagu)\
**Post date:** [August 30, 2024, 11:31am UTC](https://builder.metamask.io/t/archive-facing-issue-changing-create-react-app-to-vite-app/1251/2 "2024-08-30T11:31:24Z")

</div>

I tried this and i am still facing the same issue @w3abot

---

<div class="post-metadata">

**Author:** ![shahbaz](https://yyz1.discourse-cdn.com/flex011/user_avatar/builder.metamask.io/shahbaz/32/1527_2.png) [@shahbaz](https://builder.metamask.io/u/shahbaz)\
**Post date:** [September 2, 2024, 6:18am UTC](https://builder.metamask.io/t/archive-facing-issue-changing-create-react-app-to-vite-app/1251/3 "2024-09-02T06:18:21Z")

</div>

Hey @abhishek.sagu

> [@abhishek.sagu](#):
>
> inject({  
> Buffer: [“buffer”, “Buffer”],  
> include: “\*\*/\*.js”, // Ensure Buffer is only injected in .js files  
> }),  
> ],  
> resolve: {  
> alias: {  
> buffer: “buffer”,  
> },  
> },

Please put the buffer and process in the index.html and remove it from here.

The `index.html` will look like this:

```html
<!-- 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>

```

---

<div class="post-metadata">

**Author:** ![abhishek.sagu](https://avatars.discourse-cdn.com/v4/letter/a/b9bd4f/32.png) [@abhishek.sagu](https://builder.metamask.io/u/abhishek.sagu)\
**Post date:** [September 2, 2024, 6:24am UTC](https://builder.metamask.io/t/archive-facing-issue-changing-create-react-app-to-vite-app/1251/4 "2024-09-02T06:24:21Z")

</div>

Thanks @shahbaz for the reply. I did fix this issue. Now i am facing an issue where i migrated my app from create-react-app to create-vite-app and i had a google login verifier and i had whitelisted [http://localhost:3000/serviceworker/redirect](http://localhost:3000/serviceworker/redirect) so that it is redirected here when the user logs in with google. Now in the vite app , i am getting this error

[![image](https://canada1.discourse-cdn.com/flex011/uploads/metamaskbuilderhub/original/1X/85cf5a0c6d0b4670d9c2c37bb0d66c24b4884b2b.png)
image1524×954 22.6 KB
](https://web3auth.io/community/uploads/default/original/2X/6/6426e160646ecdf2b14a0859aab9c0d4b7f33496.png "image")

How do i fix this issue ?

---

<div class="post-metadata">

**Author:** ![shahbaz](https://yyz1.discourse-cdn.com/flex011/user_avatar/builder.metamask.io/shahbaz/32/1527_2.png) [@shahbaz](https://builder.metamask.io/u/shahbaz)\
**Post date:** [September 2, 2024, 6:27am UTC](https://builder.metamask.io/t/archive-facing-issue-changing-create-react-app-to-vite-app/1251/5 "2024-09-02T06:27:17Z")

</div>

Hey @abhishek.sagu,

Could you please click on the `error_details` and provide the `redirectURI`? Also, make sure to whitelist the redirectURI on the Google Cloud console dashboard of your project.

[![image](https://canada1.discourse-cdn.com/flex011/uploads/metamaskbuilderhub/original/1X/599a714e615693bebd015aee855bdaef74027da6.jpeg)
image3680×2382 532 KB
](https://web3auth.io/community/uploads/default/original/2X/4/469f29c238397cb9bf9b07f57f9090dc3881efde.jpeg "image")

---

<div class="post-metadata">

**Author:** ![abhishek.sagu](https://avatars.discourse-cdn.com/v4/letter/a/b9bd4f/32.png) [@abhishek.sagu](https://builder.metamask.io/u/abhishek.sagu)\
**Post date:** [September 2, 2024, 6:37am UTC](https://builder.metamask.io/t/archive-facing-issue-changing-create-react-app-to-vite-app/1251/6 "2024-09-02T06:37:09Z")

</div>

The error details show [http://localhost:5173/serviceworker/redirect](http://localhost:5173/serviceworker/redirect) flowName=GeneralOAuthFlow to be the redirect uri. I have added it. Will update if it works in a bit.

---

<div class="post-metadata">

**Author:** ![shahbaz](https://yyz1.discourse-cdn.com/flex011/user_avatar/builder.metamask.io/shahbaz/32/1527_2.png) [@shahbaz](https://builder.metamask.io/u/shahbaz)\
**Post date:** [September 2, 2024, 7:42am UTC](https://builder.metamask.io/t/archive-facing-issue-changing-create-react-app-to-vite-app/1251/7 "2024-09-02T07:42:05Z")

</div>

Sure. Keep us posted.