using javascript modules in Blazor

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 JSand

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?