How to import "old" ES5 code in ES6

Question

I have an ES6 application (with Babel 6.5 and Webpack) and it successfully imports my modules like this:

import $ from 'jquery';

I wanted to install https://github.com/robflaherty/riveted/blob/master/riveted.js (a plugin for Google Analytics), but as you can see, the code doesn't have something like module.exports = ..., it only defines a global variable riveted, but it has an apparently valid package.json pointing to riveted.js.

So doing something like

import riveted from 'riveted'
riveted.init();

throws an error:

_riveted2.default.init is not a function

import riveted from 'riveted'
riveted.init();

import 'riveted'
riveted.init();

throws an error:

riveted is not defined

import * as riveted from 'riveted'
riveted.init();

throws an error:

riveted.init is not a function

How can I access riveted's init() function?

Solution

You can use the webpack exports loader:

var riveted = require("exports?riveted!riveted")

See the shiming modules overview for details

Comments

[thomaux]

Try doing import * as riveted from 'riveted'

[slebetman]

Are you trying to run this in a browser?

[grssnbchr]

Yes @slebetman. @Anzeo thanks but this gives me a yet slightly different error riveted.init is not a function. By the way, riveted is correctly "installed" into node_modules/riveted.

[CodingIntrigue]

@wnstnsmth Looks like you need to use the exports-loader to shim the module as it's not properly exported

[slebetman]

Then just include riveted.js in a script tag before the rest of your script. There is no need to require. It is already browser code, not node.js code that you need to make work in a browser.

[Isidro Martínez]

did you tried with import { default as es6Module } from 'es5Module'; ?

[gonzofish]

this was a HUGE help to me in a project. thank you so much.