#1055·stitches

TypeScript issue when exporting `styled` from a monorepo package

Author: lucastobrazilCreated Jul 5, 2022Updated Apr 11, 2024

Bug report

Describe the bug

I have a monorepo setup (see below for minimal repro) with the following structure:

monorepo/
-- packages
--- core
--- system

system is where we're exporting styled from stitches, however when using it in core

typescript
import { styled } from '@org/system'

const MyComponent = styled('div', {});
       ^^^^^^^^^^^

the below TypeScript error occurs.

typescript
The inferred type of 'MyComponent' cannot be named without a reference to 'system/node_modules/@stitches/react/types/config'. This is likely not portable. A type annotation is necessary.

We managed to eliminate this error by removing declaration: true from the tsconfig of core, however this prevented declaration files from getting created for our components which killed TS autocompletion (a big DX reason for using stitches).

Prior to moving the stitches stuff to system, it was in he core directory and worked fine.

To Reproduce

https://github.com/lucastobrazil/stitches-ts-repro

Steps to reproduce the behavior, please provide code snippets or a repository:

  1. Clone the repo and open with VSCode (Typescript enabled)
  2. npm install <-- we're using 4.4.2 to stay in line with stitches
  3. cd packages/system && npm install <-- install within this package too
  4. navigate to packages/core/index.ts and you will see the typescript error below

Expected behavior

We'd expect that the typings of the styled function are accessible and no error occurs, whilst still being able to output declaration files from core

Screenshots

Screen Shot 2022-07-05 at 11 53 50 pm

System information

  • OS: Mac OS
  • Version of Stitches: 1.2.8
  • VSCode Version: 1.68.1