problems working w react + babel

[geddski]

I'm trying to get this to compile when using react + babel + webpack. I ran the create-react-app starter tool, then npm run eject so I could modify the config.

Then changing my webpack config like so:

loaders: [
   {
        test: /\.js$/,
        include: paths.appSrc,
        loaders: [
          'babel?' + JSON.stringify(require('./babel.dev')),
          'cssx-loader'
        ]
  }
]

But the compiler fails:

Any ideas I could try?

[geddski]

React component code if it helps:

import React, { Component } from 'react';
import logo from './logo.svg';
import CSSX from 'react-cssx';

class App extends Component {
  render() {
    return (
      <CSSX styles={ this.css() }>
        <h1>Title styled with <i>CSSX</i></h1>
      </CSSX>
    );
  }

  css() {
    // var color = '#BADA55';

    return (
      <style>
        h1 {
          color: blue;
        }
      </style>
    );
  }

}

export default App;

[krasimir]

@geddski can we try placing the cssx-loader first. Babel should run after it.

loaders: [
   {
        test: /\.js$/,
        include: paths.appSrc,
        loaders: [
          'cssx-loader',
          'babel?' + JSON.stringify(require('./babel.dev')),
        ]
  }
]