Masonry + imagesloadedで変数名.imagesLoaded is not a function エラーが表示されてしまう。

実現したいこと

Masonryを使用し、複数の画像をタイルのように並べたい

前提

Masonry + imagesloadedを使用しています。
https://masonry.desandro.com/layout.html

公式の通りにに実行してみたのですが、エラーが発生します。
表示に関しては問題なさそうなので、プログラムは動いているのですが、エラーが気になります。

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

caught TypeError: $grid.imagesLoaded is not a function

該当のソースコード

HTML
1<!DOCTYPE html>
2<html lang="ja">
3<head>
4    <meta charset="UTF-8">
5    <title>NIBG ver2</title>
6    <link rel="stylesheet" href="css/games.css">
7    <script src="public/js/jquery-3.6.4.min.js" type="module"></script>
8    <script src="public/js/masonry.pkgd.min.js" type="module"></script>
9    <script src="https://unpkg.com/imagesloaded@5/imagesloaded.pkgd.js"></script>
10    <script src="public/js/style.js" type="module"></script>
11</head>
12<body>
13    <div class="grid">
14        <div class="grid-sizer"></div>
15        <div class="grid-item">
16          <img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/82/orange-tree.jpg" />
17        </div>
18        <div class="grid-item">
19          <img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/82/submerged.jpg" />
20        </div>
21        <div class="grid-item">
22          <img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/82/look-out.jpg" />
23        </div>
24        <div class="grid-item">
25          <img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/82/one-world-trade.jpg" />
26        </div>
27        <div class="grid-item">
28          <img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/82/drizzle.jpg" />
29        </div>
30        <div class="grid-item">
31          <img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/82/cat-nose.jpg" />
32        </div>
33        <div class="grid-item">
34          <img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/82/contrail.jpg" />
35        </div>
36        <div class="grid-item">
37          <img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/82/golden-hour.jpg" />
38        </div>
39        <div class="grid-item">
40          <img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/82/flight-formation.jpg" />
41        </div>
42      </div></body>
43</html>

CSS
1* { box-sizing: border-box; }
2
3/* force scrollbar */
4html { overflow-y: scroll; }
5
6body { font-family: sans-serif; }
7
8/* ---- grid ---- */
9
10.grid {
11  background: #DDD;
12}
13
14/* clear fix */
15.grid:after {
16  content: '';
17  display: block;
18  clear: both;
19}
20
21/* ---- .grid-item ---- */
22
23.grid-sizer,
24.grid-item {
25  width: 33.333%;
26}
27
28.grid-item {
29  float: left;
30}
31
32.grid-item img {
33  display: block;
34  max-width: 100%;
35}

JS
1var $grid = $('.grid').masonry({
2    itemSelector: '.grid-item',
3    percentPosition: true,
4    columnWidth: '.grid-sizer'
5  });
6  // layout Masonry after each image loads
7  $grid.imagesLoaded().progress( function() {
8    $grid.masonry();
9  });