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

Error: Missing class properties transform. #2729

Closed
kiki-le-singe opened this Issue Nov 1, 2015 · 13 comments

Comments

Projects
None yet
9 participants
@kiki-le-singe

kiki-le-singe commented Nov 1, 2015

Hello,

I get this error message in my terminal:
Module build failed: SyntaxError: /path/.../.../projectName/src/components/myComponent.jsx: Missing class properties transform.

 class MyComponent extends Component {
>  handleChange = (e) => {
   ^
      // My code here ...
   }

  ...
}

I use webpack:

    loaders: [
      {
        test: /\.js[x]?$/,
        loaders: ['react-hot', 'babel?presets[]=es2015,presets[]=react,presets[]=stage-0&cacheDirectory', 'eslint'],
        exclude: /node_modules/
      },
      ...
   ]

package.json:

  "devDependencies": {
    "babel-core": "^6.0.15",
    "babel-loader": "^6.0.0",
    "babel-preset-es2015": "^6.0.15",
    "babel-preset-react": "^6.0.15",
    "babel-preset-stage-0": "^6.0.15",
    ...
  }

Thanks for your help

@shuhei

This comment has been minimized.

Show comment
Hide comment
@shuhei

shuhei Nov 1, 2015

Member

The order of plugins matters. What if it's react, stage-0, es2015 or stage-0, react, es2015?

Member

shuhei commented Nov 1, 2015

The order of plugins matters. What if it's react, stage-0, es2015 or stage-0, react, es2015?

@kiki-le-singe

This comment has been minimized.

Show comment
Hide comment
@kiki-le-singe

kiki-le-singe Nov 1, 2015

Ok thanks I have tried but it doesn't work. I get this error:
Module build failed: TypeError: /path/.../src/components/MyComponent.jsx: Property right of AssignmentExpression expected node to be of a type ["Expression"] but instead got "Decorator"

kiki-le-singe commented Nov 1, 2015

Ok thanks I have tried but it doesn't work. I get this error:
Module build failed: TypeError: /path/.../src/components/MyComponent.jsx: Property right of AssignmentExpression expected node to be of a type ["Expression"] but instead got "Decorator"

@shuhei

This comment has been minimized.

Show comment
Hide comment
@shuhei

shuhei Nov 2, 2015

Member

Ah, decorators are currently broken. #2645

Member

shuhei commented Nov 2, 2015

Ah, decorators are currently broken. #2645

@kiki-le-singe

This comment has been minimized.

Show comment
Hide comment
@kiki-le-singe

kiki-le-singe Nov 2, 2015

hum ok. I'll wait patiently that it be fixed.
Thanks :)

kiki-le-singe commented Nov 2, 2015

hum ok. I'll wait patiently that it be fixed.
Thanks :)

@hzoo

This comment has been minimized.

Show comment
Hide comment
@hzoo

hzoo Nov 2, 2015

Member

Ok closing since it's the other issue

Member

hzoo commented Nov 2, 2015

Ok closing since it's the other issue

@hzoo hzoo closed this Nov 2, 2015

@optimistiks

This comment has been minimized.

Show comment
Hide comment
@optimistiks

optimistiks Nov 2, 2015

I ran into this issue as well.

