Q&A
前提・実現したいこと
html/css/javascriptとfirebaseを用いて新規登録とログインシステムを作っています。
新規登録画面を作成し、firebase-Authenticationへメールアドレスとパスワードを送ろうとしたら、エラーが発生していました。
登録ボタンを押してもfirebase-Authenticationへはデータが届いていない状況です。
import付近のことを調べてはいますがずっと停滞しているため教えていただきたいです。
発生している問題・エラーメッセージ
Uncaught SyntaxError: Cannot use import statement outside a module
画像も添付します。
該当のソースコード
Javascript
1import firebase from "firebase/app"; 2import "firebase/auth"; 3import "firebase/firestore"; 4 5//新規登録処理 6const firebase = require('firebase'); 7const register = document.getElementById("register"); 8 9register.addEventListener('click', function (e) { 10 var mail = document.getElementById('email').value; 11 var password = document.getElementById('password').value; 12 13 firebase.auth().createUserWithEmailAndPassword(mail, password) 14 .catch(function(error) { 15 alert('登録できません（' + error.message + '）'); 16 }); 17}); 18
html
1<!DOCTYPE html> 2<html lang="ja"> 3 <head> 4 <meta charset="utf-8" /> 5 <meta name="viewport" content="width=device-width, initial-scale=1.0"> 6 <link rel="stylesheet" href="style.css"> 7 <title>新規登録</title> 8 9 </head> 10 <body> 11 <div class="form-wrapper"> 12 <h1>新規登録</h1> 13 <form name = "login_form"> 14 <div class="form-item"> 15 <label for="email"></label> 16 <input id="email" type="email" name="email" required="required" placeholder="〇〇〇@fukushima.kosen-ac.jp" value="@fukushima.kosen-ac.jp"></input> 17 </div> 18 <div class="form-item"> 19 <label for="password"></label> 20 <input id="password" type="password" name="password" required="required" placeholder="Password"></input> 21 </div> 22 23 <div class="button-panel"> 24 <input id="register" type="submit" class="button" title="Sign In" value="新規登録"> 25 </input> 26 </div> 27 </form> 28 </div> 29 30 <script src="/__/firebase/8.4.1/firebase-app.js"></script> 31 <script src="/__/firebase/8.3.3/firebase-auth.js"></script> 32 <script src="/__/firebase/8.3.3/firebase-firestore.js"></script> 33 <script src="/__/firebase/8.4.1/firebase-analytics.js"></script> 34 <script src="/__/firebase/init.js?useEmulator=true"></script> 35 36 <script type="text/javascript" src="register.js"></script> 37 38</body> 39</html> 40
試したこと
・.jsのimportに原因があるかと思い公式等を確認した
・.htmlのscriptタブに原因があるかと思い確認した
###バージョン、使用機器
firebase 9.10.0
macOS Big Sur version11.2.3
初めての質問なので不十分な点があるかも知れませんが、ご回答いただけると幸いです。
よろしくお願いします。
回答1件
0
ベストアンサー
エラーメッセージに書いてる通り、 import は module の外で使えません
module にするなら
html
1<script type="module" src="URL"></script>
形式で読み込みます
ただ今回の場合は
html
1 <script src="/__/firebase/8.4.1/firebase-app.js"></script> 2 <script src="/__/firebase/8.3.3/firebase-auth.js"></script> 3 <script src="/__/firebase/8.3.3/firebase-firestore.js"></script> 4 <script src="/__/firebase/8.4.1/firebase-analytics.js"></script> 5 <script src="/__/firebase/init.js?useEmulator=true"></script>
でロードしてるので、⇩の部分はいらないんじゃないでしょうか
js
1import firebase from "firebase/app"; 2import "firebase/auth"; 3import "firebase/firestore"; 4 5//新規登録処理 6const firebase = require('firebase');
投稿2021/04/23 09:58
総合スコア604
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
2021/04/24 04:25