babel-plugin-styled-components: styled.keyframes.withConfig is not a function

Following up on my comment above, my team and I are using this workaround to avoid the styled.keyframes.withConfig is not a function error:

View source for ‘Spinner’ component

import styled from 'styled-components'

const keyframes = require('styled-components').keyframes

const spinnerRotate = keyframes`
  100% {
    transform: rotate(360deg);
  }
`

It’s strange having to mix ES2015 import and CommonJS require in the same file. However, when we build our component using Rollup using the syntax above, we no longer see the error in our Jest tests. Errors would appear when components consuming our ‘Spinner’ component would run keyframes from our CommonJS export of Spinner. Here is the CommonJS export of Spinner, which contains the following lines:

function _interopDefault (ex) { return (ex && (typeof ex === 'object') && 'default' in ex) ? ex['default'] : ex; }

var styled = _interopDefault(require('styled-components'));

...

var keyframes = require('styled-components').keyframes;

It’s possible that Rollup’s _interopDefault method is only fetching the default export, which could explain why the error in question gets thrown. I haven’t had an opportunity to dig further, but I’ll follow up once I do.

const keyframes = require(‘styled-components’).keyframes

Ran in to this issue (again) after updating a bunch of dependencies and our rollup babel plugin after migrating to React 17.

The above solution worked in our NextJS app loading a component library that included a keyframe import from styled-components.

Thanks again for this @theetrain 🙏

Hi, we’re also experiencing this issue. When we run Jest on “Component A” that is consuming “Component B” built with babel, we see the following output:

styled.keyframes.withConfig is not a function

FAIL  packages/Video/__tests__/Video.spec.jsx
  ● Test suite failed to run
    TypeError: styled.keyframes.withConfig is not a function
      227 | 
      228 | var zindexPopover = 1600;
    > 229 | var spinnerRotate = styled.keyframes({
          |                  ^
      230 |   '100%': {
      231 |     transform: 'rotate(360deg)'
      232 |   }

👀 See source code:

• SVG component using keyframes
• Parent component “Spinner”
• Video component consuming “Spinner” that yields the error in Jest

This is what I’m using. Also, is support for styled components v4 still in active development?

Package	Version
babel-plugin-styled-components	1.10.0
jest-styled-components	7.0.0-2
jest	24.8.0
react	16.8.6
styled-components	4.2.1

Seeing a very similar issue when trying to run jest:

typeerror: styled.createglobalstyle.withconfig is not a function

Still trying to determine if this is specific to something in my environment, though.

I had a similar error related to styled-components and typescript-plugin-styled-components (which extends from babel-plugin-styled-components).

As I was using the typescript-plugin-styled-components to add readable classnames to the DOM whilst developing (related to this thread; https://github.com/styled-components/styled-components/issues/976), I got this error;

SyntheticEvent.extend.withConfig is not a function

The error was resolved when downgrading typescript-plugin-styled-components to 1.0.0.

Leaving this here for anyone else googling the same keywords I did ^^

How are you importing styled? keyframes is a named export so you have to bring it in like this:

import { keyframes } from 'styled-components';