TypeScript issue when exporting `styled` from a monorepo package #1055

lucastobrazil · 2022-07-05T13:59:22Z

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:

Clone the repo and open with VSCode (Typescript enabled)
npm install <-- we're using 4.4.2 to stay in line with stitches
cd packages/system && npm install <-- install within this package too
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

The text was updated successfully, but these errors were encountered:

andresmarpz · 2022-07-31T01:00:57Z

I wanted to take a look at this but couldn't reproduce the error of that example. I followed the steps @lucastobrazil provided above.

Here is my fork. Once I noticed the error wasn't there I added this line to check that TypeScript was working as intended.

It might be something on my side so it would be great if someone else could take a look at it as well.

System information

OS: Linux (WSL2)
Kernel: 5.10.16.3-microsoft-standard-WSL2 (x86_64)
VSCode version: 1.69.2

lucastobrazil · 2022-07-31T10:42:11Z

@andresmarpz thanks for taking a look! try doing npm i in the system folder and the error should show up. Once stitches gets installed the TS error gets thrown. Not sure if this sheds any more light on the issue, but i guess once it's installed as a dependency TS tries to actually go in and infer the types.

lucastobrazil · 2022-07-31T10:42:29Z

ps ill add that instruction to the reproduction steps

andresmarpz · 2022-07-31T15:30:19Z

Yep, you were right. I could get the reproduction working and tried a few things but couldn't find a workaround. Though, I don't know if it's really a Stitches problem, since I found #42873 and #29808 in TypeScript repository and reading a little through them it seems those are very related to your issue.
Hope that might point you into something useful, but I'm not that knowledged to help you here :/

jgoz · 2022-08-27T18:56:02Z

I just ran into this and resolved it by coercing npm to install @stitches/react in the root node_modules folder rather than in a workspace node_modules. I'm not sure why it wasn't being hoisted to the root since it's only a dependent of that one package, but it resolved the issue for me.

ivanbanov · 2022-09-12T12:24:50Z

I faced the same issue with a pnpm monorepo. It seems to be directly related to this issue microsoft/TypeScript#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 microsoft/TypeScript#48212 (comment), 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 :)

Gorthog · 2022-09-13T16:52:45Z

@ivanbanov thank you so much! It worked!
Can you please explain a bit more what is actually going on here? What is the root cause? Why these workarounds help?

gregogun · 2022-09-22T07:49:45Z

@ivanbanov for option 2, did you also put this in the root tsconfig.json? I'm still getting the same error with these solutions, so maybe I'm missing something. Do you have stitches installed at the root package.json too?

drianoaz · 2022-09-29T18:01:59Z

I solved this problem installing the @stitches/react as dependency of the package that was having typing problems

gregogun · 2022-11-13T16:29:02Z

I solved this problem installing the @stitches/react as dependency of the package that was having typing problems

hmm tried this but still found some issues... are you able to share the repo at all? @drianoaz 🙏

ivanbanov · 2022-11-14T15:50:23Z

@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 🤷

drianoaz · 2022-11-16T18:43:32Z

hmm tried this but still found some issues... are you able to share the repo at all? @drianoaz 🙏

@gregogun the project where I made this fixes is private, but if you tell me which error exactly you are having, maybe I can help you

gregogun · 2022-11-25T16:43:55Z

thanks for the response @ivanbanov @drianoaz

manage to solve the issue with @ivanbanov second solution, turns out I had a missing ts dependency in my theme package.

it is working fine but I've noticed by doing this I lose the typed HTML attributes onClick, disabled etc. . Does anyone know a way to fix this? It will ofc work by extending React.ComponentProps<html element in here> but would really prefer not to do this 😅

Gorthog · 2022-12-08T07:32:15Z

@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 🤷

Thanks for that explanation!

I would like to add my 2 cents:

In my case I've found the problem is due to pnpm creating multiple copies of the same npm package across the monorepo. I changed all references of said package to peerDependencies except one that stayed under dependencies. Once that was done, there was only once copy of the npm package under node_modules and the error went away.

jpedroschmitz · 2023-04-18T00:44:13Z

I faced this issue in a monorepo containing the Design System using Stitches and its applications. I tried @ivanbanov workarounds, but none worked for me (still unsure why). Instead of trying a workaround or manually using type annotation on every usage of the styled function, I took a different approach. Here's how I fixed it:

Install @stitches/react in both the design system package and the application.
Create a shared Stitches configuration file in your design system package called stitches.shared.ts:

// stitches.shared.ts
import { createStitches } from '@stitches/react';
// Import your theme configuration here
import { themeConfig } from './path/to/your/themeConfig';

export const stitches = createStitches(themeConfig);

export const {
  styled,
  css,
  config,
  getCssText,
  globalCss,
  keyframes,
} = stitches;

Remember that you'll have to export this file, so update the bundling library you're using to have this file as an entry.

Update the stitches.config.ts (or however you call it) file in your design system package to import and re-export the shared configuration:

import { stitches, styled, css, config, getCssText, globalCss, keyframes } from './stitches.shared';

export { styled, css, config, getCssText, globalCss, keyframes };

export type CSS = StitchesCSS<typeof config>;

