[BUG] - `VariantProps` throwing type error when used on custom styled component

[b-bot]

trafficstars

Describe the bug

Currently creating a branded component library with some components based on Next UI.

The library goes through a separate build process and packages for a private NPM library.

Currently getting a strange TypeScript error when trying to use the VariantProps to add completion to my component variants:

semantic error TS4023: Exported variable 'StyledText' has or is using name 'Stitches' from external module ".../node_modules/@nextui-org/react/types/text/text" but cannot be named.

Using Typescript ^4.7.3 with tsconfig.json file:

{
  "compilerOptions": {
    "allowSyntheticDefaultImports": true,
    "declaration": true,
    "esModuleInterop": true,
    "forceConsistentCasingInFileNames": true,
    "jsx": "preserve",
    "module": "esnext",
    "moduleResolution": "node",
    "noEmit": true,
    "outDir": "dist",
    "resolveJsonModule": true,
    "skipLibCheck": true,
    "sourceMap": true,
    "strict": true,
    "target": "es5",
    "noImplicitAny": false,
    "lib": ["dom", "dom.iterable", "esnext"],
    "allowJs": true,
    "isolatedModules": true
  },
  "exclude": ["node_modules", "pages"],
  "include": ["next-env.d.ts", "**/*.ts", "**/*.tsx"]
}

Your Example Website or App

No response

Steps to Reproduce the Bug or Issue

1. Create custom component
2. Import VariantProps and use on Styled component
3. Export the component

Code sample:

import React from 'react';
import { Text as NextText, styled } from '@nextui-org/react';
import { VariantProps } from '@stitches/react';

import { TextProps } from '@nextui-org/react/types';

type Props = VariantProps<typeof StyledText> & TextProps;

const StyledText = styled(NextText, {
  fontFamily: 'Inter',
  variants: {
    label: {
      true: {
        zIndex: 1,
        fontWeight: 'bold',
        verticalAlign: 'middle',
        fontSize: '12px',
      },
    },
  },
});

export const Text: React.FC<Props> = (props) => {
  return <StyledText {...props}>{props.children}</StyledText>;
};

Expected behavior

As a user I expected the VariantProps to add my variant types to the custom component in addition to the native types supplied with the library and allow for successful export.

Screenshots or Videos

No response

Operating System Version

macOS 12.4

Browser

Edge

[tianenpang]

You can use React.ComponentProps instead of VariantProps, the original Text types will also be included.

type Props = React.ComponentProps<typeof StyledText>;

const MyText: React.FC<Props> = (props) => { ... };

Refer to https://github.com/stitchesjs/stitches/discussions/213#discussioncomment-2148614.

Example here codesandbox.io/s/nextui-issue-515-grl1xq.

Hope it helps you.

[b-bot]

@tianenpang Thanks for the help, unfortunately I am getting the same error. However this does mean that it is likely more to do with the styled export. I should probably mention that the error goes away when settting "declaration": false on the rollup config but this omits the .d.ts files then.

Edit: Looks like a bug in Stitches: https://github.com/stitchesjs/stitches/issues/1014

[jrgarciadev]

Hey @b-bot could try importing the VariantProps type from the @nextui-org/react package, as follows:

import React from 'react';
import { Text as NextText, styled } from '@nextui-org/react';
import type { VariantProps, TextProps } from  '@nextui-org/react';

const StyledText = styled(NextText, {
  fontFamily: 'Inter',
  variants: {
    label: {
      true: {
        zIndex: 1,
        fontWeight: 'bold',
        verticalAlign: 'middle',
        fontSize: '12px',
      },
    },
  },
});

type Props = VariantProps<typeof StyledText> & TextProps;

export const Text: React.FC<Props> = (props) => {
  return <StyledText {...props}>{props.children}</StyledText>;
};

[b-bot]

Hi @jrgarciadev - again the same error, I have tried this import before. Likely not related to your library as it is present in Stitches but this issue seems to go further back and may be to do with how deps are being imported / exported as per this comment: https://github.com/microsoft/TypeScript/issues/5711#issuecomment-157793294

Will let you know if I find a solution appreciate the help.

Edit: Did some investigation and this is not happening with the styled when imported directly from @stitches/react v1.2.8

[PatrickRNG]

Any updates?

The same problem is happening to me when I export a styled component, are we supposed to style elements in the same file as the component we are using it? I was trying to export a styled component from another file.

export const HeaderContainer = styled("div", {
  position: "fixed",
  zIndex: "2",
  background: "white",
  width: "100%"
})

Exported variable 'HeaderContainer' has or is using name 'Stitches' from external module "[personal-folders]/node_modules/@nextui-org/react/types/theme/stitches.config" but cannot be named.ts(4023)

[jrgarciadev]

Hey please update to v2.0 https://nextui.org/blog/nextui-v2 due to v1 will not receive more updates.