Leaflet js and getting geojson file not working as expected.

If I put the geojson file inline, it works fine. Here is a sample;

Code:

var geojson = {
  "type": "FeatureCollection",
  "generator": "overpass-ide",
  "copyright": "The data included in this document is from www.openstreetmap.org. The data is made available under ODbL.",
  "timestamp": "2022-05-22T05:35:25Z",
  "features": [
    {
      "type": "Feature",
      "properties": {
        "@id": "node/864725311",
        "amenity": "drinking_water"
      },
      "geometry": {
        "type": "Point",
        "coordinates": [
          139.0494091,
          36.3004
        ]
      },
      "id": "node/864725311"
    },
    {
      "type": "Feature",
      "properties": {
        "@id": "node/1845028377",
        "amenity": "drinking_water"
      },
      "geometry": {
        "type": "Point",
        "coordinates": [
          137.747078,
          36.392932
        ]
      },
***SNIP***

L.geoJSON(geojson).addTo(map_skiexplorer);

Above produced several makers on my map.

However, if I try to read in a geojson file from /public/user_public/ski/data/drinkingwater.geojson as follows;

Code:

var japanGeoJSON = false;
fetch('/user_public/ski/data/drinkingwater.geojson', {
    method : 'GET'
})
.then(json => {
    console.log(json)
    var geojson = L.geoJSON(json,{
        style: function (featur) {
            return {
                fillOpacity:0
            };
        }
    }).addTo(map_skiexplorer)
})
.catch(error => console.log(error.message));

Above produces:

Response {type: 'basic', url: 'https://development.example.com/user_public/ski/data/drinkingwater.geojson', redirected: false, status: 200, ok: true, …}

"Invalid GeoJSON object."

Wondering why this may be the case.