ERROR in ./src/common/components/App/App.jsx
Module build failed: SyntaxError: /path.../src/common/components/App/App.jsx: Missing class properties transform.

  4 | class App extends React.Component {
  5 | 
> 6 |     contextTypes = {
    |     ^
  7 |         history: React.PropTypes.object
  8 |     };
  9 | 

Run npm update, got the latest version of everything.

Settings:

{
                test: /\.jsx?$/,
                exclude: /node_modules/,
                loader: 'babel',
                query: {presets: ['react', 'stage-0', 'es2015'], cacheDirectory: true}
}

I tried to play with preset ordering, but with no effect.

optimistiks commented Nov 2, 2015

I ran into this issue as well.

ERROR in ./src/common/components/App/App.jsx
Module build failed: SyntaxError: /path.../src/common/components/App/App.jsx: Missing class properties transform.

  4 | class App extends React.Component {
  5 | 
> 6 |     contextTypes = {
    |     ^
  7 |         history: React.PropTypes.object
  8 |     };
  9 | 

Run npm update, got the latest version of everything.

Settings:

{
                test: /\.jsx?$/,
                exclude: /node_modules/,
                loader: 'babel',
                query: {presets: ['react', 'stage-0', 'es2015'], cacheDirectory: true}
}

I tried to play with preset ordering, but with no effect.

@MacgyverMartins

This comment has been minimized.

Show comment
Hide comment
@MacgyverMartins

MacgyverMartins Nov 6, 2015

Same problem here.
I build an app with babelify.
My code:

class Home extends React.Component {
  state = {
    numbers: 1,
  }

  render() {
    return (
      <div>
        <p>{this.state.numbers}</p>
      </div>
    );
  }
}

And in my gulpfile, the task is:

...
    browserify({
        entries: [filePath],
        extensions: extensions,
        debug: env === 'dev'
      })
      .transform("babelify", {
        presets: [
          { plugins: ["syntax-class-properties"] },
          "es2015",
          "react"
        ]
      })
      .bundle()
...

Sorry my bad english

MacgyverMartins commented Nov 6, 2015

Same problem here.
I build an app with babelify.
My code:

class Home extends React.Component {
  state = {
    numbers: 1,
  }

  render() {
    return (
      <div>
        <p>{this.state.numbers}</p>
      </div>
    );
  }
}

And in my gulpfile, the task is:

...
    browserify({
        entries: [filePath],
        extensions: extensions,
        debug: env === 'dev'
      })
      .transform("babelify", {
        presets: [
          { plugins: ["syntax-class-properties"] },
          "es2015",
          "react"
        ]
      })
      .bundle()
...

Sorry my bad english

@babel-bot

This comment has been minimized.

Show comment
Hide comment
@babel-bot

babel-bot Sep 7, 2016

Collaborator

Comment originally made by @rymohr on 2015-12-16T02:09:23.000Z

Changing the order fixed things for me. Had to use presets: ["es2015", "react", "stage-0"].


Comment originally made by @nathanhere on 2016-01-27T05:00:42.000Z

Bless your soul @rymohr, I was withering away trying to find out why this was happening. Behold, your answer worked!

Collaborator

babel-bot commented Sep 7, 2016

Comment originally made by @rymohr on 2015-12-16T02:09:23.000Z

Changing the order fixed things for me. Had to use presets: ["es2015", "react", "stage-0"].


Comment originally made by @nathanhere on 2016-01-27T05:00:42.000Z

Bless your soul @rymohr, I was withering away trying to find out why this was happening. Behold, your answer worked!

@hzoo

This comment has been minimized.

Show comment
Hide comment
@hzoo
Member

hzoo commented Sep 8, 2016

brolin added a commit to brolin/rekit that referenced this issue Nov 17, 2016

oharsta added a commit to OpenConext/OpenConext-pdp that referenced this issue Aug 18, 2017

oharsta added a commit to OpenConext/OpenConext-pdp that referenced this issue Sep 1, 2017

@hdngr

This comment has been minimized.

Show comment
Hide comment
@hdngr

hdngr Nov 22, 2017

This is broken again in babel 7...

.babelrc:

{
  "presets": [
    "@babel/es2015",
    "@babel/react",
    "@babel/stage-0"
  ],
  "plugins": [
    ["@babel/plugin-transform-runtime", {
      "helpers": false,
      "polyfill": false,
      "regenerator": true,
      "moduleName": "@babel/runtime"
    }],
    ["@babel/plugin-transform-classes", { "spec": true }]
  ]
}

hdngr commented Nov 22, 2017

This is broken again in babel 7...

.babelrc:

{
  "presets": [
    "@babel/es2015",
    "@babel/react",
    "@babel/stage-0"
  ],
  "plugins": [
    ["@babel/plugin-transform-runtime", {
      "helpers": false,
      "polyfill": false,
      "regenerator": true,
      "moduleName": "@babel/runtime"
    }],
    ["@babel/plugin-transform-classes", { "spec": true }]
  ]
}

@loganfsmyth

This comment has been minimized.

Show comment
Hide comment
@loganfsmyth

loganfsmyth Nov 22, 2017

Member

@hdngr How are you calling Babel? babel-loader? The CLI? Do you happen to have any config options anywhere else?

On an unrelated note, mind if I ask why you're passing regenerator: true and moduleName: "@babel/runtime"? Those are the default values, so passing them is potentially extra noise in your config.

Member

loganfsmyth commented Nov 22, 2017

@hdngr How are you calling Babel? babel-loader? The CLI? Do you happen to have any config options anywhere else?

On an unrelated note, mind if I ask why you're passing regenerator: true and moduleName: "@babel/runtime"? Those are the default values, so passing them is potentially extra noise in your config.

@hdngr

This comment has been minimized.

Show comment
Hide comment
@hdngr

hdngr Nov 22, 2017

@loganfsmyth migrating from earlier version of babel, and using babel-register before calling server (node environment).

Thanks for pointing that out. I've left it in so I can more easily get to the bottom of whatever is going on.

hdngr commented Nov 22, 2017

@loganfsmyth migrating from earlier version of babel, and using babel-register before calling server (node environment).

Thanks for pointing that out. I've left it in so I can more easily get to the bottom of whatever is going on.

@rsolomon

This comment has been minimized.

Show comment
Hide comment
@rsolomon

rsolomon Dec 5, 2017

@hdngr you're using the wrong plugin, at least for the error referred to in this thread (Missing class properties transform.). You should be using @babel/plugin-proposal-class-properties

rsolomon commented Dec 5, 2017

@hdngr you're using the wrong plugin, at least for the error referred to in this thread (Missing class properties transform.). You should be using @babel/plugin-proposal-class-properties

@ryan-roemer ryan-roemer referenced this issue Jan 24, 2018

Merged

es-build #4

@lock lock bot added the outdated label May 3, 2018

@lock lock bot locked as resolved and limited conversation to collaborators May 3, 2018

Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.