I am trying to load the uuid module, which is a project dependency, inside a .html file in a project managed by webpack,
<script type="module">
import { v4 as uuidv4 } from "uuid";
window.uuidv4 = uuidv4;
console.log('uuidv4 ', uuidv4);
</script>
But this is failing with an error (index):1 Uncaught TypeError: Failed to resolve module specifier "uuid". Relative references must start with either "/", "./", or "../".
If I try to reference a specific js file relative to the html file, it works properly
<script type="module">
import myFunc from "./functions/myFunc.js";
window.uuidv4 = uuidv4;
console.log('uuidv4 ', uuidv4);
</script>
Why can't I call the dependency directly in the html, although if I load it directly from myFunc.js it works?
myFunc.js
import { v4 as uuidv4 } from "uuid";
console.log('uuidv4 ', uuidv4); // this works here
export default myFunc() {
console.log('Hello!');
}
