turnbox.js replaceが治らない........

実現したいこと

ポートフォリオを作成しようと思っています。
その際にサイトをおしゃれにしたいと思い、turnbox.jsを使用してUI/UXの改善を行うと考えています。

やりたいことはturnbox.jsのドキュメントにあるサンプルを試しに実装したいだけなのですが、書いてある通りに実行するとなぜかエラーメッセージがでてうまく実装できません。

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

おそらくですが、replaceができていないとのことですが、なぜreplaceできないのかよくわかりません。
正規表現で調べてもうまく解決方法が見つかりませんでした。

現在の状況↓(ボックスが長すぎる問題は後で修正します。)

ChromeDeveloperToolsError
1Uncaught TypeError: Cannot read property 'replace' of undefined
2 at encode_class_id (turnBox.self-ba919f2c7d92851d6be7cfb6602b8f7bf89034d6f18d511c48b617d0d0c55508.js?body=1:640)
3    at set_box (turnBox.self-ba919f2c7d92851d6be7cfb6602b8f7bf89034d6f18d511c48b617d0d0c55508.js?body=1:318)
4    at k.fn.init.$.fn.turnBox (turnBox.self-ba919f2c7d92851d6be7cfb6602b8f7bf89034d6f18d511c48b617d0d0c55508.js?body=1:544)
5

コード

Ruby on Railsを使用して開発しているため、HTMLではなくHamlを使用しています。
git hubからturnBox.jsをコピーして読み込んでいます。jQueryも読み込み済みです。

Haml
1%div.sample
2    %div#css-sample-front
3      %p.turnBoxButton NEXT
4    %div
5      %p.turnBoxButton NEXT
6    %div
7      %p.turnBoxButton NEXT
8    %div
9      %p.turnBoxButton NEXT

CSS
1.turnBoxButton {
2  line-height: 2.5;
3  display: block;
4  text-align: center;
5}
6
7#css-sample-front {
8  background: red;
9}
10
11.turnBoxFaceNum2 {
12  background: blue;
13}
14
15.turnBoxFaceNum3 {
16  background: green;
17}
18
19.turnBoxFaceNum4 {
20  background: gray;
21}
22

jQuery
1$(".sample").turnBox({
2    width: 200,
3    height: 50,
4    axis: "X",
5    perspective: 800,
6    duration: 200,
7    delay: 0,
8    easing: "linear",
9    direction: "positive",
10    type: "real"
11  });