Create a stitches.config.ts file in your application:

import { StitchesCSS } from '@stitches/react';
import { stitches, styled, css, config, getCssText, globalCss, keyframes } from 'path/to/design-system-package/stitches.shared';

export { styled, css, config, getCssText, globalCss, keyframes };

export type CSS = StitchesCSS<typeof config>;

This configuration file imports the shared Stitches configuration from the design system package and re-exports it for use in the application. By doing this, we ensure the design system package and the Next.js application use the same Stitches configuration, fixing the type-related issues. This alternative solution should help resolve the error without using a workaround. 🙌🏻

JackMostert · 2023-08-01T21:16:40Z

Hope this will help, following the steps above from everyone, I still wasn't able to stop the error from showing; So I started to play around with the tsconfig.json and found that setting the moduleResolution to something other then "bundler" solved my issue;

{
  "compilerOptions": {
    "moduleResolution": "node16",
  }
}

OnkelTem · 2023-12-27T18:07:06Z

I faced this issue in a dead simple library and it doesn't seem like any of the solutions mentioned here are helping.
It looks like a Stitches issue for me now.
Let me try to reproduce the problem in a repository.

OnkelTem · 2023-12-27T21:23:45Z

Here you are: https://github.com/OnkelTem/_stitches-inferred

No monorepo
Just a simple component

import { styled } from '@stitches/react';

export const Button = styled('button', {
    backgroundColor: 'gainsboro',
    borderRadius: '9999px',
    fontSize: '13px',
    padding: '10px 15px',
    '&:hover': {
        backgroundColor: 'lightgray',
    },
});

TS Error:

TS2742: The inferred type of Button cannot be named without a reference to
../node_modules/@stitches/react/types/css-util
. This is likely not portable. A type annotation is necessary.

OnkelTem · 2023-12-27T21:30:13Z

Opened a new report since it happens not only in a monorepo: #1160

yovanoc · 2024-04-11T19:03:38Z

It would be cool to at least update the tsconfig of this repo...

gregogun mentioned this issue Nov 25, 2022

not getting typed HTML attributes aura-ui/aura-ui#33

Closed

3 tasks

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

TypeScript issue when exporting `styled` from a monorepo package #1055

TypeScript issue when exporting `styled` from a monorepo package #1055

lucastobrazil commented Jul 5, 2022 •

edited

Loading

andresmarpz commented Jul 31, 2022

lucastobrazil commented Jul 31, 2022

lucastobrazil commented Jul 31, 2022

andresmarpz commented Jul 31, 2022 •

edited

Loading

jgoz commented Aug 27, 2022

ivanbanov commented Sep 12, 2022

Gorthog commented Sep 13, 2022

gregogun commented Sep 22, 2022

drianoaz commented Sep 29, 2022

gregogun commented Nov 13, 2022

ivanbanov commented Nov 14, 2022 •

edited

Loading

drianoaz commented Nov 16, 2022

gregogun commented Nov 25, 2022 •

edited

Loading

Gorthog commented Dec 8, 2022

jpedroschmitz commented Apr 18, 2023

JackMostert commented Aug 1, 2023

OnkelTem commented Dec 27, 2023 •

edited

Loading

OnkelTem commented Dec 27, 2023

OnkelTem commented Dec 27, 2023

yovanoc commented Apr 11, 2024

TypeScript issue when exporting styled from a monorepo package #1055

TypeScript issue when exporting styled from a monorepo package #1055

Comments

lucastobrazil commented Jul 5, 2022 • edited Loading

Bug report

Describe the bug

To Reproduce

Expected behavior

Screenshots

System information

andresmarpz commented Jul 31, 2022

System information

lucastobrazil commented Jul 31, 2022

lucastobrazil commented Jul 31, 2022

andresmarpz commented Jul 31, 2022 • edited Loading

jgoz commented Aug 27, 2022

ivanbanov commented Sep 12, 2022

Option 1: Set paths

Option 2: Set baseUrl

Option 3: Add an empty type import

Gorthog commented Sep 13, 2022

gregogun commented Sep 22, 2022

drianoaz commented Sep 29, 2022

gregogun commented Nov 13, 2022

ivanbanov commented Nov 14, 2022 • edited Loading

drianoaz commented Nov 16, 2022

gregogun commented Nov 25, 2022 • edited Loading

Gorthog commented Dec 8, 2022

jpedroschmitz commented Apr 18, 2023

JackMostert commented Aug 1, 2023

OnkelTem commented Dec 27, 2023 • edited Loading

OnkelTem commented Dec 27, 2023

OnkelTem commented Dec 27, 2023

yovanoc commented Apr 11, 2024

TypeScript issue when exporting `styled` from a monorepo package #1055

TypeScript issue when exporting `styled` from a monorepo package #1055

lucastobrazil commented Jul 5, 2022 •

edited

Loading

andresmarpz commented Jul 31, 2022 •

edited

Loading

Option 1: Set `paths`

Option 2: Set `baseUrl`

ivanbanov commented Nov 14, 2022 •

edited

Loading

gregogun commented Nov 25, 2022 •

edited

Loading

OnkelTem commented Dec 27, 2023 •

edited

Loading