Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Decorators with class properties cause Babel's classCallCheck to fail #52

Open
damonmaria opened this issue Oct 27, 2016 · 1 comment
Open

Comments

@damonmaria
Copy link

I have the following code:

import React, from 'react'
import { observer } from 'mobx-react'

@observer
class OrgsPage extends React.Component {
  render = () =>
    <div>Hello</div>
}
export default OrgsPage

When I try and use this as a component in React I get:

babel-runtime.js?hash=71fe7d0…:108 Uncaught TypeError: Cannot call a class as a function
    at classCallCheck (http://localhost:4000/packages/babel-runtime.js?hash=71fe7d0d01dc808e2a80cb0a7958fb31e46323d5:108:13)
    at Constructor.OrgsPage (http://localhost:4000/app/app.js?hash=7ba134c41c0997baa4644e0e7b2750d3c4341f2f:1794:37)
    at Constructor.render (http://localhost:4000/packages/modules.js?hash=58c8b0b77d6bd50615c786bc9f20afd954ec52db:129542:32)
    at Object.allowStateChanges (http://localhost:4000/packages/modules.js?hash=58c8b0b77d6bd50615c786bc9f20afd954ec52db:116825:15)
    at Reaction.<anonymous> (http://localhost:4000/packages/modules.js?hash=58c8b0b77d6bd50615c786bc9f20afd954ec52db:129440:44)
...

This does not happen if I do any of the following:

  • Remove @observer
  • Change the render method to be a normal method (not a class property)
  • Have render as a normal method and add in another class property under a different name

My .babelrc:

{
  "presets": [
    "react",
    "es2015",
    "stage-3"
  ],
  "plugins": [
    "transform-decorators-legacy",
    "transform-class-properties"
  ]
}

And (what I think is) relevant package.json:

    "babel-plugin-transform-decorators-legacy": "^1.3.4",
    "babel-preset-es2015": "^6.18.0",
    "babel-preset-react": "^6.16.0",
    "babel-preset-stage-0": "^6.16.0",

This was working for me, and then updated some of my npm packages (like babel-preset-es2015) and then it stopped working. But npm being npm I can't see to get my node_modules back into that state again to prove it's a change between 6.16.0 and 6.18.0 of babel-preset-es2015.

@zoecarver
Copy link

This seems to be working. I have a working repo here.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

2 participants