# Uncaught TypeError: Cannot read property 'from' of undefined

**URL:** <https://discuss.dgraph.io/t/uncaught-typeerror-cannot-read-property-from-of-undefined/15100>\
**Category:** Dgraph Clients\
**Tags:** kind:question\
**Created:** [July 27, 2021, 9:05am UTC](https://discuss.dgraph.io/t/uncaught-typeerror-cannot-read-property-from-of-undefined/15100 "2021-07-27T09:05:07Z")\
**Posts on this page:** 6\
**Page:** 1

<div class="post-metadata">

**Author:** ![samadadi](https://avatars.discourse-cdn.com/v4/letter/s/e99b99/32.png) [@samadadi](https://discuss.dgraph.io/u/samadadi)\
**Post date:** [July 27, 2021, 9:05am UTC](https://discuss.dgraph.io/t/uncaught-typeerror-cannot-read-property-from-of-undefined/15100/1 "2021-07-27T09:05:07Z")

</div>

I am creating client side app using vitejs bundler and this is the error I am getting:  
dgraph-js-http: ^21.3.1

Note: I tried this [react to-do app](https://dgraph.io/blog/post/building-todo-list-react-dgraph/) example using vitejs.

 ![Screenshot from 2021-07-27 05-38-06](https://canada1.discourse-cdn.com/flex007/uploads/dgraph/original/2X/1/1278c030188f710c6cb584b8c2cbd8f996e63333.png)

 ![Screenshot from 2021-07-27 05-37-58](https://canada1.discourse-cdn.com/flex007/uploads/dgraph/original/2X/2/2a5a44c377471eac1f5e312cf58f3295f2967b26.png)

I suppose in this case vitejs can’t resolve commonjs modules correctly. So there is unknown Buffer in this case.

---

<div class="post-metadata">

**Author:** ![samadadi](https://avatars.discourse-cdn.com/v4/letter/s/e99b99/32.png) [@samadadi](https://discuss.dgraph.io/u/samadadi)\
**Post date:** [July 27, 2021, 4:17pm UTC](https://discuss.dgraph.io/t/uncaught-typeerror-cannot-read-property-from-of-undefined/15100/2 "2021-07-27T16:17:27Z")

</div>

> <https://github.com/feross/safe-buffer/issues/30>
>
> Hey, i'm trying to use ViteJs for project. 
> 
> Since this is es6 only, the code …errors out inside safe-buffer package \`Buffer\` is undefined here 
> 
> \<img width="883" alt="Screenshot 2021-04-19 at 11 31 26" src="https://user-images.githubusercontent.com/55835379/115214427-c9a56b80-a102-11eb-9ee3-155f2a133e67.png"\>
> 
> If we included this simple check, this wouldn't error out in ViteJs environment.
> \<img width="351" alt="Screenshot 2021-04-19 at 11 32 12" src="https://user-images.githubusercontent.com/55835379/115214526-e477e000-a102-11eb-9c37-52c2a0d297fd.png"\>
> 
> Is there any reason not to include check like this? If you would be interested, i could submit PR

This is the problem, although does no work in browser space.

---

<div class="post-metadata">

**Author:** ![Alan\_Fermin](https://yyz1.discourse-cdn.com/flex007/user_avatar/discuss.dgraph.io/alan_fermin/32/6025_2.png) [@Alan\_Fermin](https://discuss.dgraph.io/u/Alan_Fermin)\
**Post date:** [May 23, 2023, 5:39pm UTC](https://discuss.dgraph.io/t/uncaught-typeerror-cannot-read-property-from-of-undefined/15100/3 "2023-05-23T17:39:32Z")

</div>

Could you solve this? I have the same problem right now. I am using vite and yarn

---

<div class="post-metadata">

**Author:** ![MichelDiz](https://yyz1.discourse-cdn.com/flex007/user_avatar/discuss.dgraph.io/micheldiz/32/11873_2.png) [@MichelDiz](https://discuss.dgraph.io/u/MichelDiz)\
**Post date:** [May 23, 2023, 5:51pm UTC](https://discuss.dgraph.io/t/uncaught-typeerror-cannot-read-property-from-of-undefined/15100/4 "2023-05-23T17:51:16Z")

</div>

Vite and those npm packages are problematic. They can work, but there are several workarounds to deal with. It is better to use axios instead, unless you really need gRPC

e.g.

```auto
  async executeRequest(endpoint: string, data: any, options: any) {
    const { clusterUrl, slashApiKey, authToken, aclToken } = use.getState();
    try {
      const config = {
        headers: {
          "X-Auth-Token": slashApiKey,
          "X-Dgraph-AuthToken": authToken,
          "Content-Type": "application/dql",
          "X-Dgraph-AccessToken": this.aclToken,
        },
        params: options,
      };
     // endpoint can be query, mutation
      const response = await axios.post(this.currentUrl + "/" + endpoint, data, config);

      return response.data;
    } catch (error) {
      console.error(`Error executing ${endpoint} on Dgraph:`, error);
    }
  }

```

---

<div class="post-metadata">

**Author:** ![MichelDiz](https://yyz1.discourse-cdn.com/flex007/user_avatar/discuss.dgraph.io/micheldiz/32/11873_2.png) [@MichelDiz](https://discuss.dgraph.io/u/MichelDiz)\
**Post date:** [May 24, 2023, 7:19pm UTC](https://discuss.dgraph.io/t/uncaught-typeerror-cannot-read-property-from-of-undefined/15100/5 "2023-05-24T19:19:24Z")

</div>

# IMPORTANT

An update on this. All Dgraph clients are designed to run on the server. That means Dgraph.JS should be running on Node.js and not in a front-end application. Why is that? It’s simple because it is not safe to provide direct access to the database through the front-end. In theory, you should only do this in very specific cases that don’t involve end users, as it poses a serious security risk.

You should create an API or use GraphQL to handle the front-end. For those who are not using GraphQL, it is highly recommended to create your own API that sits between the backend and frontend. Avoid exposing Dgraph to the front-end at all costs.

Cheers.

---

<div class="post-metadata">

**Author:** ![amaster507](https://yyz1.discourse-cdn.com/flex007/user_avatar/discuss.dgraph.io/amaster507/32/4123_2.png) [@amaster507](https://discuss.dgraph.io/u/amaster507)\
**Post date:** [May 24, 2023, 11:03pm UTC](https://discuss.dgraph.io/t/uncaught-typeerror-cannot-read-property-from-of-undefined/15100/6 "2023-05-24T23:03:29Z")

</div>

You could use Next.JS and use dgraph client on just the`api` and SSR pages/ components/ functions only.