Unexpected token export when used with Create-react-app

[luojxxx]

Hi! I'm trying to use this nice module, but for some reason this module is hitting a unexpected token export when I try to import the library (after a standard npm install) with:

import autoScroll from 'dom-autoscroller';

I found a way to make it work by moving the dom-autoscroller.js into my src and then referencing it with:
import autoScroll from './dom-autoscroller';

Just wanted to let you know and see if you're getting the same behavior.

[hollowdoor]

I haven't been using react. There's another pull request I have to merge. After I get that merged, and published I'll take a look.

Could you help me with some more info?

What transpiler and/or build tool are you using? A transpiler can be finicky on some codes. Also some transpiler settings reference different fields in the package.json too.

Could you post the error that printed out?

[luojxxx]

It's weird, the unexpected token export moved around. Before it was at the end of the bundle.js at module.export, but with the most vanilla create-react-app (I use it as a test harness) the error shows up under index.js in iselement module at the export default function.

var _typeof = typeof Symbol === "function" && typeof Symbol.iterator === "symbol" ? function (obj) { return typeof obj; } : function (obj) { return obj && typeof Symbol === "function" && obj.constructor === Symbol ? "symbol" : typeof obj; };

/**
 * Returns `true` if provided input is Element.
 * @name isElement
 * @param {*} [input]
 * @returns {boolean}
 */
export default function (input) {
  return input != null && (typeof input === 'undefined' ? 'undefined' : _typeof(input)) === 'object' && input.nodeType === 1 && _typeof(input.style) === 'object' && _typeof(input.ownerDocument) === 'object';
}


//////////////////
// WEBPACK FOOTER
// ./~/iselement/module/index.js
// module id = 277
// module chunks = 0

As for the transpiler and build tool, it's exactly just what create-react-app gives you. This tool is created by the react team at facebook, and it essentially gives you a zero-configuration way of getting up and running with react, es6, local serving of files, browser reload, etc. Most packages install and are importable without an issue, which is why I wanted to bring it up.

[hollowdoor]

Oh ok. I see what you mean. Looking at create-react-app I see that they are using Babel.

I think I know how to fix this. Should be done by the weekend.

The dependency tree in dom-autoscroller is quite deep. Some strange behaviors have appeared because of this, and something similar has happened in another project I'm working on.

[luojxxx]

Thanks a lot for patching so quickly! I'm glad I bought it up, hopefully it helps fix a nasty little bug :)

[hollowdoor]

If I think I know how to fix a bug I like to squash it as quick as possible. Maybe that's me compensating for things I don't know. Like that long standing mac bug.

This should be fixed. Reopen if the issue continues. There might be quirks I missed.

[jeffal]

Hi, I am still experiencing this bug. Can we reopen?

I've also tried moving dom-autoscroller.js into my src, as stated above, and this is not working either.

[hollowdoor]

Reopening. Forgive me for asking. Are you using the latest 2.3.0 version? The fix for this was back at 2.2.8 so maybe something has changed since then.

The original problem was caused by a module level bundle bug. 6e50397

Are you also using Create-react-app?

@luojxxx Are you still having this issue, or has it cropped up again?

[jeffal]

@hollowdoor I tested the latest 2.3.0 and 2.2.8 versions. I am not using Create-react-app per se, but have a similar setup using Storybook.

I will setup a clean env using Create-react-app and the latest 2.3.0 version and see if that works. Thank you!

[hollowdoor]

Ok. If the problem persists, or not let me know. If it does please post any applicable error outputs from transpilation.

[hollowdoor]

@jeffal Could you look at the version of dom-set in your node_modules folder? dom-set is the module importing the iselement module. This is mostly a sanity check on something that just occurred to me. I have caret range set on the semantic version of that module. So I'm not sure, but dom-autoscroller might be pulling in an old version.

[luojxxx]

@hollowdoor Yeah I actually just started to try to use this module again, and I'm still getting the same bug. Using create-react-app and the traceback points to this spot in particular at line export default function (input) {:

var _typeof = typeof Symbol === "function" && typeof Symbol.iterator === "symbol" ? function (obj) { return typeof obj; } : function (obj) { return obj && typeof Symbol === "function" && obj.constructor === Symbol ? "symbol" : typeof obj; };

/**
 * Returns `true` if provided input is Element.
 * @name isElement
 * @param {*} [input]
 * @returns {boolean}
 */
export default function (input) {
  return input != null && (typeof input === 'undefined' ? 'undefined' : _typeof(input)) === 'object' && input.nodeType === 1 && _typeof(input.style) === 'object' && _typeof(input.ownerDocument) === 'object';
}

/*****************
 ** WEBPACK FOOTER
 ** ./~/iselement/module/index.js
 ** module id = 699
 ** module chunks = 0
 **/

[hollowdoor]

I decided to nuke the import of iselement for version 2.3.1. The new version is published to npm.

Hopefully this is fixed now. My tests are working. Please let me know how things go on your end.

Also elsewhere in some other project I remember reading that babel-preset-2015 has to be added to consume export syntax. My build process uses rollup only so that's why mine always works in spite of yours not working.

I don't know what exactly is wrong. It could be no 2015 preset for building a script file, or something else. I tried to look at create-react-app, but couldn't find what might be causing this. In one of their build files I didn't see the 2015 preset, but their hierarchy is so convoluted I could be looking at the wrong file.

[hollowdoor]

@eeubank Seems to have found the problem, and a solution over here #23 (comment)

I'm still going to keep the latest changes until iselement is fixed.