0

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

4
  • 3
    The latest error you’re receiving has nothing to do with WordPress. It’s a normal JavaScript issue. If I had to guess it’s because the querySelector calls are using selectors for elements that don’t exist on the page. Commented Jul 13, 2022 at 8:31
  • I second what @JacobPeattie is saying. I would either write in javascript a check for whatever element the javascript is tied to, OR only enqueue the script for whatever specific page it is on (like here: wordpress.stackexchange.com/questions/104510/…) Commented Jul 14, 2022 at 0:12
  • Thanks for the tip, Jacob. I checked over the script and corresponding page and, yes, a couple of elements, referenced in the script, were indeed missing from the page. All working now. I had looked around online for explanations for 'Uncaught TypeError ...' but couldn't make sense of what they said (too much technobabble). Thanks for putting it in plain English! Once again, thanks for your help. Much appreciated!!! Commented Jul 14, 2022 at 0:19
  • To elaborate, TypeError is saying that something is not what it is expected to be - code is trying to treat the contents of a variable as something other than what it is. Cannot read properties of null (reading 'parentElement') - that says that something is trying to access the property someVariableName.parentElement - a property which is present on every DOM/HTML element - but someVariableName holds the value null, which cannot have any properties. As it were, document.querySelector() returns null when it fails to match an element. Commented Jul 17, 2022 at 4:14

0

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.