React-datepicker: Unexpected token: name (onClickOutside)

[tadjohnston]

Getting an error on webpack production build.

Unexpected token: name (onClickOutside) [./node_modules/react-onclickoutside/index.js:92,0]

It seems to be fixed in react-onclickoutside version 6.1.0 as mentioned here.

https://github.com/Pomax/react-onclickoutside/issues/195

I noticed this has recently been downgraded, but version 0.57.0 won't build for me and others.

[martijnrusschen]

I released 0.58 which should fix this problem I believe.

[martijnrusschen]

We downgraded from 6.1 to 6.0 to fix this problem.

[martijnrusschen]

Oh wait, sorry my bad. 0.57 should fix the issue based on https://github.com/Hacker0x01/react-datepicker/pull/1083. Can you describe what's not working for you?

[tadjohnston]

I'm not sure how much details I can give, but what I can tell you is that using 0.54 works fine. When I bump to 0.57 it breaks and this is only happening when running a webpack production build.

Node: 8.1.2
Webpack: 3.8.1

Running webpack in development mode (NODE_ENV=development) seems to run just fine. Here is the full error:

[client] container-b8552c-ad11534beeb7ba0bb4d4.js from UglifyJs
Unexpected token: name (onClickOutside) [./node_modules/react-onclickoutside/index.js:92,0][container-b8552c-ad11534beeb7ba0bb4d4.js:1603,33]

Here is the uglify config:

  new webpack.optimize.UglifyJsPlugin({
    minimize: false,
    sourceMap: true,
    compress: {
      warnings: false,
      pure_getters: true,
      screw_ie8: true,
      comparisons: false,
    },
  }),

[josegers]

We have the same problem as tadjohnston. The problem only occurs during the webpack production build.

[amarinov]

@martijnrusschen Seems to me this is a different problem you've fixed with downgrading react-onclickoutside to 6.0.0.

The problem I, @tadjohnston and @josegers have is that, ./node_modules/react-onclickoutside/index.js in v6.0.0 is not transpiled and has native ES6 class defined. This is sth that has been fixed in react-onclickoutside v.6.1.0, but you're using a lower version.

[firec0der]

I'm experiencing the same issue with the create-react-app stack. It can't build my application, fails with the message:

[roryza]

+1 here. Reverting to 0.54 seems to be fine. (with react 16 and react-onclickoutside 6.6.2)

[firec0der]

Reverting to 0.56.0 works for me.

[rafeememon]

This is probably fixed by #1091, can anyone pull down master and give it a shot before we cut a release?

[aniruddhashevle]

@rafeememon : Yes I'm no it!

[aniruddhashevle]

@rafeememon : I've followed the below process.

cd myproject/node_modules
git clone https://github.com/Hacker0x01/react-datepicker.git
cd ..
npm start // it works fine
npm run build // gives below error

error

 ERROR in formFlowStructure.bundle.js from UglifyJs
Unexpected token: name (onClickOutside) [formFlowStructure.bundle.js:48997,33]

[pawarvijay]

It works fine with react v16, react-datepicker v0.56.

[rafeememon]

I'm pretty out of the loop here but maybe @Andarist knows what might be going on?

[Andarist]

@rafeememon it seems that this was fixed by recently merged in https://github.com/Hacker0x01/react-datepicker/pull/1091 , ofc I might be wrong, as I didn't dig into the issue properly, but from what I read here it is highly possible

The only thing left to do is releasing a new version of react-datepicker

[martijnrusschen]

I'm a bit hesitant of releasing a new version, but I'll cut a patch release so we can give people access to the latest version to play with.

[Andarist]

Oh i didn't mean a major new version, just an updated one - patch, minor, whatever :P

[JustFly1984]

I have same issue while building to production with react16
It is a bummer

[rafeememon]

@aniruddhashevle I'm not sure that's enough to run the new version. You'll also need to pull in the latest version of react-onclickoutside.

[siarheipashkevich]

I have the same issue while building to production with react 15.6.2

[hellojebus]

I was also having this issue with 0.57, production build handled by Netlify.

Downgraded to 0.56 to temporarily fix this issue.

[martijnrusschen]

Can you try 0.58.0?

[firec0der]

@martijnrusschen works for me 🎉

[bavicj]

@martijnrusschen works for me as well

[tadjohnston]

Confirmed it's working in 0.58.0. Thanks for getting a fix out so quickly @martijnrusschen. Much appreciated.

[rafeememon]

Great, let's close this out but let us know if there are any lingering issues.

[josegers]

Confirmed working for us as well.

[hellojebus]

