got an error when I tried get the data with miragejs

[gritty flame]

I'm in useing miragejs on Learn react router course. when I trid to fetch tha data
here javascript useEffect(() => { fetch("/api/vans") .then((res) => res.json()) .then((data) => setVans(data.vans)); }, []); I got this Error ```
Error fetching data: SyntaxError: Unexpected token '<', "<!DOCTYPE "... is not valid JSON

. I tried to search on google and Stackoverflow. and tried with chatGpt but I'm still struggling

[native locust]

could you share a scrim or github repo with us?

[stoic ether]

have you pasted your whole code into chatGPT along with your error message? I don't think the error is coming from the snippet you've pasted

[gritty flame]

yes

[gritty flame]

https://github.com/MuhmmadAwd/Van-Life

[slender estuary]

you link is not working, the repo might be a private one

The problem might be that you might haven't imported the mirage.js file into the app.js or the file where you are trying to fetch the api from, or it could be a problem with the mirage.js configuration

[native locust]

Indeed, the repo is private. Would you be able to make it public?

[gritty flame]

sorry for that, it's public now

I made it with github desktop, so i think that's why was it private

[gritty flame]

it's public now, sorry for that

[slender estuary]

I have fixed and created a pull request. Accept the changes. The problem was that you weren't importing the server.js file into the vans.jsx.

Resolved!

[gritty flame]

thanks 🙏🙏🙏

[native locust]

That is not the right solution I am afraid.... You only couple the server to that particular file which is wrong. You need to find the application's entry point and import the server there so the whole application an reach it.

[slender estuary]

I believe the mirage works in this way. I have a complete Vans life app with different logic and styling. I have already imported the server file into one of the files and the rest are working fine without any issue. My understanding of working is that when the server file is either imported in one of the existing file the server is up for all of them. Although I have tried importing the server file into the app and then tried but it didn’t worked for me.

[native locust]

You can in fact import mirage utilities and create your custom server in the components but that is very cumbersome, this is what's in their documentation and their examples are very poorly made unfortunately...

In your case you have already defined your server, so why would you import the entire file multiple times into different part of your application?
You also don't do modular import hence tree shaking will not happen which will bloat up your application.

Mirage.js will monitor and intercept your HTTP requests and perform the defined actions if you hit a valid path predefined by you. If you have 1 page where you have indeed imported the server then you navigate to another page where you did not I do not believe you should have the mirage code running anymore hence no more mock api for you

You only need to import the server at your root/entry point if that did not work for you then there is a problem somewhere else, perhaps you did not remove the other server imports from your other files and you have some clashes in your app because of that.

[slender estuary]

Will check it on the main entry point

[native locust]

It should be this easy

[gritty flame]

@slender estuary @slender estuary ohh 😲