TS error: `'styled' does not exist on type 'Stitches<...`

[gregoralbrecht]

Bug report

Describe the bug

I'm trying to upgrade from @stitches/[email protected] to v1.2.0. I read the migration blog post and changed everything that's mentioned there. However, I now get a TS error I'm not able to narrow down or fix:

(typescript) Error: [...]/packages/react-components/src/stitches.config.ts(149,16):
semantic error TS2339: Property 'styled' does not exist on type 'Stitches<"", { motion: "(prefers-reduced-motion)"; hover: "(any-hover: hover)"; }, { colors: { sky1: ...; sky2: ...; sky3: ...; sky4: ...; sky5: ...; sky6: ...; sky7: ...; sky8: ...; sky9: ...; sky10: ...; sky11: ...; ... 60 more ...; brand12: ...; }; ... 12 more ...; transitions: unknown; }, DefaultThemeMap, { ...;...'.

Adding a // @ts-nocheck to the file solves it and everything seems to work as intended.

To Reproduce

I tried recreating this in CodeSandbox and in there, it works: https://codesandbox.io/s/eager-water-7s4m4?file=/src/stitches.config.ts

I'm afraid I don't entirely understand why this would work in the CSB but not locally. I checked the TS versions and everything I thought was related but they seem to be identical. Any help is very much appreciated 🙏

Expected behavior

I'm able to use Stitches as documented without TS errors: export const { styled } = createStitches(...)

System information

• OS: macOS v11.5.2
• Version of Node.js: 14

[peduarte]

That's odd 🤔 Perhaps it's worth creating a repo with a reproduction? That'd be helpful! Thanks

[gregoralbrecht]

I tried fixing this some more but no dice so far. I also realized the repo is public so I might as well share the PR in the actual repo with you: https://github.com/Qualifyze/design-system/pull/185

You should get it working by running yarn && yarn build in the root :) Edit: By "working" I meant you will see the error during build

[coreybruyere]

I'm having the same (or similar) issue. I've created a repo for reproduction. Just set this up yesterday as a first time user, so any additional insight on my setup would be appreciated 🙏

(typescript) Error: /packages/core/src/stitches.config.ts(10,3): semantic error TS2339: Property 'styled' does not exist on type 'Stitches<"", {}, { colors: { black: ...; white: ...; gray: ...; blue: ...; red: ...; yellow: ...; pink: ...; turq: ...; orange: ...; }; fonts: { sans: ...; }; fontSizes: { 1: ...; 2: ...; 3: ...; 4: ...; 5: ...; 6: ...; }; space: { 1: ...; ... 4 more ...; 6: ...; }; ... 10 more ...; transitions: unknown; }, DefaultT...'.

[peduarte]

Hmm, I cloned the repo, and did npm i in the root dir. Then, I realised it wasnt installing the deps of the core package, so I cd'ed into it, and did npm i there too. Then the error went away.

However, when doing npm run prepare, it still shows the error.

Im not sure why, but it could be something related to tsdx, since theres no error in VSCode.

In our DS we use rollup and never had any issues

[gregoralbrecht]

I cloned the repo (https://github.com/coreybruyere/test-ds), ran npm i && npm bootstrap and @stitches/react gets installed in test-ds/packages/core/node_modules. In the repo I linked above, it gets hoisted to the root node_modules. I'm using NPM7 and Yarn1 by the way

[peduarte]

Ok, we'll have to dedicate some time to look into this soon