Consonle error: Cannot use import statement outside a module (at main.js:2:1)

[sussweb]

Hi,
I am running this on vite. In the browser consoloe I get the error Cannot use import statement outside a module (at main.js:2:1)
The carousel is not working properly. Clicking on the next arrows does nothing. Visually it looks ok.

Any ideas what I am doing wrong?

main.js

import { Carousel, initTE } from "tw-elements";
initTE({ Carousel }, true ); // set second parameter to true if you want to use a debugger

This is my package.json

  "name": "japan-microsite",
  "private": true,
  "version": "0.0.0",
  "type": "module",
  "scripts": {
    "dev": "vite",
    "build": "vite build",
    "preview": "vite preview"
  },
  "devDependencies": {
    "autoprefixer": "^10.4.14",
    "cssnano": "^6.0.1",
    "init": "^0.1.2",
    "npx": "^10.2.2",
    "postcss": "^8.4.23",
    "tailwindcss": "^3.3.2",
    "vite": "^4.3.2"
  },
  "dependencies": {
    "tw-elements": "^1.0.0-beta2"
  }
}

[smolenski-mikolaj]

@sussweb your main.js file should be imported inside html file as a module, not as a text/javascript, so it should be:

<script type="module" src="PATH_TO_YOUR_MAIN_JS_FILE"></script>

[sussweb]

OUCH! How embarrassing 🤬 TGIF
Thanks!!!