styled.keyframes.withConfig is not a function

[maeligg]

Reopening https://github.com/styled-components/babel-plugin-styled-components/issues/213 as I'm still experiencing this issue despite the suggestion provided.

I'm using v3.4.10 of styled-components and v1.10.0 of babel-plugin-styled-components. This is what I'm using in my component :

import styled, { keyframes } from 'styled-components'

const rotate = keyframes`
  from {
    transform: rotate(0deg);
  }

  to {
    transform: rotate(360deg);
  }
`

This is bundled (wrongly ?) into the following : var rotate = styled.keyframes(['from{transform:rotate(0deg);}to{transform:rotate(360deg);}']);

[lukashala]

I have the same issue. Any idea what is the root cause?

[ericraio]

+1

[ericraio]

My issue was that I had a bad test file that I forgot to delete and this error was thrown out of place.

[marcod1419]

Also having the same issue, not sure what's going on.

[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

[quantizor]

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

import { keyframes } from 'styled-components';

[theetrain]

@probablyup we are importing styled as a default export and keyframes as a named export as you've described. I updated my comment above to include links to the source code I'm working through. Please have a look.

[mxstbr]

We probably just need another check here to make sure we aren't transpiling styled.keyframes: https://github.com/styled-components/babel-plugin-styled-components/blob/e3829d28f2b460e097f1499f6091a52b667ef1b4/src/visitors/displayNameAndId.js#L142

[quantizor]

I have a strong suspicion this is something to do with environment setup. I have a lot of complex projects using all parts of s-c and have never seen this behavior.

[415DomSmith]

I am also seeing this when trying to run jest in a project consuming multiple component libraries built with styled components.

I was getting caught on one component lib, but removing it from my transformIgnorePatterns solved the issue for that lib.

Now a different component lib is throwing the same error, however, this lib isn't in my transform ignore patterns or having anything special done to it. I also don't see anything in that component libraries config that would be the root cause.

Package	Version
babel-plugin-styled-components	1.10.0
jest-styled-components	7.0.0-2
jest	24.5.0
react	16.8.6
styled-components	4.2.0

[mxstbr]

We could probably just filter styled.keyframes from https://github.com/styled-components/babel-plugin-styled-components/blob/master/src/utils/detectors.js?

[zgreen]

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.

[deini]

Seeing a similar issue when running jest:

TypeError: styled.css.withConfig is not a function

It started occurring when I split a single library into two: Lib A and Lib B.

When component from Lib A imports a component from Lib B both libs built using this plugin.

Same build process in both, nothing really changed.

Using it as always:

import styled, { css } from 'styled-components';

If I remove the plugin from Lib A jest has no issues.

[deini]

I made a repo reproducing the issue. Not sure if its a bug or something wrong with my env setup 🤔.

[deini]

More info: With my current setup, the last compatible version was v1.6.4. Which really makes me believe its an issue on my end but not sure what, the sample repo is pretty straight forward 🤔

[agorovyi]

Having the same problem what I discovered today was that when we target ES modules the build output works perfectly fine. This issue happens only in CommonJS output for us. We are using Rollup to build our components for npm distribution in both ES and CJS versions.

Below are examples of the output.

index.cjs.js

var spinnerRotate = styled.keyframes(["100%{transform:rotate(360deg);}"]);

index.es.js

var spinnerRotate = keyframes(["100%{transform:rotate(360deg);}"]);

Would anyone know which direction we should go debugging this?

[agorovyi]

It seems like Rollup doesn't resolve named exports correctly: https://github.com/rollup/rollup/issues/3011

Could be related to this problem.

[theetrain]

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.

[evandeininger]

@theetrain Your fix worked for me, I went back to my rollup config later though and changed the output format to umd and it fixed this problem as well! I had to add my globals and a name but it worked. from:

  output: [
    {
      file: pkg.main,
      format: 'cjs',
      sourcemap: true,
    },
    {
      file: pkg.module,
      format: 'es',
      sourcemap: true,
    },
  ],

to:

  output: [
    {
      file: pkg.main,
      format: 'umd',
      sourcemap: true,
      name: 'my-components',
      globals: {
        react: 'React',
        'prop-types': 'PropTypes',
        grommet: 'grommet',
        'styled-components': 'styled',
        'styled-system': 'styledSystem',
      },
    },
    {
      file: pkg.module,
      format: 'es',
      sourcemap: true,
    },
  ],

[SimonSomlai]

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 ^^

[415DomSmith]

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 🙏

[davidpn11]

I'm not a huge fan of unnecessary dynamic imports. Especially with TS, we rely a lot on the inferred types that the named imports give you.

I had this error happening when importing a library, and it broke the tests on the consuming app. We didn't want to change the way the library worked to accommodate that.

Changing Jest's config to ignore the library did the job for me:

jest.config.js transformIgnorePatterns: ['/node_modules/(?!LIB_NAME).+$'],

Hope this helps =)