ES6 Bare Import: How to use, and when?

Question

ES6 allows us to use a new import syntax. Using it, we can import modules into our code, or parts of those modules. Examples of usage include:

// Import the default export from a module.
import React from 'react'; 

// Import named exports from a module.
import { Component, PropTypes } from 'react'; 

// Named import - grab everything from the module and assign it to "redux".
import * as Redux from 'react-redux'; 

But then, we also have this mystery:

import 'react';

It looks as though ES6 supports a bare import, as this is a valid import statement. However, if this is done, it seems as though there's no way to actually reference the module.

How would we use this, and why?

Answer 1

For side-effects. For example (untested, concept-only):

// debug-keypresses.js

document.addEventListener('keypress', evt => {
  console.log("KEYPRESS:", evt.which);
});

// Another file, the below line is called bare import
import 'debug-keypress' 

You don't care about any exports here; the mere importing of this file should set up logging of keypresses, so bare import is all you need.