I'm attempting fetch a local json file from a javascript module... My current file structure below.

I am currently working out of Map.main.js file and it currently looks like

class Map {
  constructor(el) {
    this.$el = el
    this.initMap()
  }

  initMap() {
    fetch('./map/data.json')
      .then((response) => response.json())
      .then((data) => console.log(data))
  }
}

export default Map

I am getting the following errors in the console

http://localhost:3000/map/data.json 404 (Not Found) VM2541:1 Uncaught (in promise) SyntaxError: Unexpected token < in JSON at position 0

HTML is currently being compiled to the below (using twig)

I am not sure if makes a difference that I'm currently using babel/webpack to build my JS any help is appreciated thank you