functions - How can I load a javascript file that is type="module" the Wordpress way?

admin管理员组

文章数量:1122832

Typically, when I am going to load javascript files I load them from my functions.php file using this code:

wp_deregister_script('site-js'); 
wp_register_script('site-js', get_stylesheet_directory_uri().'/js/site.js', array('jquery'), '0.0.3', true); 
wp_enqueue_script('site-js');

The other day I had downloaded axios and tried to load it into my wordpress theme. In another javascript file, I was trying import axios like this:

import axio from 'axios'

I kept getting this error message: Uncaught SyntaxError: Cannot use import statement outside a module

I did some googling and put together this snippet of code in my functions file:

add_filter('script_loader_tag','add_type_to_script', 10, 3);
function add_type_to_script($tag, $handle, $source){
    if ('ajaxloadmore' === $handle) {
        $tag = '<script type="text/javascript" src="'. $source .'" type="module"></script>';
    } 
    return $tag;
}

From what I saw this did add the type="module" to my script tag. I could see it when I view page source. One thing I did notice though, was that I didnt see type="module" on the script tag when I inspected element. This also didn't seem to fix the error the message.

My buddy suggested I try this instead of import axios from 'axios';

const axios = window.axios;

For now what I ended up doing was in my page.php I added the script tags there just above the get_footer() function. It looks like this now:

<?php
$axsrc = get_stylesheet_directory_uri().'/js/axios/axios.min.js';
$src = get_stylesheet_directory_uri().'/js/ajaxloadmore.js';
?>
<script src="<?php echo esc_url($axsrc); ?>"></script>
<script type="module" src="<?php echo esc_url($src); ?>"></script>

I do not like this solution because I like to register and load my scripts from my functions file to be able to manage them from one place.

Does anyone have any suggestions for me that will get this to work? I need to add type="module" to the script tag and I want to register these scripts in my functions.php. How can I do that?

Typically, when I am going to load javascript files I load them from my functions.php file using this code:

wp_deregister_script('site-js'); 
wp_register_script('site-js', get_stylesheet_directory_uri().'/js/site.js', array('jquery'), '0.0.3', true); 
wp_enqueue_script('site-js');

The other day I had downloaded axios and tried to load it into my wordpress theme. In another javascript file, I was trying import axios like this:

import axio from 'axios'

I kept getting this error message: Uncaught SyntaxError: Cannot use import statement outside a module

I did some googling and put together this snippet of code in my functions file:

add_filter('script_loader_tag','add_type_to_script', 10, 3);
function add_type_to_script($tag, $handle, $source){
    if ('ajaxloadmore' === $handle) {
        $tag = '<script type="text/javascript" src="'. $source .'" type="module"></script>';
    } 
    return $tag;
}

From what I saw this did add the type="module" to my script tag. I could see it when I view page source. One thing I did notice though, was that I didnt see type="module" on the script tag when I inspected element. This also didn't seem to fix the error the message.

My buddy suggested I try this instead of import axios from 'axios';

const axios = window.axios;

For now what I ended up doing was in my page.php I added the script tags there just above the get_footer() function. It looks like this now:

<?php
$axsrc = get_stylesheet_directory_uri().'/js/axios/axios.min.js';
$src = get_stylesheet_directory_uri().'/js/ajaxloadmore.js';
?>
<script src="<?php echo esc_url($axsrc); ?>"></script>
<script type="module" src="<?php echo esc_url($src); ?>"></script>

I do not like this solution because I like to register and load my scripts from my functions file to be able to manage them from one place.

Does anyone have any suggestions for me that will get this to work? I need to add type="module" to the script tag and I want to register these scripts in my functions.php. How can I do that?

• functions
• wp-register-script

Share Improve this question asked May 8, 2020 at 2:33 RobbiegodRobbiegod 55322 gold badges1010 silver badges3131 bronze badges 5

• 1 In the add_type_to_script function you add to the script tag two type attributes but the script tag can only have one type attribute. If you add two type attributes the browser/ the browser developer tools used/showed only the first one. – user141080 Commented May 10, 2020 at 16:14
• Omg! I can't believe that. You are right. I will remove the first type and give it another go. Hoping that was the issue! – Robbiegod Commented May 10, 2020 at 17:25
• So @Robbiegod, was that the issue? – Simon Arnold Commented Nov 2, 2021 at 12:09
• 1 @SimonArnold Yes, i believe it was. I will post a solid answer. – Robbiegod Commented Nov 4, 2021 at 2:45
• Take a look at this answer: stackoverflow.com/a/75210085/4484799 – Uriahs Victor Commented Jan 23, 2023 at 13:20

Add a comment  | 

2 Answers 2

Sorted by: Reset to default 8

Here is the final code I now use to add type="module" to my scripts.

wp_register_script('my-script', get_theme_file_uri('/js/script.js'), ['axios'], '1.0');
wp_enqueue_script('my-script');

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

    return $tag;
}

JavaScript modules have first-class support in WordPress as of version 6.5 (just released at the time of writing).

If you're using ECMAScript modules (with import and export), you can do something like the following:

wp_register_script_module(
  '@myplugin/axios',
  get_stylesheet_directory_uri() . '/js/axios/axios.min.js',
  array(),
  '1.0'
);
wp_enqueue_script_module(
  '@myplugin/ajaxloadmore', 
  get_stylesheet_directory_uri() . '/js/ajaxloadmore.js',
  array( '@myplugin/axios' ),
  '1.0'
);

本文标签： functionsHow can I load a javascript file that is typequotmodulequot the Wordpress way