`onmouseenter` event not working

[rare rampart]

I am trying to set up a simple animation using typescript. I am importing my function like this (utils is a ts file)

<script>
  import {textEffect} from '../../public/scripts/utils';
  console.log(textEffect);
</script>

then I am trying to call this function on the onmouseenter event

<div class="image-grid-item-overlay" onmouseenter="textEffect(this)">

but i get the error, that my function is not defined

Uncaught ReferenceError: textEffect is not defined
    onmouseenter http://127.0.0.1:3000/:1

Full code for reference

<script>
    import {textEffect} from '../../public/scripts/utils';
    console.log(textEffect);
</script>

<div class="image-grid">
    {images.map((item) => (
        <div class="image-grid-item">
            <img src={item.src} alt={item.title}>
            <div class="image-grid-item-overlay" onmouseenter="textEffect(this)">
                <div class="image-grid-item-overlay-text">
                    <h4 class="text-effect" data-text={item.title}>{item.title}</h4>
                    <span class="text-effect" data-text={item.subtitle}>{item.subtitle}</span>
                </div>
            </div>
        </div>
    ))}
</div>

Sorry if this is a beginner question, i was following this
https://www.w3schools.com/jsref/tryit.asp?filename=tryjsref_onmouseenter

The same thing happens, when i am importing the entire file and when i am creating a wrapper method for textEffect inside the script tag

[dire obsidian]

Can you check if this import is working correctly? Does it appear in the Network panel inside DevTools? It seems to me that the relative URL import might not work as you're expecting. This import will be processed client-side, so the import URL needs to take into account the URL your browser is rendering, not the path your Astro file is inside the project.

[rare rampart]

i can but it finds the function (output from the console.log)

and here is the response from the network tab

and utils itself is also beeing loaded

<script>
    import {textEffect} from '../../public/scripts/utils';
    console.log(textEffect);

    function test() {
        console.log('a');
    }
</script>

<div class="image-grid">
    {images.map((item) => (
        <div class="image-grid-item">
            <img src={item.src} alt={item.title}>
            <div class="image-grid-item-overlay" onmouseenter="test()">
                <div class="image-grid-item-overlay-text">
                    <h4 class="text-effect" data-text={item.title}>{item.title}</h4>
                    <span class="text-effect" data-text={item.subtitle}>{item.subtitle}</span>
                </div>
            </div>
        </div>
    ))}
</div>

even this produces the same error

[dire obsidian]

Ok, so maybe it's related to Astro processing <script> tags and putting them as <script type="module"> in the final HTML. I found a Stackoverflow thread that seems to be related to this and your issue: https://stackoverflow.com/questions/49338193/how-to-use-code-from-script-with-type-module

If I understood it correctly, you need to explicitly set the function you want to use as onmouseenter callback as a property of the window object, like this inside the script: window.test = test

[rare rampart]

ok ty that seems to work

i just did this in my main layout to have access to it everywhere

// @ts-ignore
window.textEffect = textEffect

a bit ugly with the @ts-ignore, but it works

thanks for your help 👍