"You can only replace a Program root node with another Program node" error when trying to convert a convert a stateless component into a stateful one

[fr3fou]

import styled from 'styled-components';
import { Card, Button, Skeleton, Spin, Icon } from 'antd';

const { Meta } = Card;

const StyledCard = styled(Card)`
  border-radius: 7px;
  display: flex;
  flex-direction: column;
  text-align: center;
  margin: 8px 4px 0 4px;
  box-shadow: 0 2px 2px rgba(0, 0, 0, 0.12);
  flex-basis: 16rem;
  padding-bottom: 0;

  .ant-card-body {
    padding-top: 0;
    height: 100%;
  }

  & img {
    border-radius: 7px 7px 0 0;
    object-fit: cover;
    width: 100%;
    height: 16rem;
  }

  @media (max-width: 768px) {
    border-bottom: 1px solid;
    border-bottom-color: rgb(210, 210, 210);
    box-shadow: none;
    margin: 8px 0 0 0;
    flex-basis: 100%;
  }

  .ant-card-actions {
    background-color: #fff;
    border-top-color: rgb(210, 210, 210);
    border-radius: 0 0 7px 7px;
  }
`;

const StyledMeta = styled(Meta)`
  display: flex;
  flex-grow: 1;
  align-items: center;
  justify-content: center;
  height: 100%;
  & * {
    white-space: initial;
    overflow-wrap: normal;
  }
`;

interface Props {
  name: string;
  image: string;
  description: string;
  price: string;
}

const ViewMoreButton: any = styled(Button)`
  border: none;
  box-shadow: 0 2px 2px rgba(0, 0, 0, 0.12);
`;

const addDots = (str: string, limit: number) => {
  if (str.length > limit) {
    return [str.substring(0, limit) + '...', true];
  }

  return [str, false];
};

export default (props: Props) => {
  const [shortName, readMoreName] = addDots(props.name, 50);
  const [shortDesc, readMoreDesc] = addDots(props.description, 150);

  return (
    <StyledCard
      bordered={false}
      cover={
        <div>
          {true ? (
            <div
              style={{
                height: '16rem',
                display: 'flex',
                justifyContent: 'center',
                alignItems: 'center'
              }}
            >
              <Spin
                indicator={
                  <Icon
                    type="loading"
                    theme="outlined"
                    style={{ fontSize: '2.5rem', color: 'rgb(202, 202, 202)' }}
                    spin
                  />
                }
              />
            </div>
          ) : (
            <>
              <img alt="example" src={props.image} />
              <Button
                style={{
                  width: 44,
                  height: 44,
                  position: 'relative',
                  bottom: 22,
                  border: 'none',
                  boxShadow: '0 2px 2px rgba(0, 0, 0, 0.12)'
                }}
                icon="plus"
                shape="circle"
              />
            </>
          )}
        </div>
      }
      actions={
        /**
         * There is no need to render any buttons if the text can fit normally
         */
        (readMoreDesc || readMoreName) && !true
          ? [
              <ViewMoreButton size="small" icon="info">
                View more
              </ViewMoreButton>
            ]
          : []
      }
    >
      <Skeleton active loading={true} title={false}>
        <StyledMeta title={shortName} description={<p>{shortDesc}</p>} />
      </Skeleton>
    </StyledCard>
  );
};

Here's my code, whenever I try to select the component and try to convert it to a stateful one, I get the following message

You can only replace a Program root node with another Program node in an error, coming from VSCode:

[borislit]

hey @fr3fou . Thanks for reporting! Ill look at this ASAP and keep you posted!

[borislit]

@fr3fou fixed pushed. Check it out in the last version and keep me posted :)

[fr3fou]

Even after the update, I still get the error :/

[borislit]

@fr3fou Hey. Ill recheck

[borislit]

@fr3fou I see that the version was not released to VScode market. I will release it today