Babel macro with TypeScript and Create React App

Environment

System:

• OS: macOS High Sierra 10.13.6
• CPU: (4) x64 Intel® Core™ i7-7660U CPU @ 2.50GHz
• Memory: 441.45 MB / 16.00 GB
• Shell: 3.2.57 - /bin/bash

Binaries:

• Node: 10.13.0 - ~/.nvm/versions/node/v10.13.0/bin/node
• npm: 6.4.1 - ~/work/playground/sc-macro/node_modules/.bin/npm

npmPackages:

• styled-components: ^4.1.1 => 4.1.1

Reproduction

Apologies, I was unable to use the babel macro in codesandbox, so I threw together a quick CRA:

Create a react app with TypeScript:

npx create-react-app sc-macro --typescript

Then, following the API docs for TypeScript, create a theme.ts file in src/:

export default interface ThemeInterface {
  primaryColor: string;
  primaryColorInverted: string;
}

as well as a styled-components.ts file:

import * as styledComponents from "styled-components";
import { ThemedStyledComponentsModule } from "styled-components";

import ThemeInterface from "./theme";

const {
  default: styled,
  css,
  createGlobalStyle,
  keyframes,
  ThemeProvider
} = styledComponents as ThemedStyledComponentsModule<ThemeInterface>;

export { css, createGlobalStyle, keyframes, ThemeProvider };
export default styled;

Finally, import and use the custom styled-components.ts module in App.tsx:

import React, { Component } from "react";
import styled from "./styled-components";
import logo from "./logo.svg";
import "./App.css";

const Foo = styled.p`
  color: red;
`;

class App extends Component {
  render() {
    return (
      <div className="App">
        <header className="App-header">
          <img src={logo} className="App-logo" alt="logo" />
          <Foo>
            Edit <code>src/App.tsx</code> and save to reload.
          </Foo>
          <a
            className="App-link"
            href="https://reactjs.org"
            target="_blank"
            rel="noopener noreferrer"
          >
            Learn React
          </a>
        </header>
      </div>
    );
  }
}

export default App;

Run npm start to fire up the app. It should compile successfully and the text should be red.

Steps to reproduce

Update the import in styled-components.ts from:

import { ThemedStyledComponentsModule } from "styled-components";

to use the babel macro:

import { ThemedStyledComponentsModule } from "styled-components/macro";

You should now get the following error:

./src/styled-components.ts
TypeError: Cannot read property 'name' of undefined
    at Array.map (<anonymous>)

Expected Behavior

I would expect it to compile successfully, as the non-macro version did. I would also expect to then be able to see the component name on the class attribute in the page source (to verify that the plugin is working).

Actual Behavior

./src/styled-components.ts
TypeError: Cannot read property 'name' of undefined
    at Array.map (<anonymous>)

[probablyup]

Not sure, I don’t use TS in my projects. Please do move over the issue though where you’re more likely to get useful feedback

[DevanB]

This isn’t a types issue. It’s happening on build for me.