How to import a JavaScript Library into WordPress

Question

I'm trying to integrate the 'Rough Notation' JS Library into my WordPress website.

See: https://roughnotation.com/ https://github.com/rough-stuff/rough-notation

I'm just using their basic demo code (at: https://glitch.com/~basic-rough-notation) which uses the following script:

<script type="module">
  import { annotate } from 'https://unpkg.com/rough-notation?module';
  
  const n1 = document.querySelector('em');
  const n2 = document.querySelector('strong');
  const n3 = document.querySelector('h1');
  const n4 = document.querySelector('span');
  const n5 = document.querySelector('#block');
  
  const a1 = annotate(n1, { type: 'underline', color: 'blue' });
  const a2 = annotate(n2, { type: 'circle', color: 'red', padding: 10 });
  const a3 = annotate(n3, { type: 'box', color: 'orange' });
  const a4 = annotate(n4, { type: 'highlight', color: 'yellow', iterations: 1, multiline: true });
  const a5 = annotate(n5, { type: 'bracket', color: 'red', padding: [2, 10], brackets: ['left', 'right'], strokeWidth: 3 })
  
  a1.show();
  a2.show();
  a3.show();
  a4.show();
  a5.show();
  
</script>

(I'm loading this into WordPress as 'annotate-text.js')

Initially I got the following error:

annotate-text.js?ver=6.0.1:1 Uncaught SyntaxError: Cannot use import statement outside a module (at annotate-text.js?ver=6.0.1:1:1)

but after reading through some answers on StackOverflow I set up the following script to load the RoughNotation module:

function annotate_scripts() 
   wp_enqueue_script( 'module_handle', get_stylesheet_directory_uri() . '/js/annotate-text.js', 
   array(), false, true );

}

add_action( 'wp_enqueue_scripts', 'annotate_scripts' );


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

So, it looks like it's working and RoughNotation is loading. But now I get another, different error:

Uncaught TypeError: Cannot read properties of null (reading 'parentElement')
at p.attach (rough-notation.esm.js?module:1:9287)
at new p (rough-notation.esm.js?module:1:8501)
at _ (rough-notation.esm.js?module:1:12411)
at annotate-text.js?ver=6.0.1:10:18

Wondering if someone can show me how to resolve this.

I've checked through StackOverflow again but not sure how to implement answers to similar problems.

Thanks

Antonio Skopin · Accepted Answer · 2022-07-13 08:05:45Z

0

There is a great tutorial on how to add Javascript libraries to you Wordpress site please check the following: How to add a Javascript library to a Wordpress website

answered Jul 13, 2022 at 8:05

Antonio Skopin

315 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Mekong Over a year ago

Thanks. I've just looked through this tutorial. Unfortunately it's very general and doesn't explain how to solve my specific issue. So, not much help.

Howard E Over a year ago

Welcome to SO. This answer isn't useful. It's just a link to an offsite reference with no context. You might want to read How to Answer

Collectives™ on Stack Overflow

How to import a JavaScript Library into WordPress

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related