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

Question

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?

Answer 1

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

Answer 2

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'
);