将Node.js项目转为Yarn后react-scroll失效的排查求助

以下是针对该问题的具体排查建议：

• 核对依赖版本兼容性
  切换 Yarn 后，react-scroll 的安装版本可能和之前 npm 环境不一致。检查 package.json 中 react-scroll 的版本号，对比旧的 package-lock.json 和新的 yarn.lock，确认是否安装了不兼容当前 React 版本的新版本。如果是，指定一个兼容版本重新安装：

  yarn add react-scroll@x.x.x
  

• 清理 Yarn 缓存并重装依赖
  Yarn 缓存可能导致依赖安装异常，执行以下步骤重置：

  rm -rf node_modules yarn.lock
  yarn cache clean
  yarn install
  

• 检查组件使用细节
  部分 react-scroll 版本对使用方式有要求：

  • 确认 smooth 属性是否需要显式赋值为布尔值：将 smooth 改为 smooth={true}，避免 JSX 布尔属性解析问题；
  • 如果目标元素在自定义滚动容器内（而非全局窗口），给 Link 添加 containerId 属性指定滚动容器的 id；
  • 尝试用 react-scroll 提供的 <Element> 组件包裹目标区域，替代原生 div id：

    import { Element } from 'react-scroll';
    
    <Element name="portfolio">
      <div>
        <p>stuff in here and words </p>
      </div>
    </Element>
    

• 查看浏览器控制台报错
  打开浏览器开发者工具的 Console 面板，查看是否有 react-scroll 相关的错误提示（比如找不到目标元素、依赖缺失等），这些信息能直接定位问题。

• 排除其他代码干扰
  创建一个极简测试组件，只保留 react-scroll 的核心用法，测试是否能正常滚动：

  import { Link } from 'react-scroll';
  
  function TestScroll() {
    return (
      <div>
        <Link to="test" smooth={true} duration={500}>
          Go to Test
        </Link>
        <div style={{ height: '1000px' }}></div>
        <div id="test">Test Target</div>
      </div>
    );
  }
  

  如果这个最简示例能正常工作，说明问题出在项目其他代码（比如全局样式、滚动事件监听、路由冲突等）。

• 确认 peerDependencies 安装正确
  react-scroll 依赖 React 和 ReactDOM，检查 package.json 中是否存在这两个依赖，且版本符合 react-scroll 的要求。

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