Not working with create-react-app

[Danilo-Araujo-Silva]

I'm trying to put this strategy to work with the facebook boilerplate create-react-app.
Unfortunally no sucess yet.

The problem I think should be simple but I created a detailed issue to describe the problem.

I tried the following:

create-react-app cssx-example

cd cssx-example

npm run eject

yarn add -D cssx-loader
yarn add react-cssx

Edited the file src/App.js from:

import React, { Component } from 'react';
import logo from './logo.svg';
import './App.css';

class App extends Component {
  render() {
    return (
      <div className="App">
        <div className="App-header">
          <img src={logo} className="App-logo" alt="logo" />
          <h2>Welcome to React</h2>
        </div>
        <p className="App-intro">
          To get started, edit <code>src/App.js</code> and save to reload.
        </p>
      </div>
    );
  }
}

export default App;

to:

import React, { Component } from 'react';
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: {{ color }};
      }
        h1 i {
        text-decoration: underline;
      }
      </style>
    );
  }
}

export default App;

Edited the file config/webpack.dev.config.js from:

  ...
  // Process JS with Babel.
  {
    test: /\.(js|jsx)$/,
    include: paths.appSrc,
    loader: require.resolve('babel-loader'),
    options: {
      
      // This is a feature of `babel-loader` for webpack (not Babel itself).
      // It enables caching results in ./node_modules/.cache/babel-loader/
      // directory for faster rebuilds.
      cacheDirectory: true,
    },
   ...

to:

   ...
   // Process JS with Babel.
   {
     test: /\.(js|jsx)$/,
     include: paths.appSrc,
     loaders: ['cssx-loader', require.resolve('babel-loader')]
   },
   ...

Then npm start

But I got the following error:

   Failed to compile.

   ./src/App.js
   Syntax error: Unexpected token, expected } (19:17)

     17 |           <style>
     18 |             h1 {
   > 19 |             color: {{ color }};
        |                  ^
     20 |           }
     21 |             h1 i {
     22 |             text-decoration: underline;

I tried some variations like:

loaders: [require.resolve('babel-loader'), 'cssx-loader']

and

// Process JS with Babel.
{
    test: /\.(js|jsx)$/,
    include: paths.appSrc,
    loader: require.resolve('babel-loader'),
    options: {

        // This is a feature of `babel-loader` for webpack (not Babel itself).
        // It enables caching results in ./node_modules/.cache/babel-loader/
        // directory for faster rebuilds.
        cacheDirectory: true,
    },
},
// CSSX
{
    test: /\.(js|jsx)$/,
    include: paths.appSrc,
    loader: 'cssx-loader',
},

for example.

The strange thing is if I put the cssx-loader first it works for a very tiny time, then I get a compiler error.

My issue is very similar to this one.

So, how can we fix this and put CSSX to work with the create-react-app?

I'm very interested to use this approach on my project so a help would be very appreciated.

Thanks in advance.

[krasimir]

Interesting. I'll try by following your steps and will report here.