Cannot use import statement outside a module

[maikelmo]

Hi. I got an issue.

I've tried to implement BulmaJS into an existing website, but I keep getting the same error over and over again.
Can you help me out?

I'm using BulmaJS 0.12.1

The code I use is the example code from the docs.
The error in webbrowser console:

       import Alert from "@vizuaalog/bulmajs/src/plugins/alert"
        
        document.querySelector('#example-alert-button-5').addEventListener('click', function(e) {
            Bulma().alert({
                type: 'danger',
                title: 'This is an alert!',
                body: 'Ooohh what button you gonna click?',
                confirm: 'Confirm it!',
                cancel: 'Maybe not'
            });
        });

Thanks in advance!

Maikel

[VizuaaLOG]

Hey 👋,

This is due to the import statement being a special keyword for newer browsers. You would need to either setup your script to be interpreted as a module (this wouldn't work with some older browsers).

Or you'll need to use a precompiled version of BulmaJS. For example, if you're only using the alert plugin then you can include the dist/alert.js file in your webpage, otherwise, it would be best to include the full dist/bulma.js file.

This approach is less flexabilble than using something like webpack, although it can be difficult to setup and not something I would be able to help with.

Hope this helps 🙂

[maikelmo]

Thanks alot! I got it working by including the alert.js file to the webpage itself.