Тип text/javascript: почему опечатка ломает JavaScript
Проблема опечаток в атрибуте type
При подключении JavaScript через тег script исторически использовался атрибут type со значением text/javascript. Современные браузеры допускают опускание этого атрибута, однако его неверное написание (опечатка) приводит к тому, что скрипт игнорируется. Например:
<script type='text/javascrip'>console.log('Привет');</script>Js typing text (тип text/javascript (опечатка))
В консоли браузера появляется предупреждение о неверном MIME-типе, код не выполняется.
Эффективное решение - убрать атрибут type или указать корректное значение. Для классических скриптов достаточно:
<script>console.log('Корректная работа');</script>Скрипт выполняется без ошибок.
Цель: гарантировать выполнение JavaScript. Применяется в любых проектах при подключении скриптов.
Как найти опечатку в атрибуте type?
Откройте вкладку Console инструментов разработчика браузера. Ошибка будет выглядеть примерно как «The script from “…” was loaded even though its MIME type… not a valid JavaScript MIME type.» Также помогает валидатор HTML (W3C).
<script type='text/javascrip'>console.log(1);</script>Валидатор укажет на недопустимое значение атрибута type.
Как исправить опечатку в проекте?
Используйте поиск по всем файлам проекта (например, grep или поиск в IDE) по шаблону type=['"]text/javascrip. Замените на пустой атрибут или на type='text/javascript' (если нужна совместимость со старыми браузерами).
grep -r --include='*.html' "type=['\"]text/javascrip" .Найденные строки можно заменить с помощью sed или вручную.
Как проверить, выполняется ли скрипт при подозрении на опечатку?
Добавьте в начало файла или в inline-скрипт простой вызов console.log('Script works'). Если сообщения нет - скрипт не выполнился.
<script type='text/javascrip'>console.log('Script works');</script>В консоли отсутствует строка «Script works».
Что делать, если скрипт не выполняется из-за неверного MIME на сервере?
Для внешних скриптов сервер может возвращать неправильный заголовок Content-Type. Проверьте вкладку Network: если MIME не application/javascript или text/javascript, браузер может заблокировать выполнение. Решение - настроить сервер (например, .htaccess).
AddType application/javascript .jsТеперь сервер отдаёт .js файлы с правильным MIME-типом.
Расширенные примеры опечаток и их последствий
Пример 1: несколько опечаток в одном документе
<!DOCTYPE html>
<html>
<body>
<script type='text/javascrip'>console.log('опечатка1');</script>
<script type='application/javascrip'>console.log('опечатка2');</script>
<script type='text/javascript'>console.log('правильно');</script>
</body>
</html>В консоли появится только сообщение «правильно». Первые два скрипта игнорируются. В Chrome в Console будет предупреждение: «The script from “…” was loaded even though its MIME type…».
Пояснение: браузер обрабатывает только script с валидным MIME-типом (или при отсутствии type).
Пример 2: опечатка в type='module'
<script type='modue'>
import { helper } from './helper.js';
console.log(helper());
</script>Скрипт не выполняется, так как значение 'modue' не распознаётся как модуль. Консоль сообщает об ошибке синтаксиса или о том, что import может использоваться только внутри модуля.
Пояснение: атрибут type='module' активирует ES-модули. Опечатка отключает эту возможность, скрипт не получает контекст модуля.
Пример 3: динамическое создание скрипта с неверным type
let script = document.createElement('script');
script.type = 'text/javascrip';
script.src = 'app.js';
document.head.appendChild(script);
console.log('Скрипт добавлен, но не выполнен');Файл app.js загрузится (видно в Network), но код из него не выполнится. В консоли ошибка может не появиться, но содержимое app.js не применится.
Пояснение: при динамической вставке атрибут type проверяется так же, как и в статическом HTML.
Пример 4: проверка MIME-типа внешнего скрипта
<script src='https://cdn.example.com/lib.js' type='text/javascript'></script>Если сервер возвращает Content-Type: text/plain, браузер заблокирует выполнение. Вкладка Network покажет статус загрузки, но скрипт не выполнится.
Пояснение: даже при правильном атрибуте type ответ сервера может переопределить поведение. Рекомендуется проверять заголовки.
Пример 5: настройка .htaccess для правильного MIME
AddType application/javascript .jsПосле добавления этой директивы в корневой .htaccess Apache сервер будет отдавать .js файлы с MIME-типом application/javascript. Ранее мог быть text/plain или другой.
Пояснение: для статических файлов MIME-тип задаётся сервером. Если сервер не настроен, браузер может неправильно интерпретировать скрипт.
Пример 6: использование старых и новых значений type
<script type='text/ecmascript'>console.log('старый вариант');</script>Большинство современных браузеров не поддерживают text/ecmascript, скрипт будет проигнорирован.
Пояснение: исторически существовали разные MIME-типы (text/javascript, text/ecmascript, application/x-javascript). Сегодня рекомендуется не указывать type вовсе.