react-datepicker: Unexpected token: name (onClickOutside)

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.

About this issue

  • Original URL
  • State: closed
  • Created 7 years ago
  • Reactions: 6
  • Comments: 42 (23 by maintainers)

Most upvoted comments

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

image

@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.

Can you try 0.58.0?

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.

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,
    },
  }),

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

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

Reverting to 0.56.0 works for me.

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

We downgraded from 6.1 to 6.0 to fix this problem.