SyntaxError: Unexpected identifier '{'. import call expects exactly one argument. JavaScript HTML

Viewed 15

I have following lines at the bottom of my <body>:

<script type="module" src="../js/firebase.js"></script>
<script src="../js/common.js"></script>

Here is firebase.js:

import { initializeApp } from "https://www.gstatic.com/firebasejs/9.10.0/firebase-app.js";
import { getAuth, createUserWithEmailAndPassword } from "https://www.gstatic.com/firebasejs/9.10.0/firebase-auth.js";
import { getDatabase } from "https://www.gstatic.com/firebasejs/9.10.0/firebase-database.js";

const firebaseConfig = {
    ...
};

export const app = initializeApp(firebaseConfig);

And here is an import inside common.js:

import {app} from './firebase.js';
...

This import raises SyntaxError: Unexpected identifier '{'. import call expects exactly one argument

1 Answers

Only modules can use import.

So change

<script src="../js/common.js"></script>

to

<script src="../js/common.js" type="module"></script>

If that doesn't fix your problem, then the import you show is not the problematic import.

Make sure you don't try to import a default export as a named export, or vice versa.

Related