Error when using styled-component macro with gatsby

Environment

System:

• OS: macOS 10.14.5
• CPU: (4) x64 Intel® Core™ i7-7567U CPU @ 3.50GHz
• Memory: 386.38 MB / 16.00 GB
• Shell: 5.6.1 - /usr/local/bin/zsh

Binaries:

• Node: 10.16.0 - ~/.volta/tools/image/node/10.16.0/6.9.0/bin/node
• Yarn: 1.16.0 - ~/.volta/tools/image/yarn/1.16.0/bin/yarn
• npm: 6.9.0 - ~/.volta/tools/image/node/10.16.0/6.9.0/bin/npm
• Watchman: 4.9.0 - /usr/local/bin/watchman

npmPackages:

• styled-components: ^5.0.0-beta.3 => 5.0.0-beta.3

Steps to reproduce

• start a project with gatsby starter
• install styled-component. same error on v4 and v5
• In a component, try:

import styled from "styled-components/macro";
const RedDiv = styled.div`
  color: red;
`;

Expected Behavior

• No error when running gatsby develop

Actual Behavior

• I see this error in the console: error There was an error trying to load the config "styledComponents" for the macro imported from "styled-components/macro. Please see the error thrown for more information.
• The code still compiles and works

[dephiros]

Adding config section to package.json fixed it

  "babelMacros": {
    "styledComponents": {
      "pure": true
    }
  }

[asiop]

above fix also works with create-react-app 🙏