JavaScriptのモジュールをimportした先のJavaScriptファイル中で関数が定義できない

前提・実現したいこと

【前提】JavaScriptでモジュールを使うために学習中に発生した。
【実現したいこと】JavaScriptファイルを2つ作成し、example2.jsの関数addをexample1.jsにimportし、ボタンが押されたときにconsole.logで出力するという簡単なプログラムを組みたい。

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

【発生している問題】example1.jsで定義した関数calcAddが変数と認識されない。というか、import先のファイル(example1.js)で変数の宣言が一切できない。
【エラーメッセージ1】VSCode上で関数名calcAddにカーソルをあてると、「'calcAdd'が宣言されていますが、その値が読み取られることはありません。」と表示される。
【エラーメッセージ2】consoleにも
「Uncaught ReferenceError: calcAdd is not defined at HTMLInputElement.onclick ((index):8)」
と表示される。
【知りたいこと】
・import先で関数(変数)が定義できない原因
・解決策

該当のソースコード

html
1<!DOCTYPE html>
2<html lang="ja">
3<head>
4    <meta charset="UTF-8">
5    <script type="module" src="./example1.js"></script>
6</head>
7<body>
8    <input type="button" value="hoge" onclick="calcAdd">
9</body>
10</html>

JavaScript
1//こちらがexample1.js
2import {add} from "./example2";
3
4let calcAdd = function(){
5    let answer =  add(1, 2);
6    console.log(answer);
7}

JavaScript
1//こちらがexample2.js
2export const add = function(num1, num2){
3    return num1 + num2;
4}

試したこと

【1】関数の記述方法を匿名関数ではなく、以下のように変えてみた。

JavaScript
1function calcAdd(){
2    let answer = add(1, 2);
3    console.log(answer);
4}

結果、特に変化なし。
エラーメッセージ等も最初に記入したものと同じだった。

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

【使用しているブラウザ】Google Chorome
【環境】VSCodeの画面右下のGo Liveというところからローカルサーバーを立てて実行

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

回答1件

ベストアンサー

example2.jsが読み込まれていません。
また、htmlの側でcalcAddをインポートしているわけではないので、それへの対応が必要です。
onclickで関数を呼び出せていないので、ここも修正します。

javascript
1//こちらがexample1.js
2import {add} from "./example2.js";//←.jsを忘れていた
3
4export function calcAdd(){
5    let answer =  add(1, 2);
6    console.log(answer);
7}

html
1<!DOCTYPE html>
2<html lang="ja">
3<head>
4    <meta charset="UTF-8">
5    <script type="module">
6    import {calcAdd} from "./example1.js";
7    window.calcAdd = calcAdd;
8    </script>
9</head>
10<body>
11    <input type="button" value="hoge" onclick="calcAdd()">
12</body>
13</html>

以上です。

投稿2021/02/13 21:03

編集2021/02/13 21:17

AT_2nd

総合スコア266

dencyu

2021/02/14 00:28

ご教授いただいた通り、・example1.jsでのexample2.jsのimport記述ミス・HTML側でexample1.jsをimportしていなかった（＝example1.jsでのexportも不足していた）・inputタグのonclickの記述ミスを修正したら解決致しました！ example1.jsもモジュールであるということが失念していたため、html側にimportする必要があると初めて知りました。かなりの時間をかけて悩んでいたため、本当に助かりました。ありがとうございました。

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