Fix 'import call expects exactly one argument' error

The fix for the “SyntaxError: Unexpected token ’{’. import call expects exactly one argument.” error is to add type="module" to the <script> tag that loads your JavaScript file.

I had this problem in Safari. The same problem in Chrome is shown as “Uncaught SyntaxError: Cannot use import statement outside a module”, but the cause is the same.

I was trying to load a script that used ES module style imports, when I noticed the script was not loading, and I had this error in the browser console:

"SyntaxError: Unexpected token '{'. import call expects exactly one argument."

All I had to do to fix this was to use

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

instead of

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

Why does this error happen?

Without type="module", the browser treats your file as a classic script. Classic scripts don’t support import statements at all. Only module scripts do.

But there’s a twist that explains Safari’s weird wording. Classic scripts do support dynamic import(), the function-like form that takes one argument:

import('./analytics.js').then((mod) => {
  mod.trackPageview()
})

So when Safari’s parser meets the import keyword in a classic script, the only legal thing that can follow is a (. My file started with something like:

import { formatPrice } from './cart.js'

Safari sees import, expects an import(...) call, and instead finds a {. That’s why the message complains about an “import call” expecting “exactly one argument” when you never wrote a call at all. The error text describes what the parser expected, not what you meant.

Things to know after the fix

Adding type="module" changes a couple of behaviors, and it’s better to know them now than to debug them later.

Module scripts are deferred automatically. They run after the HTML document is parsed, like a script with the defer attribute. If your code relied on running immediately, the timing changes.

Module scripts are also fetched with CORS rules. If you open your HTML file directly from disk, with a file:// URL, the import fails. Serve the page from a local web server instead. Any static server works, and once the page loads over http://localhost the imports resolve fine.