Does ES6 import/export need ".js" extension?

Question

I installed chrome beta - Version 60.0.3112.24 (Official Build) beta (64-bit)

In chrome://flags/ I enabled 'Experimental Web Platform features' (see https://jakearchibald.com/2017/es-modules-in-browsers)

I then tried:

<script type="module" src='bla/src/index.js'></script> 

where index.js has a line like:

export { default as drawImage } from './drawImage'; 

This refer to an existing file drawImage.js

what I get in the console is error in

GET http://localhost/bla/src/drawImage  

If I change the export and add ".js" extension it works fine.

Is this a chrome bug or does ES6 demands the extension in this case ?

Also webpack builds it fine without the extension !

Answer 1

The extension is part of the filename. You have to put it in.

As proof of this, please try the following:

• rename file to drawImage.test
• edit index.js to contain './drawImage.test'

Reload, and you'll see the extension js or test will be completely arbitrary, as long as you specify it in the export.

Obviously, after the test revert to the correct/better js extension.

Answer 2

No, modules don't care about extensions. It just needs to be a name that resolves to a source file.

In your case, http://localhost/bla/src/drawImage is not a file while http://localhost/bla/src/drawImage.js is, so that's where there error comes from. You can either add the .js in all your import statements, or configure your server to ignore the extension, for example. Webpack does the same. A browser doesn't, because it's not allowed to rewrite urls arbitrarily.