Q&A
npm で入れたライブラリをブラウザで使う場合、今のところまだ必要なものを一つにまとめた js ファイルを作ってそれを読み込ませるようにするのが一般的だと思います。で、それをするのが webpack などのモジュールバンドラーと呼ばれるもので、vue-cli を使えば webpack の設定を勝手にやってくれると思いますが、そうでない場合は自分で設定する必要があります。
https://ics.media/entry/12140/
前提・実現したいこと
今回、chart.jsというライブラリをjsファイルにimportして利用する方法が知りたいです。
試したことは、npm i chart.jsで実行して、package.jsonに記述しました。
ディレクトリ構造は下記のようになってます。
今回は、index.thmlでindex.jsを読み込み、その中でimport Chart from 'chart.jsのようにしてライブラリを読み込もうとしました。
しかし、エラーメッセージが表示され原因が分からず困っている状況です。
. ├── node_modules │ ├── chart.js │ ├── chartjs-color │ ├── chartjs-color-string │ ├── color-convert │ ├── color-name │ └── moment │ ├── package-lock.json ├── package.json └── src ├── index.html └── js └── index.js
発生している問題・エラーメッセージ
ローカルサーバーをpython -m http.server 8000で立ててindex.htmlを表示すると下記エラーが出力されます。
Uncaught SyntaxError: Cannot use import statement outside a module
該当のソースコード
html
1<!DOCTYPE html> 2<html lang="ja"> 3 4<head> 5 <meta charset="UTF-8"> 6 <meta name="viewport" content="width=device-width, initial-scale=1.0"> 7 <title>char.js サンプル！</title> 8</head> 9 10<body> 11 <canvas id="myChart" width="400" height="400"></canvas> 12 <script src="js/index.js"></script> 13</body> 14 15</html>
js
1import Chart from 'chart.js'; 2 3var ctx = document.getElementById("myChart").getContext("2d"); 4var myChart = new Chart(ctx, { 5 type: "bar", 6 data: { 7 labels: ["赤", "青", "黄色", "緑", "紫", "橙"], 8 datasets: [ 9 { 10 label: "得票数", 11 data: [12, 19, 3, 5, 2, 3], 12 backgroundColor: [ 13 "rgba(255, 99, 132, 0.2)", 14 "rgba(54, 162, 235, 0.2)", 15 "rgba(255, 206, 86, 0.2)", 16 "rgba(75, 192, 192, 0.2)", 17 "rgba(153, 102, 255, 0.2)", 18 "rgba(255, 159, 64, 0.2)", 19 ], 20 borderColor: [ 21 "rgba(255,99,132,1)", 22 "rgba(54, 162, 235, 1)", 23 "rgba(255, 206, 86, 1)", 24 "rgba(75, 192, 192, 1)", 25 "rgba(153, 102, 255, 1)", 26 "rgba(255, 159, 64, 1)", 27 ], 28 borderWidth: 1, 29 }, 30 ], 31 }, 32 options: { 33 scales: { 34 yAxes: [ 35 { 36 ticks: { 37 beginAtZero: true, 38 }, 39 }, 40 ], 41 }, 42 }, 43}); 44
json
1{ 2 "name": "ex02_chartjs", 3 "version": "1.0.0", 4 "description": "", 5 "main": "index.js", 6 "scripts": { 7 "test": "echo \"Error: no test specified\" && exit 1" 8 }, 9 "author": "", 10 "license": "ISC", 11 "dependencies": { 12 "chart.js": "^2.9.3" 13 } 14} 15
試したこと
上記エラー文をそのままググった時に見つけたサイトを参考に、
<script>に`type="module"`という属性を入れてみましたが、違うエラーが表示されました。 ``` Uncaught TypeError: Failed to resolve module specifier "chart.js". Relative references must start with either "/", "./", or "../". ``` ちなみに、CDNで`chart.js`を読み込んで利用することはできました。 ### 個人的に怪しいと思っていること 恥ずかしながら、当方`vue.js`の`vue-cli`でしかnpmライブラリを利用したことがなく、今回はその感覚で利用してみた所エラーに遭遇しました。 また`webpack`を理解しておらず、今回のエラーに関係してくるのではないかと考えています。 拙い文章で申し訳ございませんが、ご教授いただけますと幸いです。
回答1件
0
下記エラーに関してはtype="module"を追加であっています。
Uncaught SyntaxError: Cannot use import statement outside a module
下記に関しては、import Chart from 'chart.js';の様にモジュールをインポートする時は「/」「./」「../」から始まるパスでファイルを指定しましょうということです。
Uncaught TypeError: Failed to resolve module specifier "chart.js". Relative references must start with either "/", "./", or "../".
ただし、
他の方も言われているように、npmを使ってnode_modules内のファイルを直接importするのは一般的でないため、Webpack等のモジュールバンドラーを使う必要があります。
投稿2020/04/21 15:36
退会済みユーザー
総合スコア0
あなたの回答
tips
プレビュー
