# Baffled! useApi hook causing browser error but working fine elsewhere

**URL:** <https://forum.codewithmosh.com/t/baffled-useapi-hook-causing-browser-error-but-working-fine-elsewhere/218>\
**Category:** React Native\
**Created:** [October 25, 2020, 8:29pm UTC](https://forum.codewithmosh.com/t/baffled-useapi-hook-causing-browser-error-but-working-fine-elsewhere/218 "2020-10-25T20:29:33Z")\
**Posts on this page:** 5\
**Page:** 1

<div class="post-metadata">

**Author:** ![JGWCOUK](https://sea2.discourse-cdn.com/flex020/user_avatar/forum.codewithmosh.com/jgwcouk/32/57_2.png) [@JGWCOUK](https://forum.codewithmosh.com/u/JGWCOUK)\
**Post date:** [October 25, 2020, 8:29pm UTC](https://forum.codewithmosh.com/t/baffled-useapi-hook-causing-browser-error-but-working-fine-elsewhere/218/1 "2020-10-25T20:29:33Z")

</div>

I’ve been working through The Ultimate React Native Series: Advanced Concepts.

Having added the useApi hook suddenly I am getting “ReferenceError: useApi is not defined” but _only_ in the web browser. There is no problem in the Android emulator or via Expo app on Android or iOS. Totally baffled by it - can anyone help?

The useApi.js is as follows

```
import { useState } from 'react';

export default useApi = (apiFunc) => {
    const [data, setData] = useState([]);
    const [error, setError] = useState(false);
    const [loading, setLoading] = useState(false);
    const request = async (...args) => {
        setLoading(true);
        const response = await apiFunc(...args);
        setLoading(false);
        setError(!response.ok);
        setData(response.data);
        return response;
    };

return { data, error, loading, request };

};

```

and the error is:

ReferenceError: useApi is not defined

with line 3 pointed out.

---

<div class="post-metadata">

**Author:** ![dpickut](https://avatars.discourse-cdn.com/v4/letter/d/a87d85/32.png) [@dpickut](https://forum.codewithmosh.com/u/dpickut)\
**Post date:** [January 10, 2021, 3:43pm UTC](https://forum.codewithmosh.com/t/baffled-useapi-hook-causing-browser-error-but-working-fine-elsewhere/218/2 "2021-01-10T15:43:48Z")

</div>

Interesting observation. I don’t have an answer but I haven’t been able to get the course app to run in the browser at any time. I get errors related to issues with some of the node modules, such as this one: ```Module not found: Can’t resolve ‘…/Utilities/Platform’  
‘/Users/\_\_\_\_\_/DoneWithIt/node\_modules/react-native/Libraries/StyleSheet’

```auto
So far, however, the apps seem to run fine in the simulators and on actual hardware.
```

---

<div class="post-metadata">

**Author:** ![owais](https://sea2.discourse-cdn.com/flex020/user_avatar/forum.codewithmosh.com/owais/32/2027_2.png) [@owais](https://forum.codewithmosh.com/u/owais)\
**Post date:** [August 8, 2021, 3:01pm UTC](https://forum.codewithmosh.com/t/baffled-useapi-hook-causing-browser-error-but-working-fine-elsewhere/218/3 "2021-08-08T15:01:09Z")

</div>

Same issue its working fine in real device and emulator but not in web

---

<div class="post-metadata">

**Author:** ![eelsholz](https://avatars.discourse-cdn.com/v4/letter/e/439d5e/32.png) [@eelsholz](https://forum.codewithmosh.com/u/eelsholz)\
**Post date:** [August 10, 2021, 1:25am UTC](https://forum.codewithmosh.com/t/baffled-useapi-hook-causing-browser-error-but-working-fine-elsewhere/218/4 "2021-08-10T01:25:28Z")

</div>

Try this instead:

```auto
const useApi = (apiFunc) => {
  // hook code
}

export default useApi;

```

Or this:

```auto
export default function useApi(apiFunc) {
  // hook code
}

```

---

<div class="post-metadata">

**Author:** ![owais](https://sea2.discourse-cdn.com/flex020/user_avatar/forum.codewithmosh.com/owais/32/2027_2.png) [@owais](https://forum.codewithmosh.com/u/owais)\
**Post date:** [August 10, 2021, 6:21pm UTC](https://forum.codewithmosh.com/t/baffled-useapi-hook-causing-browser-error-but-working-fine-elsewhere/218/5 "2021-08-10T18:21:49Z")

</div>

> [@eelsholz](#):
>
> `export default function useApi(apiFunc) {`

sadly no luck even i am wondering in Location hook he is using a same userLocation

export default function userLocation() {  
}