9

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
  • 212
  • 1
  • 3
  • 8
  • 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

2 Answers2

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,490
  • 1
  • 17
  • 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
  • 113
  • 1
  • 4