特定のファイルが「cloudflare.com」で読み込めない

###実現したいこと
WordPressで「cloudflare.com」を介して「CountUp.js」を読みたいです

###発生している問題
WordPress初心者なのですが、外部のJSファイルを「cloudflare.com」で読むにあたってこちらの「CountUp.js」のファイルだけが読み込めない状況に陥りました

https://cdnjs.cloudflare.com/ajax/libs/countup.js/2.0.4/countUp.min.js

###該当のソースコード
functions.phpに下記で、スライダーが読めるのにカウントアップが読めない状況です。

php
1add_action( 'wp_enqueue_scripts', 'my_enqueue_scripts' );
2function my_enqueue_scripts(){
3
4	// カウントアップ
5	wp_enqueue_script( 'countUp.min.js', 'https://cdnjs.cloudflare.com/ajax/libs/countup.js/2.0.4/countUp.min.js', array(), '2.0.4', true );
6	
7	// スライダー
8	wp_enqueue_script( 'slick.min.js', 'https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.8.1/slick.min.js', array(), '1.8.1', true );
9}

###試したこと
下記のようにスライダーの方をコメントアウトしたらスライダーも読めなくなったので、いじっているファイルが違うなどではないようです。

php
1add_action( 'wp_enqueue_scripts', 'my_enqueue_scripts' );
2function my_enqueue_scripts(){
3
4	// カウントアップ
5	wp_enqueue_script( 'countUp.min.js', 'https://cdnjs.cloudflare.com/ajax/libs/countup.js/2.0.4/countUp.min.js', array(), '2.0.4', true );
6	
7	// スライダー
8	// wp_enqueue_script( 'slick.min.js', 'https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.8.1/slick.min.js', array(), '1.8.1', true );
9}

また「cloudflare.com」を介さずにしてはどうかと思い、文末にあるCountUp.jsのGithubからDLしたcountUp.min.jsをアップして次のように読もうと試みましたが、こちらも読まれませんでした。しかしテストの方は読めます。

php
1define("DIR_TEMPLATE_URI", get_template_directory_uri());
2add_action( 'wp_enqueue_scripts', 'my_enqueue_scripts' );
3function my_enqueue_scripts(){
4
5	// カウントアップ
6	wp_enqueue_script( 'countUp.min.js', DIR_TEMPLATE_URI . '/js/countUp.min.js', array(), '2.0.4', true );
7
8	// テスト
9	wp_enqueue_script( 'test.js', DIR_TEMPLATE_URI . '/js/test.js', array(), '0.0.1', true );
10	
11}

###環境
CountUp.jsはこちら↓で、数字をカウントアップしてくれるプラグインです
https://github.com/inorganik/CountUp.js

WordPress はインストールしたばかりで5.0.3を使用しています。

退会済みユーザー

2020/04/27 15:51

質問なのですが、「読み込めない」と判断しているのは、 DevToolsのConsoleやNetworkで確認して、ファイルが読み込めていないというエラー等を確認されているのか、それとも、CountUp.jsというのを使った処理が動いてないのか？どちらですか？？

aguri

2020/04/28 00:21

前者です。開発ツールのソースファイル画面には、test.jsやslick.min.jsが表示されているのにcountUp.min.jsが表示されません。そして開発ツールのコンソール画面には「export declarations may only appear at top level of a module」というエラーが表示されるという状況です。Lish様の方ではお試しいただいてもこの状況にはなりませんでしょうか？

行動規範の内容に同意します

回答1件

ベストアンサー

今CountUp.jsのGithubページを確認したのですが、
これはJavaScriptのモジュールなので、
HTMLから直接読み込む場合はscriptタグにtype="module"の属性が必要です。

質問欄にリンクを貼ってある、countUp.jsのGithubページに
Include in your html. Notice the type attribute:
と書いてあるのがそれです。

Lish様の方ではお試しいただいてもこの状況にはなりませんでしょうか？

ファイルは読み込まれました。
ただ、type属性を付けていないのでエラーがでました。
Unexpected token 'export'

私はWebpackを使うことがほぼほぼなので、WordPressのscriptタグに属性を付けるというのをやった事がないのですが、フィルターを使うとできるようです。
https://stackoverflow.com/questions/58931144/enqueue-javascript-with-type-module---

投稿2020/04/28 02:02

退会済みユーザー

総合スコア0