Import в скрипте вызывает ошибку консоли. WordPress. Как решить?

Ссылка скопирована
WordPress
1 ответ

В моём файле script. js я через import использую другой скрипт находящейся в папке. По итогу получаю Uncaught SyntaxError: Cannot use import statement outside a module в консоль. Когда я открывал мою вёрстку через препроцессор была подобная ошибка, но я решил её добавив type=module в тегу script. Но сейчас я использую wordpress и wp_enqueue_script. Можно ли как-то добавить "module" к wp_enqueue_script? Или что вообще мне делать?

Дополнительно:

Тебе перевести SyntaxError?

Или что вообще мне делать?

Использовать плагины из оф каталога.

  • Refguser, вау. Это же решит мою проблему

    • Import в скрипте вызывает ошибку консоли. Wordpress. Как решить?

    Но сейчас я использую wordpress и wp_enqueue_script. Можно ли как-то добавить "module" к wp_enqueue_script?

    Попробуйте так:

    function my_scripts() {   wp_enqueue_script('unique_script_id', get_template_directory_uri() . '/path/script.js', [], null, true);   wp_script_add_data('unique_script_id', 'type', 'module'); }  add_action('wp_enqueue_scripts', 'my_scripts');

    function my_scripts() { wp_enqueue_script('unique_script_id', get_template_directory_uri() . '/path/script.js', [], null, true); wp_script_add_data('unique_script_id', 'type', 'module'); } add_action('wp_enqueue_scripts', 'my_scripts');

    • Не получилось
    • ass_stealer, что не получилось? Подробнее.
    Нужно решить такую задачу?

    Опишите проблему, и специалист поможет с настройкой, исправлением ошибки или доработкой сайта. Подберём понятный план работ без лишней переписки.

    Заказать помощь
    Лучший ответ
    1
    Редакция Security Ответ

    Ошибка Cannot use import statement outside a module означает, что браузер загрузил файл как обычный скрипт, а не как ES module. В WordPress это решается через wp_script_add_data() или через фильтр script_loader_tag, в зависимости от версии WordPress и задачи.

    Базовый вариант:

    add_action('wp_enqueue_scripts', function () {
    wp_enqueue_script(
        'theme-main-module',
        get_template_directory_uri() . '/assets/js/script.js',
        [],
        filemtime(get_template_directory() . '/assets/js/script.js'),
        true
    );
 
    wp_script_add_data('theme-main-module', 'type', 'module');
});

    add_action('wp_enqueue_scripts', function () { wp_enqueue_script( 'theme-main-module', get_template_directory_uri() . '/assets/js/script.js', [], filemtime(get_template_directory() . '/assets/js/script.js'), true ); wp_script_add_data('theme-main-module', 'type', 'module'); });

    Если в вашей версии WordPress атрибут не добавился, используйте фильтр:

    add_filter('script_loader_tag', function ($tag, $handle, $src) {
    if ($handle === 'theme-main-module') {
        return '<script type="module" src="' . esc_url($src) . '"></script>';
    }
 
    return $tag;
}, 10, 3);

    add_filter('script_loader_tag', function ($tag, $handle, $src) { if ($handle === 'theme-main-module') { return '<script type="module" src="' . esc_url($src) . '"></script>'; } return $tag; }, 10, 3);

    Важно: пути в import должны быть относительными и с расширением файла:

    import { initSlider } from './modules/slider.js';

    import { initSlider } from './modules/slider.js';

    Если Вы импортируете npm-пакеты, просто import something from 'package' в браузере не заработает без сборщика. Для таких случаев нужен Vite/Webpack/Rollup, который соберёт зависимости в итоговый файл.

    Итог: для собственных модулей добавляйте type="module" к скрипту через WordPress API. Для npm-зависимостей используйте сборщик. Не вставляйте script-тег вручную в header.php, если скрипт можно подключить через wp_enqueue_script().

    Ещё проверьте, что файл модуля не зависит от глобального порядка загрузки jQuery. ES modules выполняются в строгом режиме и имеют свою область видимости. Если внутри старого кода использовался глобальный $, импорт сам по себе это не починит. Либо явно пишите jQuery, либо переделывайте модульную структуру целиком, чтобы зависимости подключались предсказуемо.

    Для WordPress 6.3+ можно использовать стратегию загрузки, но она не заменяет type="module". Не смешивайте без необходимости defer, async и module: модульные скрипты и так откладывают выполнение. Если нужен fallback для старых браузеров, его подключают отдельным nomodule-скриптом, но для большинства современных WordPress-проектов это уже редко требуется.

    Другие ответы (0)

    Пока нет других ответов. Будьте первым, кто поможет автору.

    Ответить на вопрос

    комментарий

    Ваш адрес email не будет опубликован. Обязательные поля помечены *

    Вам также может быть интересно

    VPN Как правильно настроить vless для Android TV? 1 ответ Pyrogram Как правильно зарегистрировать юзер бота в Telegram? 1 ответ печатные-платы Как заставить запускаться программу M3.exe от компании Hanxing AOI в инспекционной машине на Windows 7 Pro? 1 ответ Safari Почему снова флагнули домен в safari? 1 ответ