2

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?

4
  • 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
    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
    May 10, 2020 at 17:25
  • So @Robbiegod, was that the issue? Nov 2, 2021 at 12:09
  • 1
    @SimonArnold Yes, i believe it was. I will post a solid answer.
    – Robbiegod
    Nov 4, 2021 at 2:45

1 Answer 1

4

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;
}
2
  • $tag = preg_replace("/(.*)(><\/script>)/", '$1 type="module"$2', $tag); is better if you do not want to remove parameters added by other plugins Feb 2 at 13:09
  • I'd suggest this is even better: $tag = str_replace('text/javascript', 'module', $tag);
    – lhermann
    Jul 27 at 17:39

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.