【WordPress・JavaScript】カーソルが表示されない????‍♂️

前提・実現したいこと

現在WordPressでオリジナルテーマを製作中なのですが、
トップページのみ自作HTMLで
残りの下層ページはブロックエディタを使って
制作していこうと思っております。

現在までつまづきながらも
順調に進んでいたのですが、
どうしても解決できず困っております。

トップページではエラーなく表示されるのですが、
ブロックエディタにて追加したページだと
カーソルが消えてしまします、、、、、、、

どうかご教授いただけたら嬉しいです。

発生している問題・エラーメッセージ

Uncaught TypeError: Cannot read properties of null (reading 'offsetWidth')
    at Object.init (main.js:119)
    at main.js:234

該当のソースコード

JavaScript
1var cursor = {
2  delay: 8,
3  _x: 0,
4  _y: 0,
5  endX: (window.innerWidth / 2),
6  endY: (window.innerHeight / 2),
7  cursorVisible: true,
8  cursorEnlarged: false,
9  $dot: document.querySelector('.cursor-dot'),
10  $outline: document.querySelector('.cursor-dot-outline'),　
11
12  init: function() {
13    // Set up element sizes
14    this.dotSize = this.$dot.offsetWidth;　　⇦　⇦　⇦　⇦　⇦⇦　⇦　⇦　⇦　⇦**ここでエラーが出ます**
15    this.outlineSize = this.$outline.offsetWidth;
16
17    this.setupEventListeners();
18    this.animateDotOutline();
19  },