#solved! Uncaught TypeError: Cannot read properties of undefined (reading 'replace')

can someone help me to sort out the authentication problem in appwrite? when ever I try to call the account.createOAuth2Session/(or any other methods) an error that says Uncaught TypeError: Cannot read properties of undefined (reading 'replace') and the full error is

Uncaught TypeError: Cannot read properties of undefined (reading 'replace')
    at Client.setEndpoint (appwrite.js?v=026b3d50:707:89)
    at appwrite.js:5:6

here is my code appwrite.js

import { Account, Client } from "appwrite";

const client = new Client()
    .setEndpoint(import.meta.env.APPWRITE_ENDPOINT)
    .setProject(import.meta.env.APPWRITE_PROJECT_ID)

export const account = new Account(client);

export default client;
export { ID } from 'appwrite';

and the app.jsx is

import './App.css';
import { account } from './lib/appwrite';

function App() {
  const google = async () => {
    account.createOAuth2Session('google', 'http://localhost:5173/auth/google/success', 'http://localhost:5173/auth/google/failure');
  }

  return (
    <>
      <div>

      </div>
      <h1>Vite + React</h1>
      <div className="card">
        <button onClick={google}>Google</button>
      </div>
    </>
  )
}

export default App

What’s your code?

Double check the endpoint you're passing is correct

I've updated the post with code.

import { Account, Client } from "appwrite";

const client = new Client()
    .setEndpoint(import.meta.env.APPWRITE_ENDPOINT)
    .setProject(import.meta.env.APPWRITE_PROJECT_ID)

export const account = new Account(client);

export default client;
export { ID } from 'appwrite';

Thanks, I replaced .setEndpoint(import.meta.env.APPWRITE_ENDPOINT) with .setEndpoint('endpoint_uri') and it works fine. but why the first item doesn't work? can you plz explain?

How were you setting APPWRITE_ENDPOINT?

like this APPWRITE_ENDPOINT=https://cloud.appwrite.io/v1 inside of .env in root directory

And how are you serving the site?

in http://localhost:5173/

That's where you're accessing it, but how are you serving that?

are you talking about ``` "scripts": { "dev": "vite", "build": "vite build", "lint": "eslint . --ext js,jsx --report-unused-disable-directives --max-warnings 0", "preview": "vite preview" },

this?
I'm using vite to prepare the project and to run it locally I use `pnpm run dev`

So Vite would be the answer to the question I was asking

IIRC, Vite only makes available envvars which start with VITE_

So if you rename the var VITE_APPWRITE_ENDPOINT, it should work

Thanks you so much for your explanation. I got it. And the problem is now fixed!

If your issue has been solved, you can mark this post as closed by adding “[SOLVED]” to the beginning of the title

ok!

#solved! Uncaught TypeError: Cannot read properties of undefined (reading 'replace')

@Sayem Khan Close - [SOLVED]