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

javascript es6-modules
kofifus picture kofifus · Jun 11, 2017 · Viewed 8.7k times · Source

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

pid picture pid · Jun 11, 2017

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

As a proof try this:

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

Reload and you'll see the extendion js or test is completely arbirary, as long as you specify it in the export.

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

Related questions

Is it possible to import modules from all files in a directory, using a wildcard?

With ES6, I can import several exports from a file like this: import {ThingA, ThingB, ThingC} from 'lib/things'; However, I like the organization of having one module per file. I end up with imports like this: import ThingA from …

Read More
How can I alias a default import in JavaScript?

Using ES6 modules, I know I can alias a named import: import { foo as bar } from 'my-module'; And I know I can import a default import: import defaultMember from 'my-module'; I'd like to alias a default import and I had …

Read More
Using import fs from 'fs'

I want to use import fs from 'fs' in JavaScript. Here is a sample: import fs from 'fs' var output = fs.readFileSync('someData.txt') console.log(output) The error I get when I run my file using node main.js …

Read More