TypeScript issue when exporting `styled` from a monorepo package

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

import { styled } from '@org/system'

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

the below TypeScript error occurs.

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

System information

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

[ivanbanov]

I faced the same issue with a pnpm monorepo. It seems to be directly related to this issue https://github.com/microsoft/TypeScript/issues/48212 and seems like it won’t go away until it’s fixed.

I ended with 3 possible workarounds

Option 1: Set paths

In your root tsconfig add @stitches/react to the paths

// tsconfig.json
{
  "compilerOptions": {
    "paths": {
      // TODO: Remove the workaround whenever MS fixes the issue
      // https://github.com/microsoft/TypeScript/issues/48212
      "@stitches/react": ["./node_modules/@stitches/react"]
    }
  }
}

Option 2: Set baseUrl

I didnt try with other package manager, for a pnpm monorepo using workspace:* for local dependencies it worked fine

{
  "compilerOptions": {
    // TODO: Remove the workaround whenever MS fixes the issue
    // https://github.com/microsoft/TypeScript/issues/48212
    "baseUrl": "./node_modules"
  }
}

Option 3: Add an empty type import

Based on this comment https://github.com/microsoft/TypeScript/issues/48212#issuecomment-1204325586, in your component file add the following import

// TODO: Remove the workaround whenever MS fixes the issue
// https://github.com/microsoft/TypeScript/issues/48212
import type {} from '@stitches/react'

I hope it helps somehow 😃

[ivanbanov]

@gregogun I only have a tsconfig.json in the root

@Gorthog if I understood this comment correctly, TS resolves the transitive dependencies as “out of the project” and can not simply import it (I dont understand deeply to be honest). So, based on this transitive problem what I tried was to give a happy path to the compiler, so it does not get lost with such deps. Option 2 seems dangerous to be honest, but anyway it works 🤷