Add note about non ES6 usage

[nick]

I initially tried using the following code which didn't work:

var Spring = require('react-motion');

[chenglou]

That's because I used webpack's bundling of requires rather than babel's. Your Spring is exposed under require('react-motion').default. If it was babel it'd have automatically added a line to make it work. Related: microsoft/TypeScript#2719

Same problem when you include it as a script tag. A bit annoying. For now the above method works but I'll look into whether webpack can do this too. I use webpack's require because for some reason, if I directly export UMD from babel, webpack doesn't know how to expose a Spring afterward. Maybe a bundling expert can help me with this here.

[chenglou]

I'm not explaining this very well lol. @nkbt probably knows this better than I do.

[nkbt]

Since it is all react anyways, isn't it better to simply transform everything as separate files with babel and not use webpack? Bower is another story, but who actually use it these days? If you still wish to publish for bower, make an additional build.

[chenglou]

Right, the only reason why I'm even bundling with webpack is for bower support. Thought it was convenient that I can kill two birds with one build. So, if we support bower/script tag, we still need that build, and that's the problem.

[chenglou]

#30

[nkbt]

Need 2 builds. Bower, sigh

[nkbt]

I'm surprised to see react ppl using bower

[chenglou]

I've gradually removed bower support for my other repos. But to be fair, maybe we're a bit in an echo chamber here. Some friends the other day told me they were still using script tags. Dunno about the intersection of people using bower/script tag and those using react-motion

[nkbt]

I can fix this stuff
On Jul 14, 2015 8:24 AM, "Nikita Butenko" nik@butenko.me wrote:

I'm surprised to see react ppl using bower

[nkbt]

Worst that you have to keep build artifact in repo for bower.

[chenglou]

^ I know... that was one of the reasons I didn't want it. Lemme ask on Twitter or something.

[chenglou]

Yeah, let's support it, for now...

[gaearon]

This actually seems correct to me.

react-motion export is an ES6 module, so it has Spring as the default export, and some other named exports. It's not a bug or a mistake—it's just the way ES6 exports work.

If you don't want that behavior, you can go back to using module.exports = Spring, but then you'd have to change other named exports to be statics on Spring.

Not a Webpack issue, is it?

[gaearon]

Even Babel can't “make it work” on the export side.

Babel does “interop import” on the import side: if you import an ES5-style module from Babel, it will “pretend” it has a default export.

But it can't turn an ES6 module into something consumable by ES5 code without .default because that's just the spec.

[chenglou]

It's not a mistake, but Babel goes a step further and does

exports["default"] = test;
module.exports = exports["default"];

After which you can use var Spring = require('react-motion') directly.

You know what, maybe there shouldn't be a default export for this library?

[gaearon]

Oh, you're right.
But let's make Spring named export then? Problem solved :-)

[chenglou]

We can have the excuse that I might expose a Decay component, heh

[gaearon]

After all it's not just one component..
And people can write

import { Spring } from 'react-motion'

and

var Spring = require('react-motion').Spring

and everyone's happy

[gaearon]

You already have a TransitionSpring so it's fair deal now I think

[nkbt]

Okay, the mystery of the Century revealed. This is why people still use bower - Rails! Going to explore some ways to support bower without checking in pre-built code into a repo.

I'll make a PR if I come up with some reasonably good solution.