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

Embedded Wallets (Web3Auth)
1

:classical_building: 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 . 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 . 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

2

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

3

Hey @abhishek.sagu

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

The index.html will look like this:

<!-- 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>
4

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 so that it is redirected here when the user logs in with google. Now in the vite app , i am getting this error

image
image1524×954 22.6 KB

How do i fix this issue ?

5

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
image3680×2382 532 KB

6

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

7

Sure. Keep us posted.