function "not defined" - what am I doing wrong?

[fpolli]

I have an event function defined in a script tag, and when I click the button, I get a "not defined" error.

<div x-data={}>
  <div>
    <button @click="myFunction">Button</button>
    <script>
        async function myFunction(e) {
            ... do some crap ...
        }
     </script>
  </div>
</div>

What am I doing wrong? I am happy to provide more information if needed.

Thanks

[ekwoka]

What is the actual error?

Why is this function defined like this?

Are you calling Alpine.start() in the head of the document?

[fpolli]

What is the actual error?

"Uncaught ReferenceError: myFunction is not defined"

Why is this function defined like this?

That's how it is done in the example in the docs

Are you calling Alpine.start() in the head of the document?

Yes, this is the head of the js entry point for the page

import Alpine from 'alpinejs'
import collapse from '@alpinejs/collapse'
import mask from '@alpinejs/mask'
import focus from '@alpinejs/focus'
import Precognition from 'laravel-precognition-alpine';
import axios from 'axios';

window.axios = axios.create();

window.axios.defaults.headers.common['X-Requested-With'] = 'XMLHttpRequest';

Alpine.plugin(collapse)
Alpine.plugin(mask)
Alpine.plugin(focus)

window.Alpine = Alpine

Alpine.plugin(Precognition);

Alpine.start()

The error in question comes in at stage 3 of a multi-stage form where everything else is working so far.

Thanks!

[SimoTod]

If you are inserting the script tag dynamically, you will not be able to call it in that way as a global function.

It's not the way you should do it, your state and functions should be defined in your component, either in x-data or in Alpine.data.