title: Fetch() a local json file from public folder return an HTML file
body: <p>My folder is as follows :</p>
  
  <ul>
  <li>public > myJson.json</li>
  <li>src > App.js and MyComponent.js</li>
  </ul>
  
  <p>App.js</p>
  
  <pre><code>import React from "react";
  import MyComponent from "./mycomponent";
  
  const App: React.FC = () =&gt; {
  
    fetch("public/myJson.json")
        .then(res =&gt; res.json())
        .then(data =&gt; console.log(data));
  
    return &lt;MyComponent&gt;;
  };
  
  export default App;
  </code></pre>
  
  <p>MyJson.json</p>
  
  <pre><code>[
    {
      "a": "a",
      "b": "b"
    },
    {
      "a": "aa",
      "b": "bb"
    }
  ]
  </code></pre>
  
  <p>console error (with .json()):</p>
  
  <pre><code>localhost/:1 Uncaught (in promise) SyntaxError: Unexpected token &lt; in JSON at position 0
  </code></pre>
  
  <p>WHAT I HAVE TRIED SO FAR :</p>
  
  <ul>
  <li>fetch with headers</li>
  </ul>
  
  <pre><code>headers: {
          Accept: 'application/json',
          'Content-Type': 'application/json',
        },
  </code></pre>
  
  <ul>
  <li>fetch("../public/myJson.json")</li>
  <li>const response = await fetch()</li>
  </ul>