How are non-ES6 node_modules imported?

[ruswerner]

I would like to do this:

import React from 'react';

However it gets compiled down to:

var React = require('react')["default"];

...which of course is undefined since that node module doesn't export "default".

Is there a way to use the ES6 syntax and have the compiled output drop the ["default"]?

[sebmck]

6to5 has a commonInterop module formatter which in 2.0.0 is going to be the default. You can pass this option to 6to5 like so:

browserify().transform(to5ify.configure({ modules: "commonInterop" }));

or

$ browserify -t [ 6to5ify --modules commonInterop ]

[ruswerner]

For those of you who find this later and want to know more... this is what I ended up with using Gulp:

...
var browserify = require('browserify');
var envify = require('envify');
var reactify = require('reactify');
var to5ify = require('6to5ify');
...

var bundler = browserify({
    basedir: __dirname,
    debug: (process.env.NODE_ENV === 'development'),
    entries: './src/client/client.js',
    cache: {},
    packageCache: {},
    fullPaths: watch
})
    .add(require.resolve("6to5/polyfill"))
    .transform(envify)
    .transform(to5ify.configure({
        modules: 'commonInterop'
    }))
    .transform(reactify);

[sebmck]

@ruswerner modules should be a string, not an array. I'm not even sure how that works if it somehow does.

[ruswerner]

@sebmck It certainly does work as an array:

when using

    .transform(to5ify.configure({
    }))

this

import React from 'react';

becomes this

var React = require('react')["default"];

---

Whereas when using this:

    .transform(to5ify.configure({
        modules: ['commonInterop']
    }))

it becomes this

var _interopRequire = function (obj) {
  return obj && (obj["default"] || obj);
};

var React = _interopRequire(require('react'));

---

Did I find a bug?

[ruswerner]

@sebmck OK. So I traced through the 6to5 code and you are correct in thinking how this could possibly work. It doesn't make sense, however in nodejs, this happens:

var hash = { commonInterop: 'yesplease' };
console.log(hash['commonInterop']); // prints yesplease
console.log(hash[['commonInterop']]); // also prints yesplease

I have been writing JavaScript for a long time and had no idea this works; it's either a typecasting bug, or something else about JS that makes no sense.

[sebmck]

Ah yeah, that'e make sense. It's type casting toString because only all
keys are strings.

On Thursday, 18 December 2014, ruswerner notifications@github.com wrote:

@sebmck https://github.com/sebmck OK. So I traced through the 6to5 code
and you are correct in thinking how this could possibly work. It doesn't
make sense, however in nodejs, this happens:

var hash = { commonInterop: 'yesplease' };
console.log(hash['commonInterop']); // prints yesplease
console.log(hash[['commonInterop']]); // also prints yesplease

I have been writing JavaScript for a long time and had no idea this works;
it's either a typecasting bug, or something else about JS that makes no
sense.

Reply to this email directly or view it on GitHub
#16 (comment).

Sebastian McKenzie