jquery Rellax.js を npm インストールして webpack でバンドル Uncaught ReferenceError: Rellax is not defined

CATEGORY: jQuery

2021年9月8日

Rellax.js を npm インストールして webpack でバンドルして使おうとしたら、エラー（Uncaught ReferenceError: Rellax is not defined）となったので対処法の覚書です。

Rellax.js のサイトにあるように npm install で rellax をインストール

$ npm install rellax --save

added 1 package, and audited 344 packages in 2s

found 0 vulnerabilities

エントリーポイントのファイルに以下を記述

index.js

//rellax.js のインポート
import 'rellax'; 

//.rellax を指定した要素
const rellaxElems = document.querySelectorAll('.rellax');
//.rellax を指定した要素があれば
if(rellaxElems && rellaxElems.length > 0) {
  //Rellax の初期化
  var rellax = new Rellax('.rellax', {
    speed: -6,
    center: false,
    wrapper: null,
    round: true,
    vertical: true,
    horizontal: false
  });
}

ビルド（webpack でバンドル）を実行（エラーなし）

$ npm run build

> assets@1.0.0 build
> webpack --mode production

asset main.js 231 KiB [emitted] [minimized] (name: main) 2 related assets
asset style.css 208 KiB [compared for emit] (name: main) 1 related asset
Entrypoint main [big] 439 KiB (1.2 MiB) = style.css 208 KiB main.js 231 KiB 2 auxiliary assets
orphan modules 380 KiB [orphan] 161 modules
runtime modules 1.13 KiB 5 modules
cacheable modules 581 KiB (javascript) 208 KiB (css/mini-extract)
javascript modules 581 KiB
・・・中略・・・
./node_modules/rellax/rellax.js 18.7 KiB [built] [ code generated ]
・・・以下省略・・・

但し、rellax を設定したページでは以下のエラー

Uncaught ReferenceError: Rellax is not defined
    at index.js:400
    at index.js:406
    at index.js:406

以下のように require を使って Rellax を定義（4行目）して再度ビルドして解決。

index.js

const rellaxElems = document.querySelectorAll('.rellax');
if(rellaxElems && rellaxElems.length > 0) {
  //Rellax を定義 （★追加）
  const Rellax = require('rellax');
  var rellax = new Rellax('.rellax', {
    speed: -6,
    center: false,
    wrapper: null,
    round: true,
    vertical: true,
    horizontal: false
  });
}