'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.

Answer 1

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>