It looks like the inline option that is recommended in the docs for react-app-rewire-emotion is not used by the emotion babel plugin: https://github.com/osdevisnot/react-app-rewire-contrib/blame/master/packages/react-app-rewire-emotion/README.md#L50

Symptom: If autoLabel (https://github.com/emotion-js/emotion/tree/master/packages/babel-plugin-emotion#autolabel) is configured to be true in .babelrc the generated class names do not include the name of variable.

Simple example to reproduce this behaviour: https://github.com/tkivela/cerebraltemplate

The out-of-the-box Create React App renders without crashing test fails because:

You're trying to use the styled shorthand without babel-plugin-emotion.
    Please install and setup babel-plugin-emotion or use the function call syntax(`styled('footer')` instead of `styled.footer`)

Here is the code in App.test.js:

import React from 'react';
import { BrowserRouter } from 'react-router-dom';

import ReactDOM from 'react-dom';
import App from 'App';

it('renders without crashing', () => {
  const div = document.createElement('div');
  ReactDOM.render(
    <BrowserRouter>
      <App />
    </BrowserRouter>,
    div
  );
  ReactDOM.unmountComponentAtNode(div);
});

🚨 You need to enable Continuous Integration on all branches of this repository. 🚨

To enable Greenkeeper, you need to make sure that a commit status is reported on all branches. This is required by Greenkeeper because we are using your CI build statuses to figure out when to notify you about breaking changes.

Since we did not receive a CI status on the greenkeeper/initial branch, we assume that you still need to configure it.

If you have already set up a CI for this repository, you might need to check your configuration. Make sure it will run on all new branches. If you don’t want it to run on every branch, you can whitelist branches starting with greenkeeper/.

We recommend using Travis CI, but Greenkeeper will work with every other CI service as well.

Once you have installed CI on this repository, you’ll need to re-trigger Greenkeeper’s initial Pull Request. To do this, please delete the greenkeeper/initial branch in this repository, and then remove and re-add this repository to the Greenkeeper integration’s white list on Github. You'll find this list on your repo or organiszation’s settings page, under Installed GitHub Apps.

Does not find babelLoader

const babelLoader = config.module.rules.find(rule => rule.loader && rule.loader.indexOf('babel-loader') > 0);

with CRA 1.0.10 works well

Under the Usage with Storybook section, it says you need to do this in your webpack.config.js:

const rewireEmotion = require('react-app-rewire-emotion');

This didn't work for me, but I fixed it with:

const { rewireEmotion } = require('react-app-rewire-emotion');

:)

Nothing changes when I use this solution, I still get regular app without bundle.

I use config-overrides.js with next content:

const rewireReactLibrary = require('react-app-rewire-react-library');
const pkg = require('./package.json');

module.exports = function(config, env) {
  return rewireReactLibrary(config, env, pkg, process.env.ENCW_BUILD_LIB);
};

So my package.json file is correct as well, but still it builds just like regular app.

inline: true no longer exists, autoLabel: true might be the new thing to auto-generate the labels that make sense. This stopped working suddenly over this weekend iirc, so I'm guessing maybe babel-plugin-emotion might have changed it's options.

const { rewireEmotion } = require('react-app-rewire-emotion');

/* config-overrides.js */
module.exports = function override(config, env) {
  return rewireEmotion(config, env, { autoLabel: true });
}