"Uncaught SyntaxError: Cannot use import statement outside a module" error while using parcel v2 to bundle JavaScript

Question

I get this error regarding two scripts that I'm trying to load from my index.html file:

<script type="module"
src="https://unpkg.com/ionicons@5.5.2/dist/ionicons/ionicons.esm.js"></script>

<script type="module"
src="https://widgets.api-sports.io/football/1.1.8/widget.js"></script>

For some reason the problem only occures when I'm using Parcel to bundle my code. If I use live-server to preview the page, the scripts load with no problems.

package.json file:

 {
  "name": "footballstatsil",
  "version": "1.0.0",
  "description": "A website for football statistics",
  "default": "controller.js",
  "scripts": {
    "dev": "parcel index.html",
    "build": "parcel build index.html"
  },
  "author": "Dror Salomon",
  "license": "ISC",
  "dependencies": {
    "axios": "^0.24.0",
    "parcel": "^2.0.0"
  }
}

So when I hit "npm run dev", I get the "Uncaught SyntaxError: Cannot use import statement outside a module" error and the scripts do not load.

Would really appriciate any help with this issue, thanks!

Answer 1

Ok so I executed the "npm run build" script and then executed the "npm run dev" script and everything seems to work...