I would like to organize javascript code in modules in Blazor.

I followed some javascript tutos on this topic, but it is not to working in blazor.

Here is a simple example.
Starting from a blazor template, I have added 2 js files.

main.js contains:

function Increment(value) {
value++;
DisplayVal(value);
return value;}

module1.js contains:

function DisplayVal(value) {
console.log("The value is " + value);}

In the counter page I have added
@inject IJSRuntime JS
and

private async Task IncrementCount()
{
    //currentCount++;
    currentCount = await JS.InvokeAsync<int>("Increment", currentCount);
}

In the index.html I have added

<script src="/Scripts/main.js" autostart="false"></script>
<script src="/Scripts/module1.js" autostart="false"></script>

So far everything is working.

Now I want to convert module1.js in a module.
I add the export tag

export function DisplayVal(value) {
    console.log("The value is " + value);
}

In main. js I add

import { DisplayVal } from "./module1.js"

And in index.html I change as follows:

<script type="module" src="/Scripts/main.js" autostart="false"></script>
<!--<script src="/Scripts/module1.js" autostart="false"></script>-->

Now I get the followin error:

How can I make it work?