'How to work with ES Modules in the browser? [duplicate]

This is my folder structure:

enter image description here

These are my files:

/* index.html */
<body>
  <h1>Modules</h1>
  <script type="module" src="./index.js"></script>
</body>

// index.js
import fruits from "./fruits";

console.log(fruits);

// fruits.js
const arr = ["Mango", "Appple", "Banana", "Guava"];

export default arr;

Everything looks fine to me, still I am getting the error: net::ERR_ABORTED 404 (Not Found).



Solution 1:[1]

Try import fruits from "./fruits.js";

Instead of import fruits from "./fruits";

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1