Barba.jsを導入したいのですが上手くいきません。助けてください。

Question

前提・実現したいこと

javaScript初心者です。Barba.jsを導入したく、npmで公式よりインストールしたのですが、javaScriptのimportが上手くいきません。

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

Uncaught TypeError: Failed to resolve module specifier "@barba/core". Relative references must start with either "/", "./", or "../".

該当のソースコード

<script type="module">
            import  barba from '@barba/core';
            barba.init();
    </script>

試したこと

チュートリアルを紹介しているサイトをいくつも見て試しましたが上手くいきません。cdnを使ってBarba.Pjax.start()しても定義されてないと言われます。。

補足情報（FW/ツールのバージョンなど）

ここにより詳細な情報を記載してください。

Answer 1

npm はローカルの環境で Node.js により実行される想定なので、以下のようにHTMLには書けません。

<script type="module">
            import  barba from '@barba/core';
            barba.init();
    </script>

以下のようにして問題なく動くはずです。

<script src="https://unpkg.com/@barba/core"></script>
<script>
barba.init({
//....
})
</script>

追記

https://barba.js.org/docs/v2/user/ 現在は version が 2 になっているので、 Barba.Pjax.start() は version 1のシンタックスの為動かないと思われます。

Comments

[Bokoko33]

ご回答ありがとうございます。
投稿後にversion1での書き方を調べてそちらで動作させることには成功したのですが、version2ですとご教示いただいた通り書いても動来ませんでした。。。
wrapperの書き方などもv2で変わることは把握しているのですが。。。
お時間いただきありがとうございます。

[unhappychoice]

https://codepen.io/unhappychoice/pen/NWKwYqX?editors=1111
にて Debug log が表示されることは確認しています。

エラーの内容等必要であれば別に質問くださいmm