Failed to load my own files as ES6-modules

8Observer8 commented 1 year ago

Failed to load my own files as ES6-modules: https://plnkr.co/edit/bjAl7TXmY9CzzQl5

External module works fine:

<body>
    <script async src="https://unpkg.com/es-module-shims@1.5.5/dist/es-module-shims.js"></script>

    <script type="importmap">
        {
            "imports": {
                "gl-matrix": "https://cdn.skypack.dev/gl-matrix@3.4.3"
            }
        }
    </script>

    <script type="module" src="src/main.js"></script>
</body>

main.js

import * as glMatrix from "gl-matrix";
console.log(glMatrix.mat4.create());

But my module doesn't work: Failed to load resource: the server responded with a status of 404

my-class.js


export default class MyClass {
    constructor() {
        console.log("My Class");
    }
}

main.js

import MyClass from "./my-class";
new MyClass();

8Observer8 commented 1 year ago

This only works:

import MyClass from "./my-class";
new MyClass();

if you add the ".js" extension:

import MyClass from "./my-class.js";
new MyClass();

For me, this is the solution.

ggoodman commented 1 year ago

I'm going to close this because as you noted, browser module resolution will never infer a file's extension. This is a convenience introduced by bundlers where the set of possible files satisfying a prefix can be discovered on the filesystem. On the web, the browser won't make a sequence of requests to attempt to 'find' a file matching the prefix in the specifier.

plnkr / feedback

Failed to load my own files as ES6-modules #569