3

I am learning firebase. I am using Kubuntu 21.04. I installed nodejs and npm using :
sudo apt install nodejs npm I created a project folder with index.html file /home/username/project/index.html.
I have also installed firebase using npm install firebase while I was on project folder in terminal.
I follow upto STEP 2 as given in https://firebase.google.com/docs/web/setup.
My index.html content-

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>User Auth</title>
</head>
<body>
  <h1>User Auth</h1>

<script>
  // Import the functions you need from the SDKs you need

  import { initializeApp } from "firebase/app";
  import { getAnalytics } from "firebase/analytics";


  // TODO: Add SDKs for Firebase products that you want to use
  // https://firebase.google.com/docs/web/setup#available-libraries

  // Your web app's Firebase configuration
  // For Firebase JS SDK v7.20.0 and later, measurementId is optional
  const firebaseConfig = {
    apiKey: "AIzaSyC5zv8b1wfc0ykmpULeFI6tJa6Grk",
    authDomain: "user-auth-75223.firebaseapp.com",
    projectId: "user-auth-78563",
    storageBucket: "user-auth-78563.appspot.com",
    messagingSenderId: "482788408547",
    appId: "1:482788408547:web:89e3ecdc24f3454576c00aa",
    measurementId: "G-VK5D45CCJ2"
  };

  // Initialize Firebase
  const app = initializeApp(firebaseConfig);
  const analytics = getAnalytics(app);
</script>
</body>
</html>

But when I run above html file in chrome. It is giving error in chrome's console.

Uncaught SyntaxError: Cannot use import statement outside a module

Abhishek kamal
  • 319
  • 3
  • 12
  • 1
    ` – evolutionxbox Sep 10 '21 at 11:00
  • If you are learning to build a web application with firebase, probably better to follow a guide such as below, so you can learn the related best practises as well. https://developers.google.com/codelabs/building-a-web-app-with-angular-and-firebase#0 https://blog.angular-university.io/angular-2-firebase/ – Udith Gunaratna Sep 10 '21 at 11:03
  • @evolutionxbox It is now giving 'indexing error' : **Uncaught TypeError: Failed to resolve module specifier "firebase/app". Relative references must start with either "/", "./", or "../".** – Abhishek kamal Sep 10 '21 at 11:06
  • Yup. If you're using modules directly in the browser you cannot use `npm` modules without using an absolute or relative reference. If you don't want that, use a bundler like webpack. – evolutionxbox Sep 10 '21 at 11:07
  • @evolutionxbox I have one folder named as node_modules inside my project folder. `/project/node_modules` . – Abhishek kamal Sep 10 '21 at 11:08
  • That's correct, but the browser doesn't know that. – evolutionxbox Sep 10 '21 at 11:10
  • So Should I just need to import script of webpack and problem of indexing will solve ? – Abhishek kamal Sep 10 '21 at 11:10
  • Read through the tutorials/getting started or webpack to see if it fits your needs. You can also use parcel, which doesn't need any configuration to run. – evolutionxbox Sep 10 '21 at 11:13
  • Okay thanks for your help. I am taking reference from https://webpack.js.org/guides/getting-started/ – Abhishek kamal Sep 10 '21 at 11:16
  • @evolutionxbox My next question, https://stackoverflow.com/questions/69132670/how-do-i-add-more-fields-in-firebase-auth – Abhishek kamal Sep 10 '21 at 13:10
  • https://stackoverflow.com/questions/42237388/syntaxerror-import-declarations-may-only-appear-at-top-level-of-a-module#48583456 same error, answered her – Alynne Jan 27 '22 at 09:24
  • Does this answer your question? [(node:9374) Warning: To load an ES module, set "type": "module"](https://stackoverflow.com/questions/63588714/node9374-warning-to-load-an-es-module-set-type-module) – evolutionxbox Mar 02 '22 at 14:01

1 Answers1

3

It's probably because you did not add "type":"module" in package.json?

I fixed this issue by adding this line

source: (node:9374) Warning: To load an ES module, set "type": "module"

it worked
  • 31
  • 3