Unable to use Box paste component in my environment

[sansanketdg]

Hi UX experts! I am a rookie front-end software engineer trying to troubleshoot some issue with using Box component. I went through the API Usage docs here - https://paste.twilio.design/primitives/box/#usage-guide

This is how my usage looks like (I am using it in building a SideNavBar for our application) -

import {Box} from "@twilio-paste/box";
...

render() {
  return (
    ...
    <Box as="article" padding="space40" className="nav-items" _hover={{backgroundColor: "colorBackgroundBrandHighlight", cursor: "pointer"}}>
                   <span className="sidebar-item-span">Onboarding Status</span>
    </Box>
    ...
  );
}

After installing Box latest package version, I am still getting this strange error while compiling my project as below -

[tsl] ERROR in /Users/sdige/Git/hawkeye-frontend/static/js/components/SideNavBar/index.tsx(32,18)
      TS2739: Type '{ children: Element; as: "article"; padding: "space40"; className: string; _hover: { backgroundColor: "colorBackgroundBrandHighlight"; cursor: string; }; }' is missing the following properties from type 'Pick<BoxProps, "content" | "dir" | "label" | "slot" | "style" | "title" | "children" | "flex" | "href" | "rel" | "target" | "type" | "defaultChecked" | "defaultValue" | ... 404 more ... | "datetime">': columnGap, rowGap, overflowWrap

I am using node version 14.17.5 and my package.json has all twilio-paste component versions as below -

@twilio-paste/animation-library": "^0.2.1",
    "@twilio-paste/box": "^4.2.2",
    "@twilio-paste/core": "^10.9.0",
    "@twilio-paste/design-tokens": "^5.5.0",
    "@twilio-paste/dropdown-library": "^1.0.0",
    "@twilio-paste/icons": "^5.3.2",
    "@twilio-paste/reakit-library": "^0.7.1",
    "@twilio-paste/style-props": "^1.6.4",
    "@twilio-paste/styling-library": "^0.1.2",
    "@twilio-paste/theme": "^3.2.21",
    "@twilio-paste/tooltip": "^0.3.3",
    "@twilio-paste/types": "^3.0.24",

Please send any information possible to help me troubleshoot this. Thanks!

[gloriliale]

Hi @sansanketdg! We're excited you're using Paste! I'm discussing this w/ teammates, but do notice that you've used a className in Box and span, which we specifically do not support.
Here's an explanation on why we don't allow the use of classes in our Design System: #761
Here's another resource on how to do a few specific, common things w/in Paste w/ these restrictions: #1222

Lemme know if that helps (and maybe solves it?); and reach out any time! We're happy to help :)

[TheSisb]

I am using node version 14.17.5 and my package.json has all twilio-paste component versions as below -

We recommend only using two packages now: @twilio-paste/core and @twilio-paste/icons unless you intentionally need to pin an older version for older Paste packages.

Then you can import the packages you need from within core like this:
import {Box} from '@twilio-paste/core/box';

I bring this up because it looks like you're having a Typescript issue and my concern is mismatched typings from the packages you have installed.

[sansanketdg]

@gloriliale - Thank you for the suggestion. I tried removing the className in Box as well as span inside Box component with just normal Box component as explained in the examples but I am still seeing that error. Any other suggestions I can try?

@TheSisb - Thank you for the recommendation of just using only core and icons packages from @twilio-paste library here forward. I tried importing Box package as import {Box} from '@twilio-paste/core/box'; but I still see that issue. Can you clarify what kind of mismatched typings issue related to installed packages can cause this? Note: I am only seeing issue with Box component. Rest all Twilio components are working seamlessly.

[TheSisb]

@sansanketdg Looks like the typescript error is cut short. Can you share the full error message please?

If it helps, I'm unable to reproduce and error in Codesandbox: https://codesandbox.io/s/stoic-firefly-c9omw?file=/src/index.tsx

[SiTaggart]

Following up here @sansanketdg, are you still experiencing this?

[sansanketdg]

@SiTaggart - Sorry was losing track of this discussion. I think we can close this discussion topic. One of my team mate confirmed that switching the Theme.provider from “console” to “default” no longer shows this error.

[sansanketdg]

One of my team mate confirmed that switching the “Theme.provider” from “console” to “default” no longer shows this error.