Q&A前提・実現したいこと
Rails6 の Webpacker により Materialize を使おうとしています。加えて、カスタマイズした datepicker でオーバーライドしようとしています。
しかし HTML、Javascript のみで試したところうまくいったのですが、同じことを Rails6 では実現できず以下のエラーメッセージが発生しました。
Webpacker を使うと自動的に変数のスコープ（あるいは .js ファイルごとの名前空間）が分けられるからのようですが、あえて特定の複数のファイル（特定のディレクトリ以下でもよい）を同一の名前空間として処理することは可能でしょうか？（このケースだとモジュールのmaterialize-cssの名前空間にdatepicker.jsを合わせる）
発生している問題・エラーメッセージ
javascript
1ReferenceError: Component is not defined
エラーの発生箇所は datepicker.js のclass Datepicker extends Component {になります。
全くカスタマイズしていない datepicker.js を読み込もうとしても同じエラーがでます。
（app/node_modules/materialize-css/js/datepicker.js）
該当のソースコード
Rails
1# app/javascript/packs/application.js 2require("@rails/ujs").start() 3require("@rails/activestorage").start() 4require("channels") 5require("jquery") 6 7import '../stylesheets/application' 8import "materialize-css/dist/js/materialize.min.js"; 9import Component from "materialize-css/dist/js/materialize.min.js"; 10import './datepicker' 11import './sample_a' 12import './sample_b'
app/javascript ├── channels │ ├── consumer.js │ └── index.js ├── packs │ ├── application.js │ ├── datepicker.js │ ├── sample_a.js │ └── sample_b.js └── stylesheets └── application.scss
試したこと
Railsを利用せず以下のようなコードで HTML、Javascript のみで試した場合は何のエラーも出ませんでした。sample_a.jsとsample_b.jsはスコープの確認用です。
HTML
1<!-- sample.html --> 2<html lang="ja"> 3 <head> 4 <meta charset="UTF-8"> 5 <!-- Compiled and minified CSS --> 6 <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/css/materialize.css"> 7 <!-- Compiled and minified JavaScript --> 8 <script src="https://code.jquery.com/jquery-3.4.1.slim.min.js"></script> 9 <script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/js/materialize.min.js"></script> 10 <!-- カスタマイズされたdatepicker.jsと設定用のsample.jsを読み込む --> 11 <script src="datepicker.js"></script> 12 <script src="sample_a.js"></script> 13 <script src="sample_b.js"></script> 14 </head> 15 <body> 16 <div class="container"> 17 <div class="input-field"> 18 <input id="date1" type="text" class="datepicker"> 19 <label for="date1">DATE 1</label> 20 </div> 21 <div class="input-field"> 22 <input id="date2" type="text" class="datepicker"> 23 <label for="date2">DATE 2</label> 24 </div> 25 </div> 26 </body> 27</html>
Javascript
1// sample_a.js 2options = {}; 3document.addEventListener('DOMContentLoaded', function() { 4 var elems = document.querySelectorAll('.datepicker'); 5 var instances = M.Datepicker.init(elems, options); 6}); 7let a = 1; 8console.log('_a',a); 9a = a + 1; 10console.log('_a',a);
Javascript
1// sample_b.js 2console.log('_b',a); 3a = a + 1; 4console.log('_b',a);
コンソールには問題なく以下のとおりの出力があります。
javascript
1_a 1 2_a 2 3_b 2 4_b 3
エラーのケースでは次のとおりの出力になります
javascript
1_a 1 2_a 2 3ReferenceError: a is not defined
補足情報（FW/ツールのバージョンなど）
Ruby on Rails 6.0.0
Materialize-CSS 1.0.0
materialize-css.jsのソース
datepicker.jsのソース
回答1件
0
自己解決
断念しました。
app/node_modules/materialize-css/dist/js/materialize.jsを直接変更することで、当面は対処します。
投稿2019/11/18 14:29
総合スコア1680
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。