ES6 Modules have been around since ECMAScript 2015 (aka ES2015, ES6). When they were first introduced, we transpiled them somehow to ES5 via creation of a single
bundle.js file. This was usually done with npm module bundling tools such as Browserify or Webpack.
ES6 modules have been fully supported in Chrome since version 65. So why do we still get errors if we try and use the
Even though ES6 modules ARE fully supported in Chrome, we still have to tweak our code just a tad to make it work 100%. For small projects or “playgrounds” in which we don’t want to bother setting up Webpack configurations and using Babel to transpile our code from ES6 to ES5, for example, it’s way easier and faster than configuring Webpack or Browserify. Bear in mind, however, that it is still best practice for the time being to use module bundlers such as Webpack or Browserify along with transpilers such as Babel for production. Not all browsers behave the same or provide the same level of support!
So what do we have to do to make ES6 modules work without Webpack/Browserify/Babel? It’s very simple, really. In your
<script type="module" src="ES6-Node.js"></script>
import * as area from './calcArea.js';
import Book from './Book.js';
Normally, when using tools such as Webpack and Babel, there is no need to add the
.jsextension. However, when those tools are not present, it IS necessary to add
.js. Otherwise, the browser will not acknowledge the existence of imported files. These tweaks also permit the use of the export keyword as well. Nifty, right?
import not working in Chrome