10

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.

Kim Nedergaard Clausen
  • 232
  • 1
  • 3
  • 9
  • 1
    Possible duplicate of [ES6 module Import giving "Uncaught SyntaxError: Unexpected identifier"](https://stackoverflow.com/questions/47632562/es6-module-import-giving-uncaught-syntaxerror-unexpected-identifier) – Kaibo Nov 01 '19 at 12:58

3 Answers3

9

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

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>

Ankit Sinha
  • 1,630
  • 1
  • 20
  • 19
0

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

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

Kaibo
  • 111
  • 1
  • 4
0

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.

Teddy
  • 11
  • 3