Skip to content

Does ES6 import/export need “.js” extension?

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

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.