开发环境CSSTransition无法作为JSX组件使用，生产环境正常

动画功能正常，但页面加载时浏览器及VS Code均抛出以下TypeScript错误：

'CSSTransition' cannot be used as a JSX component.
  Its instance type 'CSSTransition<HTMLElement | undefined>' is not a valid JSX element.
    The types returned by 'render()' are incompatible between these types.
        Type '{}' is not assignable to type 'ReactNode'.ts(2786)

相关组件代码 #

import React, { PropsWithChildren, useState } from 'react';
import { useTranslation } from 'react-i18next';
import './collapsibleSection.scss';
import { ReactComponent as ChevronDown } from '~/assets/icons/chevron_down.svg';
import { FlatButton } from '../flatButton/FlatButton';
import { CSSTransition } from 'react-transition-group';

type CollapsibleSectionProps = {
  color: 'blue' | 'yellow';
};

export function CollapsibleSection({ children, color = 'yellow' }: PropsWithChildren<CollapsibleSectionProps>) {
  const [t] = useTranslation();
  const [isOpen, setIsOpen] = useState(false);

  return (
    <section className={`collapsible-section ${isOpen ? 'collapsible-section--open' : ''}`}>
      <h2>
        <FlatButton
          ariaExpanded={isOpen}
          buttonType={color === 'yellow' ? 'light' : 'dark'}
          onClick={() => setIsOpen(!isOpen)}
          title={t('guide.viewMore')}
        >
          <ChevronDown className="collapsible-section__icon" aria-hidden="true" />
        </FlatButton>
      </h2>
      <CSSTransition in={isOpen} timeout={300} classNames="animation" unmountOnExit>
        <div>{children}</div>
      </CSSTransition>
    </section>
  );
}

已尝试更新react-transition-group包及类型定义但无效，寻求解决方案。

• 锁定兼容版本：该报错核心是react-transition-group与@types/react版本不匹配。执行以下命令安装经过验证的兼容版本：

  npm install react-transition-group@4.4.5 @types/react-transition-group@4.4.6 --save-exact
  

• 显式指定泛型类型：给CSSTransition明确指定包裹元素的类型，避免TypeScript推断错误：

  <CSSTransition<HTMLDivElement> in={isOpen} timeout={300} classNames="animation" unmountOnExit>
    <div>{children}</div>
  </CSSTransition>
  

• 清理依赖缓存：如果版本更新后报错依旧，按以下步骤操作：

  1. 删除node_modules文件夹和package-lock.json（或yarn.lock）
  2. 执行npm install（或yarn install）
  3. 重启VS Code的TypeScript服务（快捷键：Ctrl+Shift+P → 选择「TypeScript: Restart TS Server」）

• 临时绕过检查（应急用）：若以上方法均无效，可临时用// @ts-ignore跳过报错，但不推荐长期使用：

  // @ts-ignore
  <CSSTransition in={isOpen} timeout={300} classNames="animation" unmountOnExit>
    <div>{children}</div>
  </CSSTransition>
  

内容的提问来源于stack exchange，提问作者dcmswim