Why does my ES6 module import fail with a 404 error in the browser when using relative paths?

<!-- BEGIN COPY / PASTE -->
        // Assuming you have a file structure like this:
        // /project
        // ├── index.html
        // ├── main.js
        // └── modules
        //     └── helper.js

        // In main.js
        import { helperFunction } from './modules/helper.js';

        helperFunction();
        <!-- END COPY / PASTE -->