(...).createGlobalStyle.withConfig is not a function

[luizwhite]

Similar to this comment workaround, when i use createGlobalStyle like this:

import * as styled from 'styled-components';
export const GlobalStyle = styled.createGlobalStyle``;, i get the error (...).createGlobalStyle.withConfig is not a function on a Next.js / Typescript project

The bug is resolved when I use the solution presented in the comment above, using CommonJS require:
const createGlobalStyle = require('styled-components').createGlobalStyle
export const GlobalStyle = createGlobalStyle``;

Is it a bug or a setup issue?

[kitten]

The targeting of the Babel plug-in isn't quite that precise, so it never associates the styled-components import with your local names.

So when you import the entire namespace as styled the Babel plugin ticks off all its boxes:

• You're importing styled-components and its locally bound
• You have a variable called styled that's called using a tag as styled.NAME

To prevent this you can import the createGlobalStyle helper separately and not pull in the entire namespace, I believe.

This does look like a bug since this detector here is faulty:

babel-plugin-styled-components/src/utils/detectors.js

Line 53 in 950692b

localName = specifier.node.local.name

[luizwhite]

Yup, thx @kitten!
I was just using that import style because of this issue with prettier formatting a createGlobalStyle component through vscode-styled-components plugin

[mqklin]

Same error for me, simple reproduce:

import * as Styled from 'styled-components';
console.log(Styled.css``); // css.withConfig is not a function

But if I do import {css} from 'styled-components'; error is gone

[quantizor]

Can y'all try out 1.13.2-test.1 and let me know if it fixes your issue?