Error loading model: SyntaxError: Unexpected token '<', "<!DOCTYPE "... is not valid JSON

Question

I'm creating a yoga AI trainer using ml5 and p5 on React.

I created a component where it takes an individual pose as a prop from a local JSON file. The component also loads a model which I added in the public folder. The goal of this component is to detect a certain yoga pose and the component dynamically returns the pose name that is detected from the webcam.

I tested two webcam pages. let's call it page 1 and page 2. Page 1 works. the URL is /practice. page 1 leads to webcam 1. webcam 1 works.

page 2 the url is /practice/poseId. page 2 leads to a different webcam component, webcam 2 has the exact same code as webcam 1 except it takes in a prop and that prop is the specific pose that matches the id.

On page two, I get this error

Error loading model: SyntaxError: Unexpected token '<', "<!DOCTYPE "... is not valid JSON

It is pointing to this code

        const modelInfo = {
          model: "model/model.json",
          metadata: "model/model_meta.json",
          weights: "model/model.weights.bin",
        };

        fetch(modelInfo.model)
          .then((response) => {
            if (!response.ok) {
              throw new Error(`HTTP error! status: ${response.status}`);
            }
            return response.json();
          })
          .then((data) => {
            console.log("Model JSON:", data);
            brain.load(modelInfo, brainLoaded);
          })
          .catch((error) => {
            console.error("Error loading model:", error);
          });

I don't understand why my component works on the /practice URL, but when I add poseId (/practice/:poseID), it shows that error even though it's the same code.

The error is on the URL that ends in /practice/:poseId e.g. /practice/1.

Error example (you don't see the pose label at the bottom):

Example (it works if the page URL is /practice)

This is my repo: https://github.com/laura-nguyen/yoga-ai/tree/feature/page-pose-cam

Answer 1

The problem is that you're using the same relative path from two pages in different directories. On localhost:5174/practice, model/model.json means localhost:5174/model/model.json, but on localhost:5174/practice/1, it means localhost:5174/practice/model/model.json.