Error "Identifier '_styled' has already been declared" with styled-components + ts + next.js

Looks like the compiler duplicates the import statement of styled-components with the one created by the babel macro when mixing <div tw="..." /> usage with tw.div``.

This happens when using:

• twin.macro
• Nextjs
• styled-components
• Typescript

Error:

Module parse failed: Identifier '_styled' has already been declared (3:7)
File was processed with these loaders:
 * ./node_modules/@next/react-refresh-utils/loader.js
 * ./node_modules/next/dist/build/webpack/loaders/next-babel-loader.js
You may need an additional loader to handle the result of these loaders.
| import { jsxDEV as _jsxDEV } from "react/jsx-dev-runtime";
| import _styled from "styled-components";
> import _styled from "styled-components";

To reproduce:

• With error: https://github.com/lopezjurip/twin.macro-nextjs-styled-ts-error
• With commented lines to make it work: https://github.com/lopezjurip/twin.macro-nextjs-styled-ts-error/commit/507900c0e295bab5a5408cd8e98fbaffdda2ccf8

Maybe this is related to https://github.com/ben-rogerson/twin.macro/issues/192?

[coffee-cup]

I am seeing a similar issue after upgrading to the latest twin.macro (2.6.1) from 2.3.3.

I am using

• twin.macro@2.6.1
• next@11.0.1
• styled-components@5.1.0
• typescript@4.3.4

Any idea why it might be happening or any configuration changes I can make to fix it?

[jeremyzilar]

This works now in 2.6.2, thank you @ben-rogerson 🚀