Сервер ответил типом MIME, отличным от JavaScript, "приложение / узел".

Я пытаюсь настроить локализацию своего сайта с помощью i18next. Я использую следующий скрипт (в основном сейчас с фактического веб-сайта i18next), но импорт серверной части вызывает ошибку.

<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>

Ошибка:

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.

Я даже не знаю, правильно ли я импортирую материал. Я ценю любую помощь. Спасибо.

Источник

1 ответ

Ничего. Думаю, проблема в совместимости. Я пытался загрузить бэкэнд xhr, пошел дальше и попробовал получить. Кажется, помогает и совместим с большинством браузеров.

ОБНОВЛЕНИЕ: Хорошо, я успешно исправил все проблемы, но сам перевод не работает. Элементы, которые я хочу перевести, пусты, хотя консоль не сообщает об ошибках и JSON определяется правильно.

Вот полный код html-документа:

<!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>

Вот что сообщает консоль:

Живая перезагрузка включена. logger.js:18 i18next::backendConnector: загруженный индекс пространства имен для языка cs Объект logger.js: 18i18next::backendConnector: загруженный индекс пространства имен для языка en Объект logger.js:18 i18next: languageChanged cs logger.js:18 i18next: инициализированный объект

Я не знаю, что случилось. Я ценю любую помощь. Заранее спасибо.

Источник
Другие вопросы по тегам