'css' is not exported from 'styled-components/macro'

[hendrul]

import css using twin.macro with styled-components fails. Below is the error when running local in my machine the cra-styled-component example. It works on codesandbox, but not local.

./src/components/Button.js
Attempted import error: 'css' is not exported from 'styled-components/macro' (imported as '_css').

[ben-rogerson]

I'm seeing this too when I use yarn to install.
npm works fine - I'll have to look into this issue further.

You can fix it for now by using this twin config:

  "babelMacros": {
    "twin": {
      "preset": "styled-components",
      "css": {
        "from": "styled-components",
        "import": "css"
      }
    }
  },

Has babel updated something lately?

[hendrul]

@ben-rogerson thanks a million for the fast response.
npm works fine
To me It's failing on both yarn or npm

[audishos]

@ben-rogerson thanks a million for the fast response.
npm works fine
To me It's failing on both yarn or npm

I'm seeing the same. The strangest thing about it is that it works fine in one component, but fails when I try and import into another. Both components are in the same directory.

[ben-rogerson]

I've now adjusted the preset in 2.0.8 to remove the macro import, this will avoid this error in CRA now.

Edit: You'll need to make sure you're not manually specifying your imports, just use preset: 'styled-components' in your twin config.

[jeremyzilar]

FYI, I just tried this with npm install and I got the same error

'css' is not exported from 'styled-components/macro'

So I cleared away the repo, and tried again using yarn and everything seems to work.

[ben-rogerson]

FYI, I just tried this with npm install and I got the same error

'css' is not exported from 'styled-components/macro'

So I cleared away the repo, and tried again using yarn and everything seems to work.

Sounds like some caching happening there 🤷‍♂️

[jonleopard]

Was anyone able to resolve this? I just ran npx degit on the styled-components repo and I'm getting this error on a fresh install.

[jeremyzilar]

I think @ben-rogerson is correct. The cache needed to be cleared. I have been blowing away my Next.js folder (rm -rf .next) after each edit to my tailwind.config.js

[isaif]

For me clearing the .next directory doesn't work but using yarn does.

[ben-rogerson]

Nuking your node_modules and npm installing may have fixed it too