0.58 is working! Thanks!

[aniruddhashevle]

@rafeememon : v0.58 is working well for build! Thanks.

[oskar-skuteli]

Unfortunatelty v0.58 has a https://github.com/Hacker0x01/react-datepicker/issues/1003 problem again.

[Andarist]

@oskar-skuteli in what setup does the problem occur? When it comes to the mentioned issue - the codepen's dependencies are poorly configured. Here is a working one - https://codepen.io/anon/pen/qVbamX

You just need to add https://unpkg.com/[email protected]/dist/react-onclickoutside.min.js before react-datepicker.

[oskar-skuteli]

@Andarist I will try to provide a sample project as soon as possible.
It's a react-boilerplate app with webpack v2.1.0-beta.25 and HMR
The OnClickOutside plugin either causes Uglify error when building production (v0.57 of react-datepicker) OR fails in runtime with (0 , _reactOnclickoutside2.default) is not a function like in https://github.com/Hacker0x01/react-datepicker/issues/975 in v0.56 and v0.58
Any help will be greatly appreciated.

[Andarist]

Ok, it seems that react-datepicker has really outdated build setup. It should get updated like a lot!

Temporary fix here - https://github.com/Hacker0x01/react-datepicker/pull/1109 , need to be tested and checked but imho should work right away.

[martijnrusschen]

Thanks for looking into this, any help upgrading the set up would be appreciated.

[Andarist]

I might try to do this later, need to assess the required work though, however it should be pretty straightforward - I've done it already over dozens of time ;)

[martijnrusschen]

Sweet :) I just merged the temp fix. I’ll try to run a release tonight as
well.
On Thu, 2 Nov 2017 at 19:41, Mateusz Burzyński [e-mail]
wrote:

I might try to do this later, need to assess the required work though,
however it should be pretty straightforward - I've done it already over
dozens of time ;)

—
You are receiving this because you were mentioned.

Reply to this email directly, view it on GitHub
https://github.com/Hacker0x01/react-datepicker/issues/1089#issuecomment-341520146,
or mute the thread
https://github.com/notifications/unsubscribe-auth/ABWNKAJq3qVbvRWdoedrL9YiB3IGQVy_ks5sygzwgaJpZM4QGPym
.

[oskar-skuteli]

Guys, thanks a lot for prompt reaction.
However I still can't import the datepicker correctly in my environment.
From what I see onClickOutside doesn't get the _esModule property set to true, so it's being wrapped by _interopRequireDefault and becomes unusable.
@Andarist do you have any idea what may be causing this?

[Andarist]

Taken from the react-onclickoutside source code:

exports.__esModule = true;
exports.IGNORE_CLASS_NAME = undefined;
exports.default = onClickOutsideHOC;

// ...
var IGNORE_CLASS_NAME = exports.IGNORE_CLASS_NAME = 'ignore-react-onclickoutside';

You would have to share sample repository with the issue reproduced so I can check it out.

[oskar-skuteli]

I created a sample repository showing a problem.
It is based on react-boilerplate 3.2.0.
I commited it with react-datepicker v0.57 which works ok in dev mode, but as we know doesn't compile with webpack's -p flag.
When you bump datepickers version to v.058 or v0.59 and then npm install and npm start it will fail on react-onclickoutside plugin.
As far as I can see this is due to onClickOutside not being recognized as an esModule by webpack. But I can't figure out why it happens.
https://github.com/oskar-skuteli/datepicker-react-boilerplate-test
I need to add that I have a big project running in this webpack config with myriad of dependencies and there are no other problems with build.
When manually deleting es folder and module entry from package.json of react-onclickoutside I have similar errors with react-popper (also datepickers dependency), which makes me think the problem may be with the way react-datepicker imports dependencies and not with react-onclickoutside itself.

[Andarist]

Hm, I think it is just a commonjs / es interoperability problem. At the moment commonjs package with _interopRequireDefault (react-datepicker) requests es package (react-onclickoutside), but the es exports in the latter get transpiled by webpack itself (and not babel) and it seems it doesnt do it in babel compatible way.

Keep in mind that we are talking about some webpack@2-beta, I have no idea if newer versions are handling such scenario correctly and truth to be told - I just don't care.

I will just try in the weekend refactor react-datepicker's build setup so you dont land in such commonjs / es mismatch.

[Andarist]

@martijnrusschen how much are attached to the grunt here? I'd like to ditch it for most of the tasks.

[martijnrusschen]

@Andarist Not attached at all :) This is just a leftover from our buildstack as how it was designed 3 years ago. Feel free to remove anything you don't like.