D3, Using variable as filepath, Throws up Unexpected Token < Error

I get this error, “Unexpected token < in JSON at position 0” when I set my filepath as a variable. I’ve set it as a variable because the filepath is dynamic. When I click on the error, It opens up the Index.html page and since that isn’t in JSON format, it throws up this error. The file path change works properly and the new data gets loaded in, It just that, it throws up this error in the console. If I don’t set the filepath as a variable and mention it as it is, It doesn’t throw up this error.

This throws the error

var file = "data/data.json"

d3.json(file).then(data => {
    data.forEach(d => {
        d.value1 = d.value1
        d.value2 = d.value2
    })
})

This doesn’t

d3.json("data/data.json").then(data => {
    data.forEach(d => {
        d.value1 = d.value1
        d.value2 = d.value2
    })
})

I even tried this, but the error still shows up

var file = "data/data.json"

fetch(file).then(res=>res.json()).then(data => {
    data.forEach(d => {
        d.value1 = d.value1
        d.value2 = d.value2
    })
})