Property 'tw' does not exist on type

[j0hnm4r5]

This is almost the same exact error as #33, except I'm using Next.js and Emotion.

All of a sudden, all of the tw props on my components are erroring in TypeScript with:

Type '{ children: Element[]; tw: string; }' is not assignable to type 'ClassAttributes<HTMLDivElement> & HTMLAttributes<HTMLDivElement> & { css?: Interpolation<Theme>; }'.
  Property 'tw' does not exist on type 'ClassAttributes<HTMLDivElement> & HTMLAttributes<HTMLDivElement> & { css?: Interpolation<Theme>; }'.

Using the tw template string inside a css prop works okay (i.e., css={ [ tw`text-xl` ] }), and the site is rendering totally fine (TypeScript is the only thing that's complaining).

It was working for weeks, and only stopped yesterday. I updated a few packages yesterday, and something tailwind or emotion-related might have been included — would some version mismatch be causing an issue? Notably, I'm using a monorepo with this structure:

project/
  ├─ package.json
  ├─ tsconfig.json
  ├─ tailwind.config.js
  |
  └─ services/
      └─ app/
          ├─ package.json
          ├─ tsconfig.json
          ├─ babel-plugin-macros.config.js
          ├─ babel.config.js
          ├─ twin.d.ts
          |
          └─ src/pages/

The only thing tailwind-related in the root package.json is a a devDependency of "tailwindcss": "^2.1.0",.

The package.json in the app service contains (among other things):

 "dependencies": {
    "@emotion/css": "^11.1.3",
    "@emotion/react": "^11.1.5",
    "@emotion/server": "^11.0.0",
    "@emotion/styled": "^11.3.0",
    "next": "10.2.0",
    "next-transpile-modules": "^7.1.1",
    "react": "17.0.2",
    "react-dom": "17.0.2",
    "twin.macro": "^2.4.2"
  },
  "devDependencies": {
    "@babel/core": "^7.13.8",
    "@emotion/babel-plugin": "^11.3.0",
    "@emotion/babel-preset-css-prop": "^11.2.0",
    "babel-plugin-macros": "^3.1.0",
    "tailwindcss": "^2.1.0"
  }

My twin.d.ts looks like this:

import "twin.macro";
import styledImport from "@emotion/styled";
import { css as cssImport } from "@emotion/react";

declare module "twin.macro" {
  const styled: typeof styledImport;
  const css: typeof cssImport;
}

And my babel-plugin-macros.config.js looks like this:

module.exports = {
  twin: {
    preset: `emotion`,
    config: `../../tailwind.config.js`,
  },
};

[ben-rogerson]

Thanks for the great bug report.

Does the tsconfig.json specify the jsxImportSource?

{
  "compilerOptions": {
    "jsxImportSource": "@emotion/react" // Add the css prop
  },
}

Source

[j0hnm4r5]

It does, but I actually ended up fixing this in my repo -- there was in fact a version mismatch between twin and tailwind. Setting them all to exactly what was specified in the example, and then importantly not updating any of them did the trick.

I didn't do enough digging to figure out which version mismatch was causing the issue though.

[ben-rogerson]

Yeah please do! I'm betting that quite a few others will be hitting this issue in one of their next updates too 😱

[j0hnm4r5]

I cannot for the life of me completely nail down this issue — it pops back up every time I update packages (via yarn), but I'm being super careful not to touch tailwind or twin.macro.

Pinning all versions to tailwindcss@2.1.0 and twin.macro@2.4.2 seems to fix it, but that's not great long-term.

Is anyone else hitting this issue?

[ben-rogerson]

I just saw this issue in the snowpack-react-emotion-typescript repo (typescript v4.2.2).

I updated twin.macro from v2.3.0 to v2.5.0 and the red squiggles went away. This is a little puzzling as there haven't been any type updates in that time. I then downgraded back to twin@2.3.0 and the error didn't reappear 🤷‍♂️

Does updating to v2.5.0 remove the typescript error for you?

[j0hnm4r5]

I just updated to "twin.macro": "^2.5.0" and "tailwindcss": "^2.1.0", and I haven't gotten the squiggles yet — I'll follow up in the next week or so to let you know if they ever popped back up again!

[ben-rogerson]

Closing for now as looks like this is fixed! Feel free to reopen as needed.

[dredshep]

Using "twin.macro": "^2.8.2" and I get this error :(

Property 'tw' does not exist on type 'DetailedHTMLProps<HTMLAttributes<HTMLDivElement>, HTMLDivElement>'. TS2322

[ben-rogerson]

Try adding the tw prop shown here.

[cullylarson]

I'm suddenly getting this on v2.8.2 (w/ TS v4.8.4). Adding "jsxImportSource": "@emotion/react" to tsconfig.json fixed it.

[antoniobrandao]

Try adding the tw prop shown here.

@ben-rogerson that link seems to be dead

[antoniobrandao]

What would the jsxImportSource value be if the project is using styled-components? Just styled-components instead of @emotion/react? I still get Unknown property 'tw' found

[ben-rogerson]

Updated the link, hopefully that helps

[mtedao]

I got same error at <img> tag

[ymslavov]

For anyone on preact this is what I had to put in global.d.ts (and add globals.d.ts to your tsconfig.json -> include):

export declare global {
  namespace preact {
    namespace JSX {
      interface IntrinsicAttributes<T> {
        as?: string | Element;
      }
      // The css prop
      interface HTMLAttributes<RefType extends EventTarget = EventTarget> extends ClassAttributes<RefType>, DOMAttributes<RefType>, AriaAttributes {
        css?: CSSProp;
        tw?: string;
      }
      // The inline svg css prop
      interface SVGAttributes<Target extends EventTarget = SVGElement> extends HTMLAttributes<Target> {
        css?: CSSProps;
        tw?: string;
      }
    }
  }
}