I'm doing a tutorial from scrimba for react and react router 6 and I'm encountering an error with the provided data. The error says 67:1 Uncaught (in promise) SyntaxError: Unexpected token '<', "<!DOCTYPE "... is not valid JSON P and is at line 9 which is .then(data => setVans(data.vans)). The whole code for Vans.jsx is:
import React from 'react'
import { Link } from 'react-router-dom'
export default function Vans() {
const [vans, setVans] = React.useState([])
React.useEffect(() => {
fetch("/api/vans")
.then(res => res.json())
.then(data => setVans(data.vans))
}, [])
const vanElements = vans.map(van => (
<div key={van.id} className="van-tile">
<Link to={`/vans/${van.id}`}>
<img src={van.imageUrl} />
<div className="van-info">
<h3>{van.name}</h3>
<p>${van.price}<span>/day</span></p>
</div>
<i className={`van-type ${van.type} selected`}>{van.type}</i>
</Link>
</div>
))
return (
<div className="van-list-container">
<h1>Explore our van options</h1>
<div className="van-list">
{vanElements}
</div>
</div>
)
}
The data from the api is coming from server.js which is:
import { createServer, Model } from "miragejs"
createServer({
models: {
vans: Model,
},
seeds(server) {
server.create("van", { id: "1", name: "Modest Explorer", price: 60, description: "The Modest Explorer is a van designed to get you out of the house and into nature. This beauty is equipped with solar panels, a composting toilet, a water tank and kitchenette. The idea is that you can pack up your home and escape for a weekend or even longer!", imageUrl: "https://assets.scrimba.com/advanced-react/react-router/modest-explorer.png", type: "simple" })
server.create("van", { id: "2", name: "Beach Bum", price: 80, description: "Beach Bum is a van inspired by surfers and travelers. It was created to be a portable home away from home, but with some cool features in it you won't find in an ordinary camper.", imageUrl: "https://assets.scrimba.com/advanced-react/react-router/beach-bum.png", type: "rugged" })
server.create("van", { id: "3", name: "Reliable Red", price: 100, description: "Reliable Red is a van that was made for travelling. The inside is comfortable and cozy, with plenty of space to stretch out in. There's a small kitchen, so you can cook if you need to. You'll feel like home as soon as you step out of it.", imageUrl: "https://assets.scrimba.com/advanced-react/react-router/reliable-red.png", type: "luxury" })
server.create("van", { id: "4", name: "Dreamfinder", price: 65, description: "Dreamfinder is the perfect van to travel in and experience. With a ceiling height of 2.1m, you can stand up in this van and there is great head room. The floor is a beautiful glass-reinforced plastic (GRP) which is easy to clean and very hard wearing. A large rear window and large side windows make it really light inside and keep it well ventilated.", imageUrl: "https://assets.scrimba.com/advanced-react/react-router/dreamfinder.png", type: "simple" })
server.create("van", { id: "5", name: "The Cruiser", price: 120, description: "The Cruiser is a van for those who love to travel in comfort and luxury. With its many windows, spacious interior and ample storage space, the Cruiser offers a beautiful view wherever you go.", imageUrl: "https://assets.scrimba.com/advanced-react/react-router/the-cruiser.png", type: "luxury" })
server.create("van", { id: "6", name: "Green Wonder", price: 70, description: "With this van, you can take your travel life to the next level. The Green Wonder is a sustainable vehicle that's perfect for people who are looking for a stylish, eco-friendly mode of transport that can go anywhere.", imageUrl: "https://assets.scrimba.com/advanced-react/react-router/green-wonder.png", type: "rugged" })
},
routes() {
this.namespace = "api"
this.get("/vans", (schema, request) => {
return schema.vans.all()
})
this.get("/vans/:id", (schema, request) => {
const id = request.params.id
return schema.vans.find(id)
})
}
})
I've copied and pasted the code from the tutorial but is still getting the error. Anyone know what I'm missing here?
