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

ES6 import/export need “.js” extension. There are clear instructions in node document:

1. Relative specifiers like './startup.js' or '../config.mjs'. They refer to a path relative to the location of the importing file. The file extension is always necessary for these.
2. This behavior matches how import behaves in browser environments, assuming a typically configured server.

https://nodejs.org/api/esm.html#esm_import_expressions