Browser scripts cannot have imports or exports. Use a <script type="module"> instead

[prokher]

Dear Maintainer(s),

I've got the following error trying to build the extension:

$ npm run build

> build
> parcel build source/manifest.json --no-content-hash --no-source-maps --dist-dir distribution --no-cache --detailed-report 0

🚨 Build failed.
@parcel/transformer-js: Browser scripts cannot have imports or exports. Use a <script type="module"> instead.
/Volumes/Dev/ProBrain/BrowserExtensionTemplate/source/options.js:4:1
  3 | 
> 4 | import optionsStorage from './options-storage.js';
>   | ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
  5 | 
  6 | optionsStorage.syncForm('#options-form');
@parcel/transformer-js: The environment was originally created here:
/Volumes/Dev/ProBrain/BrowserExtensionTemplate/source/options.html:31:1
  30 | 
> 31 | <script src="options.js"></script>
>    | ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
  32 | 

I thought I probably doing something wrong and made a GitHub clone but clicking "Use this template" button as README.md recommends, but got the same issue.

What am I doing wrong?

[fregante]

I saw this issue today too. It's possible that Parcel released another breaking change a usual.

Try adding a type="module" attribute on the script tag

[prokher]

@fregante, thank you, adding type="module" did the trick:

$ git diff
diff --git a/source/options.html b/source/options.html
index 40894b3..57cb974 100644
--- a/source/options.html
+++ b/source/options.html
@@ -28,4 +28,4 @@
        </div>
 </form>

-<script src="options.js"></script>
+<script type="module" src="options.js"></script>

$ npm run build

> build
> parcel build source/manifest.json --no-content-hash --no-source-maps --dist-dir distribution --no-cache --detailed-report 0

✨ Built in 2.34s

distribution/manifest.json              633 B     39ms
distribution/icon.png                 1.14 KB     60ms
distribution/background.js           30.88 KB    511ms
distribution/options.html               925 B    617ms
distribution/options.9515e12b.css       616 B    1.28s
distribution/options.81ccf7e2.js     53.22 KB    727ms

[prokher]

Here is a pull request https://github.com/fregante/browser-extension-template/pull/52.

[wll8]

If this is caused by an update, I did not upgrade any packages, and I still received this error, which brought a lot of unnecessary trouble to the developers and brought great uncertainty to the stability of the project!

[wll8]

If this is caused by an update, I did not upgrade any packages, and I still received this error, which brought a lot of unnecessary trouble to the developers and brought great uncertainty to the stability of the project!