Why a module is shown connected but still not working?

November 20, 2021

Whenever I connect a JS module, in DevTools’ "Sources", the module is shown as connected.
However, the function that I try to run out of it, simply doesn’t work.

What can be done to run the function from the module?

function consoleLog () {
    console.log('The module is working')
}

export default consoleLog;

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script type="module" src="./module.js">
        import consoleLog from './module';
        consoleLog();
    </script>
</head>
<body>

</body>
</html>

>Solution :

Your problem is that you have code and an src attribute on your script tag, script tags should have one or the other. You also don’t have to create a script tag for your module if you import it in another module, like so:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script type="module">
        import consoleLog from './module.js';
        consoleLog();
    </script>
</head>
<body>

</body>
</html>