'Unexpected identifier' when trying to import modules in Chrome extension

Question

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.

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

Ankit Sinha · Accepted Answer · 2018-08-07 06:42:11Z

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>

Kaibo · Accepted Answer · 2019-10-20 13:56:07Z

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

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

Teddy · Accepted Answer · 2022-11-12 15:45:21Z

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.

Collectives™ on Stack Overflow

'Unexpected identifier' when trying to import modules in Chrome extension

3 Answers 3

Comments

Comments

Comments

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

Comments

Linked

Related