The server responded with a non-JavaScript MIME type of "application/node"

Question

I'm trying to set up a localization on my website using i18next. I'm using following script (mostly is now from the actual i18next website), but importing of the backend throws in an error.

<script type="module">
import i18next from 'https://unpkg.com/i18next/dist/umd/i18next.min.js'
import Backend from 'https://cdn.jsdelivr.net/gh/i18next/i18next-http-backend/index.js';
import Middleware from 'http://cdn.jsdelivr.net/gh/i18next/i18next-http-middleware/index.js';
i18next
  .use(Backend)
  .init({
    backend: {
      // for all available options read the backend's repository readme file
      loadPath: '/locales/{{lng}}/{{ns}}.json'
    },
    lng: 'en',
    debug: true,
    }, function(err, t) {
    // init set content
    updateContent();
});

function updateContent() {
  document.getElementById('output').innerHTML = i18next.t('key');
}

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

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

The error:

getFetch.cjs:1 Failed to load module script: The server responded with a non-JavaScript MIME type of "application/node". Strict MIME type checking is enforced for module scripts per HTML spec.

I don't even know if I'm importing the stuff correctly. I appreciate any help. Thank you.

RobTheRealLifeAnimoo · Answer 1 · 2020-08-15T16:04:24.860

Nevermind. I think it was an issue with compatibility. I was trying to load an xhr backend, went ahead and tried the fetch one. Seems to do the trick and seems to be compatible with most browsers.

UPDATE: Okay, I successfully fixed all the issues, but the translation itself does not work. The elements I want to translate are blank, even though the console is not reporting any errors and the JSON is correctly detected.

Here is complete code of the html document:

<!DOCTYPE html>
<html>
    <head>
        <meta charset='utf-8' lang='en-US'>
        <meta http-equiv='X-UA-Compatible' content='IE=edge'>
        <title data-i18n="title">Zapněte Javascript</title>
        <meta name='viewport' content='width=device-width, initial-scale=1'>
        <link rel='stylesheet' type='text/css' media='screen' href='main.sass'>
        <!--<script src='main.js'></script>-->
    </head>
    <body>
        <nav>
            <ul>
                <li data-i18n="homepage"></li>
                <li data-i18n="about"></li>
                <li data-i18n="services"></li>
                <li data-i18n="projects"></li>
            </ul>
        </nav>
        <div>

        </div>
    </body>
</html>

<script type="module">
import i18next from 'https://cdn.jsdelivr.net/gh/i18next/i18next/src/index.js'
import locI18next from 'https://cdn.jsdelivr.net/gh/mthh/loc-i18next/src/main.js'
import Fetch from 'https://cdn.jsdelivr.net/gh/dotcore64/i18next-fetch-backend/src/index.js'
import Middleware from 'https://cdn.jsdelivr.net/gh/i18next/i18next-http-middleware/index.js'
import BackendAdapter from 'https://cdn.jsdelivr.net/gh/i18next/i18next-multiload-backend-adapter/src/index.js'


i18next.use(BackendAdapter).init({
    lng: 'cs',
    fallbackLng: 'en',
    ns: ['index'],
    debug: true,
    backend: {
      backend: Fetch,
      backendOption:{
        loadPath: 'translation.json?lng={{lng}}&ns={{ns}}',
        allowMultiLoading:  true,
        multiSeparator: '+',
      }
    }
});
const localize = async() => locI18next.init(i18next);
localize('[data-i18n]');
</script>

This is what the console reports:

Live reload enabled. logger.js:18 i18next::backendConnector: loaded namespace index for language cs Object logger.js:18 i18next::backendConnector: loaded namespace index for language en Object logger.js:18 i18next: languageChanged cs logger.js:18 i18next: initialized Object

I don't know what's wrong. I appreciate any help. Thanks in advance.

The server responded with a non-JavaScript MIME type of "application/node"

1 Answers1