Enqueue javascript with type="module"

Question

I want to use countUp.js on my custom theme in Wordpress.

When I add the file with wp_enqueue_script(), I get an error:

Uncaught SyntaxError: Unexpected token 'export'

I've read that it can be fixed by setting type="module" on the <script> tag, but I don't know how to do that as that option doesn't exist in wp_enqueue_script()...

Can anyone help me?

Answer 1

One can add attributes to a script by applying filter 'script_loader_tag'.

Use add_filter('script_loader_tag', 'add_type_attribute' , 10, 3); to add the filter.

Define the callback function like the example given on the link above:

function add_type_attribute($tag, $handle, $src) {
    // if not your script, do nothing and return original $tag
    if ( 'your-script-handle' !== $handle ) {
        return $tag;
    }
    // change the script tag by adding type="module" and return it.
    $tag = '<script type="module" src="' . esc_url( $src ) . '"></script>';
    return $tag;
}