Модули/импорт ES6 в гибридном приложении Apache Cordova выдают ошибку типа MIME

Я пытаюсь использовать модули ES6 в гибридном мобильном приложении, созданном с использованием Apache Cordova. К сожалению, Cordova, похоже, обслуживает модуль без типа MIME, который выдает ошибку в WebView (как в бета-версии Chrome 63, так и в 64).

В частности, развернутое приложение (с помощью удаленного отладчика Chrome) создает следующая ошибка:

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

Я использую стандартный импорт ES6, который теперь поддерживается в целевой версии Chrome.

<!--index.html-->
<script type="module">
    import App from "./app.js"
    import config from "./config.js"
    window.app = new App(config)
</script>

Все работает правильно, когда ресурсы предварительной сборки обслуживаются через веб-сервер, а не развертываются через Cordova. Транспиляция через Babel может быть вариантом, но это кажется огромной головной болью, и я бы предпочел не идти по этому пути, пока не узнаю, что нет лучшего варианта.

Любой совет?


person Michael.Lumley    schedule 05.01.2018    source источник
comment
Возможно, это связано с npmjs.com/package/cordova-import-npm.   -  person João Pimentel Ferreira    schedule 13.04.2021


Ответы (4)


Файлы, извлекаемые из файловой системы, не имеют MIME-типа, но из-за усиленной безопасности модули ES6 должны обслуживаться только с MIME-типом «application/javascript».

В качестве обходного пути вы можете включить (как и я) веб-сервер в свое приложение. См., например, https://github.com/floatinghotpot/cordova-httpd.

person Vadim    schedule 29.01.2018
comment
Хотя эта ссылка может ответить на вопрос, лучше включить сюда основные части ответа и предоставить ссылку для справки. Ответы, содержащие только ссылку, могут стать недействительными, если связанная страница изменится. – Из обзора - person bmb; 30.01.2018
comment
Собственно, ответ как раз в 1-м предложении. Если ссылка пропала, второе предложение не имеет значения — кому-то нужно будет найти альтернативное программное обеспечение. - person Vadim; 30.01.2018

Я решил эту проблему, используя webpack для компиляции всего моего кода и ресурсов в один файл. Это позволило использовать синтаксис импорта без всех связанных с ним проблем в Apache Cordova. Это не так хорошо, как нативная поддержка, но это было лучшим решением для меня.

person Michael.Lumley    schedule 09.03.2018

Использование ES6 может не понадобиться для приложения Apache Cordova. Поскольку приложение будет загружать скрипт, используя file_url, где оно не понимает 'type=module'. В веб-приложении, где скрипты загружаются с сервера, 'type=module' не будет проблемой.

Скрипт, сгенерированный ES6, будет меньше по размеру по сравнению с ES5, поэтому имеет смысл загрузить с сервера файл меньшего размера. Но в приложении Cordova доступ к файлу осуществляется изнутри, поэтому использование ES5 не будет иметь большого значения.

person littleboy    schedule 10.02.2021

Я решил эту проблему, просто удалив все вхождения type="module" в проекте Cordova.

person Ivan Mihaylov    schedule 16.07.2019
comment
Только код javascript модуля типа поддерживает собственное ключевое слово «импорт». Таким образом, удаление type=module также удалит поддержку 'import'. - person anneb; 12.09.2019