javascriptthemestheme-development

Uncaught SyntaxError: Cannot use import statement outside a module , i wanna show alert on my website

When I import the code from search.js into scripts.js, the alert isn't showing up.

search.js code

class Search {
  constructor() {
    alert("hello, I am a search");
    
  }
}

export default Search;

scripts.js code

import "../css/style.css"

// alert("hello");
// Our modules / classes
import MobileMenu from "./modules/MobileMenu"
import HeroSlider from "./modules/HeroSlider"
import GoogleMap from "./modules/GoogleMap"
import Search from "./modules/Search"

// Instantiate a new object using our modules / classes
const mobileMenu = new MobileMenu()
const heroSlider = new HeroSlider()
const googleMap = new GoogleMap()
const search = new Search()
console.log(search);

// Allow new JS and CSS to load in browser without a traditional page refresh
if (module.hot) {
  module.hot.accept()
}

i want show alert on website

Solution

  • If you want to import stuff on a web page, you need to do it in a "module" script, like this:

    <script type="module">
  import "../css/style.css"
  // and other imports...
</script>