autoLabel and sourceMap not working when emotion is used with the TypeScript version of create-react-app

[timjohnson-valtech]

• emotion version: 9.2.8
• react version: 16.4.2
• react-emotion version: 9.2.8
• babel-plugin-emotion version 9.2.8

What I did:

1. Installed create-react-app typescript version with create-react-app emotion-test --scripts-version=react-scripts-ts
2. Ran create-react-app eject script with npm run eject
3. Installed emotion, react-emotion, and babel-plugin-emotion with npm i -S emotion react-emotion babel-plugin-emotion
4. Added default babel plugin config that I found at https://emotion.sh/docs/babel-plugin-emotion#via-babelrc-recommended to package.json. Then I flipped autoLabel and sourceMap to true

...

  "babel": {
    "presets": [
      "react-app"
    ],
    "plugins": [
      [
        "emotion",
        {
          "hoist": false,
          "sourceMap": true,
          "autoLabel": true,
          "labelFormat": "[local]",
          "extractStatic": false,
          "outputDir": "",
          "importedNames": {
            "styled": "styled",
            "css": "css",
            "keyframes": "keyframes",
            "injectGlobal": "injectGlobal",
            "merge": "merge"
          }
        }
      ]
    ]
  },

...

1. Added a button with emotion to the default App.tsx that comes with create-react-app

import * as React from 'react';
import styled from 'react-emotion';
import './App.css';

import logo from './logo.svg';

const Button = styled('button')`
  color: rebeccapurple;
`;

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

export default App;

What happened:

autoLabel and sourceMap aren't working. I tried the same steps but using create-react-app without TypeScript and I see the super helpful auto-labeled classname css-1hha610-Button e1c0eqbh0 and the line number that the CSS is at in App.js is shown in Chrome devtools.

Reproduction:

1. Install the TypeScript version of create-react-app
2. Run the create-react-app eject script
3. Install emotion, react-emotion, and babel-plugin-emotion
4. Add config for babel that enables the sourceMap and autoLabel options
5. Create a simple emotion component in App.tsx
6. Run npm start
7. Go look for the class label and line numbers in your favorite browser

I'm thinking that making a repo for this issue is overkill and whoever looks at this would probably want to follow the steps themselves, but if I'm wrong and it would help let me know and I'll create one.

[timjohnson-valtech]

I got this working with ShaneMckenna23's help here: wmonk/create-react-app-typescript#394