Importing in Typescript errors ts(2614)

I finally started trying out twin (you recommended it on reddit a few weeks ago!) having issues starting up in typescript however.

I followed the installation guide for CRA, I’ve made two code sandboxes setting up: Plain JS (Working): https://codesandbox.io/s/lucid-kapitsa-cjy3y?file=/src/App.js TS (Errors): https://codesandbox.io/s/busy-moser-yxl7g?file=/src/App.tsx

As you can see the JS works fine, and the TS does display the elements styled but there is a TS error for the imports Module '"../node_modules/twin.macro/types"' has no exported member 'tw'. Did you mean to use 'import tw from "../node_modules/twin.macro/types"' instead?ts(2614) I’m assuming it can’t find the type definitions? I know you say you’ve got them built in, not sure if I missed something in installation.

[AlexanderArvidsson]

@KieranO547 To fix this if you need css, css comes from @emotion/core or your css-in-js library of choice. Had this issue yesterday, all I had to do was this:

import { css } from "@emotion/core";
import tw from "twin.macro"

Although, it would be nice if the typings matched the documentation!

[rbutera]

@KieranO547

Can I confirm if this issue definitely closed? I’ve just upgraded to v1.3.0 and still see the same error in typescript when importing styled from twin.macro: import tw, { styled } from 'twin.macro'; gives “has no exported member named styled”.

It appears that you’ve not followed the guide for annotating the TypeScript types for your chosen CSS-in-JS library:

• TypeScript + Styled-Components
• TypeScript + Emotion

Let us know if this resolves your issue.

---

@ben-rogerson I was worried these instructions would not be visible enough if not linked to from the main readme (which is why I had initially linked them from there!), and this comment here has confirmed these suspicions. I suggest that we link them again from the readme. Thoughts?