tailwind's Flowbite- Unable to globally access instances for automatic modal popup (laravel)

Question

I am using Laravel,Tailwind and Flowbite. I am trying to access Flowbite modal popup. I want the modal to automatically popup when a user lands on the page. The page is a laravel blade page.

I have followed the instructions here but i get this error message:

Cannot use import statement outside a module

I did this on the page:

<script type="application/javascript">

import { Modal } from 'flowbite';

// set the modal menu element
const $targetEl = document.getElementById('modalEl');

// options with default values
const options = {
  placement: 'bottom-right',
  backdrop: 'dynamic',
  backdropClasses: 'bg-gray-900/50 dark:bg-gray-900/80 fixed inset-0 z-40',
  closable: true,
  onHide: () => {
      console.log('modal is hidden');
  },
  onShow: () => {
      console.log('modal is shown');
  },
  onToggle: () => {
      console.log('modal has been toggled');
  }
};


const modal = new Modal($targetEl, options);

modal.show();

</script>

I guess the issue is this: how do you import Flowbite onto a Larevel blade page?

I tried taking out the import statement but I get this error;

ReferenceError: Modal is not defined

this is how i installed Flowbite on my Laravel site:

Install Tailwind CSS and Flowbite using NPM:

npm install -D tailwindcss postcss autoprefixer flowbite

Add to tailwind.config.js

module.exports = {
    content: [


  "./node_modules/flowbite/**/*.js"
],
theme: {
  extend: {},
},
plugins: [
    require('flowbite/plugin')
],
}

Import Flowbite /resources/js/app.js:

import 'flowbite';