Failed to load JSON file in loadPath

Hi I am new to 18next module and trying to learn it. I have made very simple page to understand the working. My Directory structure is :

|--languages
   |--locales
      |--en.json
      |--de.json
|--main.html
|-myscript.js

Here are the following files:

main.html:

<script src="https://unpkg.com/i18next/i18next.js"></script>
<script src="https://unpkg.com/i18next-xhr-backend/i18nextXHRBackend.js"></script>
<script src="https://unpkg.com/i18next-browser-languagedetector/i18nextBrowserLanguageDetector.js"></script>
<script src="./myscript.js"></script>
<div style="height: 150px">
  <button onclick="i18next.changeLanguage('en')">
  english
  </button>
  <button onclick="i18next.changeLanguage('de')">
  german
  </button>
  <li id="text">HELLO</li>
</div>

myscript.js:

i18next
.use(i18nextXHRBackend)
.use(i18nextBrowserLanguageDetector)
.init({
  lng: 'en',
  debug: true,
  backend: {
    loadPath: './languages/locales/{{lng}}.json',
  }
}, function(err, t) {
  // init set content
  updateContent();
});


function updateContent() {
    console.log(document.getElementById('text').textContent);
    document.getElementById('text').textContent = i18next.t(document.getElementById('text').textContent);
}

function changeLng(lng) {
i18next.changeLanguage(lng);
}

i18next.on('languageChanged', () => {
updateContent();
});

en.json:

{
    "HELLO": "HELLO"
}

de.json:

{
  "HELLO":"HOLA"
}

But on the browser, the error is coming that it is failing to load resources and the text is also not changing. Can somebody tell where I am going wrong?

[Akki4141]

Surely, I will give it a try.

[jamuhl]

yes of course, just chrome does not support xhr to local filesystem -> open same file in eg. firefox evtl. safari should work already: https://stackoverflow.com/questions/38344612/ajax-request-to-local-file-system-not-working-in-chrome

but that’s really a limitation of using local filesystem