[Projeto] [Ajuda] Mensagem de erro no parseStyleSheet

Oi, Thiago, tudo bem?

Analisando o seu projeto e o erro que está acontecendo, o problema é exatamente um conflito de versões.

O curso foi gravado utilizando React 18, onde a propriedade defaultProps era a forma padrão de definir valores iniciais. O seu projeto está rodando com React 19 (vi pelo seu package.json), e nessa nova versão, o defaultProps foi descontinuado para componentes de função.

Por isso, quando o código tenta ler a cor (colorVariant) ou o estilo (styleSheet), eles chegam como undefined (vazios), gerando o erro Cannot read properties of undefined.

Para resolver isso e você conseguir seguir a aula normalmente, precisamos apenas ajustar onde definimos os valores padrão, mantendo a mesma lógica do curso.

Aqui estão os códigos ajustados para o seu projeto:

1. Ajuste no src/theme/baseComponent.tsx

Neste arquivo, vamos garantir que o styleSheet inicie como um objeto vazio {} direto nos parâmetros da função.

import React from "react";
import styled from "styled-components";
import { StyleSheet } from '@src/theme/styleSheet';
import { parseStyleSheet } from "@displaykit/responsive_styles";

interface StyledBaseComponentProps {
  styleSheet?: StyleSheet;
  ref: any;
}

const StyledBaseComponent = styled.div<StyledBaseComponentProps>`
  display: flex;
  flex-direction: column;
  align-content: flex-start;
  flex-shrink: 0;
  ${({ styleSheet }) => parseStyleSheet(styleSheet ?? {})}
`;

interface BaseComponentProps {
  styleSheet?: StyleSheet;
  [key: string]: any;
};

export const BaseComponent = React.forwardRef<unknown, BaseComponentProps>((props, ref) => {
  const { styleSheet = {}, ...rest } = props; 
  
  return (
    <StyledBaseComponent ref={ref} styleSheet={styleSheet} {...rest} />
  )
});

2. Ajuste no src/components/link/link.tsx

Este é o causador do erro reading 'x500'. Vamos mover o 'primary' e o true para dentro dos parâmetros também.

import React from 'react';
import NextLink from 'next/link';
import Text from "../text/text";
import { StyleSheet } from "@src/theme/styleSheet";
import { ThemeTypographyVariants } from "@src/theme/theme";
import { useTheme } from "@src/theme/themeProvider";

interface LinkProps {
  href: string;
  children: React.ReactNode;
  styleSheet?: StyleSheet;
  variant?: ThemeTypographyVariants;
  colorVariant?: 'primary' | 'accent' | 'neutral' | 'success' | 'warning' | 'negative';
  colorVariantEnabled?: boolean;
}

const Link = React.forwardRef(({
  href,
  children,
 
  colorVariant = 'primary', 
  styleSheet,
  colorVariantEnabled = true,
  ...props
}: LinkProps, ref) => {
  const theme = useTheme();
  const isIExternalLink = href.startsWith('http');

  const currentColorSet = {
    color: theme.colors[colorVariant].x500,
    hover: {
      color: theme.colors[colorVariant].x400,
    },
    focus: {
      color: theme.colors[colorVariant].x600,
    }
  };

  const linkProps = {
    tag: 'a',
    ref,
    children,
    href,
    styleSheet: {
      textDecoration: 'none',
      ...(colorVariantEnabled && {
        color: currentColorSet.color,
      }),
      ...styleSheet,
      hover: {
        ...styleSheet?.hover,
        ...(colorVariantEnabled && {
          color: currentColorSet.hover.color,
        })
      },
      focus: {
        ...styleSheet?.focus,
        ...(colorVariantEnabled && {
          color: currentColorSet.focus.color,
        })
      },
    },
    ...props
  }

  if(isIExternalLink) return (
    <Text 
      {...{
        target: '_blank',
        ...linkProps,
      }}
    />
  )

  return (
    <NextLink href={href} passHref>
      <Text {...linkProps} />
    </NextLink>
  )
});

export default Link;

Com essas alterações, seu código fica compatível, faça o teste!

Bons estudos!

Sucesso ✨

Victor muito obrigado ! eu estava justamente vendo sobre o default properties esses dias e pesquisando na documentação , o bom de ir fazendo com a versao mais atualizada é que vamos aprendendo conforme o projeto quebra kkk , muito obrigado !! com esses ajustes funcionou !