I'm developing a Chrome extension that will make use of some background scripts. I thought it would be interesting to make use of modules since Google recently added native support for them.

However, I'm getting a 'Uncaught SyntaxError: Unexpected identifier' error when I'm attemtping to import a module. The errors points to the line of code where the import is written. Here's an example:

In main.js:

import test from './test.js';

In test.js:

export default function test () {
  console.log('this is a test.');
}

I've tried various other formats, but none of them works. Interestingly, Chrome's newest import('file.js') function works just fine. However, I'm looking for a way to import modules without using promises.

Am I doing something wrong, or am I just not supposed to make use of modules in Chrome Extensions?

Thanks in advance.

I'm developing a Chrome extension that will make use of some background scripts. I thought it would be interesting to make use of modules since Google recently added native support for them.

However, I'm getting a 'Uncaught SyntaxError: Unexpected identifier' error when I'm attemtping to import a module. The errors points to the line of code where the import is written. Here's an example:

In main.js:

import test from './test.js';

In test.js:

export default function test () {
  console.log('this is a test.');
}

I've tried various other formats, but none of them works. Interestingly, Chrome's newest import('file.js') function works just fine. However, I'm looking for a way to import modules without using promises.

Am I doing something wrong, or am I just not supposed to make use of modules in Chrome Extensions?

Thanks in advance.

• javascript
• google-chrome-extension
• module

• 1 Possible duplicate of ES6 module Import giving "Uncaught SyntaxError: Unexpected identifier" – Kaibo Commented Nov 1, 2019 at 12:58

3 Answers 3

If you are getting an error shown below while using import (ES6 module).

You need to inform the browser by using the type="module" in the script tag you are using in the HTML file. Use this to link you js file in HTML

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

You should add type='module' to the main.js import line

look at this ES6 module Import giving "Uncaught SyntaxError: Unexpected identifier"

Manifest V2 Chrome extensions do not natively support ES modules. In order to use them in a Manifest V2 extension, you’ll need to use a bundler like Webpack.

Manifest V3 Chrome extensions have support for ES modules in background service workers. The Chrome documentation explains how to enable ES modules by adding a field to manifest.json:

You can optionally specify an extra field of "type": "module" to include the service worker as an ES Module, which allows you to import further code. See ES modules in service workers for more information. For example:

  "background": {
    "service_worker": "background.js",
    "type": "module"
  }

ES modules are supported in service workers since Chrome 91, though I’m not sure if they were introduced for Manifest V3 service workers at the same time.