Common Errors: Unexpected identifier in modules

Join the AI Workshop to learn more about AI and how it can be applied to web development. Next cohort February 1st, 2026

The AI-first Web Development BOOTCAMP cohort starts February 24th, 2026. 10 weeks of intensive training and hands-on projects.

When using ES Modules with import statements in the browser, you might see this error:

Uncaught SyntaxError: Unexpected identifier

The problem

This happens when the browser tries to load a JavaScript file that uses ES Module syntax (import/export) but the script isn’t marked as a module.

<!-- This won't work with import/export -->
<script src="index.js"></script>

The browser loads the file as a regular script, sees the import statement, and throws an error because import isn’t valid syntax in non-module scripts.

The solution

Add type="module" to your script tag:

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

Now the browser knows to treat this file as an ES Module, and import/export statements will work.

Example

Your HTML:

<!DOCTYPE html>
<html>
<head>
  <title>My App</title>
</head>
<body>
  <script type="module" src="index.js"></script>
</body>
</html>

Your JavaScript (index.js):

import { greet } from './utils.js'

greet('World')

Your module (utils.js):

export function greet(name) {
  console.log(`Hello, ${name}!`)
}

Important notes about modules

  1. File extensions: When importing, you often need to include the file extension (.js)

    import { func } from './mymodule.js' // Include .js

  2. CORS: Modules are fetched with CORS, so you can’t test them by opening the HTML file directly. Use a local server:

    npx serve .
# or
python -m http.server

  3. Strict mode: Modules always run in strict mode

  4. Scope: Variables in modules are scoped to the module, not global

  5. Defer by default: Module scripts are deferred automatically, so they won’t block HTML parsing

In Node.js

For Node.js, you have two options to use ES Modules:

  1. Use the .mjs extension for your files
  2. Add "type": "module" to your package.json: 
    {
  "type": "module"
}

Lessons in this unit:

0: Introduction
1: "X is not a function" errors
2: "document is not defined" error
3: Cannot assign to read only property
4: Parse failure: Unterminated string constant
5: FormData multipart fetch issues
6: regeneratorRuntime is not defined
7: ▶︎ Unexpected identifier in modules
8: Unterminated string literal