MDCRippleがFABにアタッチされない

前提・実現したいこと

MDC(Material Design Components)を用いて、WebアプリケーションのUIを作成しております。
リップルエフェクトを持つフローティングアクションボタンを実装したいです。

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

公式サイトに則り実装を試みましたが、エフェクトが発生しません。

該当のソースコード

html
1<head>
2    ...
3
4    <link rel="stylesheet" href="https://unpkg.com/material-components-web@latest/dist/material-components-web.min.css">
5    <link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
6</head>
7
8</head>
9<body>
10    ...
11
12    <button class="mdc-fab">
13        <div class="mdc-fab__ripple"></div>
14        <span class="mdc-fab__icon material-icons">add</span>
15    </button>
16
17    <script src="https://unpkg.com/material-components-web@latest/dist/material-components-web.min.js"></script>
18    <script src="main.js"></script>
19</body>

JavaScript
1$(function() {
2    ...
3
4    const fabs = document.querySelectorAll('.mdc-fab');
5    for (const fab of fabs) {
6        mdc.ripple.MDCRipple.attachTo(fab);
7    }
8});