Wednesday, July 13, 2022
HomeWordPress Developmentimport a JavaScript Library into WordPress

import a JavaScript Library into WordPress


I am attempting to combine the ‘Tough Notation’ JS Library into my WordPress web site.

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

I am simply utilizing their fundamental demo code (at: https://glitch.com/~basic-rough-notation) which makes use of the next script:

<script sort="module">
  import { annotate } from 'https://unpkg.com/rough-notation?module';
  
  const n1 = doc.querySelector('em');
  const n2 = doc.querySelector('sturdy');
  const n3 = doc.querySelector('h1');
  const n4 = doc.querySelector('span');
  const n5 = doc.querySelector('#block');
  
  const a1 = annotate(n1, { sort: 'underline', shade: 'blue' });
  const a2 = annotate(n2, { sort: 'circle', shade: 'crimson', padding: 10 });
  const a3 = annotate(n3, { sort: 'field', shade: 'orange' });
  const a4 = annotate(n4, { sort: 'spotlight', shade: 'yellow', iterations: 1, multiline: true });
  const a5 = annotate(n5, { sort: 'bracket', shade: 'crimson', padding: [2, 10], brackets: ['left', 'right'], strokeWidth: 3 })
  
  a1.present();
  a2.present();
  a3.present();
  a4.present();
  a5.present();
  
</script>

(I am loading this into WordPress as ‘annotate-text.js’)

Initially I bought the next error:

annotate-text.js?ver=6.0.1:1 Uncaught SyntaxError: Can not use import assertion outdoors a 
module (at annotate-text.js?ver=6.0.1:1:1)

however after studying by some solutions on StackOverflow I arrange the next script to load the RoughNotation module:

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


perform set_scripts_type_attribute( $tag, $deal with, $src ) {
  if ( 'module_handle' === $deal with ) {
    $tag = '<script sort="module" src="'. $src .'"></script>';
  }
   return $tag;
}
add_filter( 'script_loader_tag', 'set_scripts_type_attribute', 10, 3 );

So, it appears to be like prefer it’s working and RoughNotation is loading. However now I get one other, totally different error:

Uncaught TypeError: Can not learn properties of null (studying 'parentElement')
at p.connect (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

Questioning if somebody can present me the best way to resolve this.

I’ve checked by StackOverflow once more however unsure the best way to implement solutions to related issues.

Thanks

RELATED ARTICLES

LEAVE A REPLY

Please enter your comment!
Please enter your name here

- Advertisment -
Google search engine

Most Popular

Recent Comments