从Docusaurus v3.4.0升级到v3.5.2遇组件报错求助

问题1：@theme/Unlisted 组件找不到 #

原因：Docusaurus v3.5.x 版本中已移除 @theme/Unlisted 组件，官方用 ContentVisibility 组件替代。

问题2：替换为 ContentVisibility 后出现导入错误 #

原因：使用了默认导入方式，但 ContentVisibility 是命名导出组件；同时组件接收的 props 参数和原 Unlisted 不同。

解决步骤： #

1. 修正导入方式
   将默认导入改为命名导入：

   // 错误写法
   // import ContentVisibility from '@theme/ContentVisibility';
   
   // 正确写法
   import { ContentVisibility } from '@theme/ContentVisibility';
   

2. 调整组件使用参数
   ContentVisibility 接收 isVisible 属性控制内容是否可见，需要从页面元数据中提取「未列出」状态并反向传入：

   • 对于 BlogPostPage：

     const isUnlisted = metadata.unlisted;
     <ContentVisibility isVisible={!isUnlisted} />
     

   • 对于 DocItem/Layout：

     import useDoc from '@theme/hooks/useDoc';
     
     const { doc } = useDoc();
     const isUnlisted = doc.frontMatter.unlisted;
     <ContentVisibility isVisible={!isUnlisted} />
     

3. 确保所有依赖版本一致
   检查 package.json 中所有 Docusaurus 相关包（如 @docusaurus/core、@docusaurus/preset-classic）是否都升级到 v3.5.2，运行命令统一更新：

   npm update @docusaurus/core @docusaurus/preset-classic --save
   

4. 清理缓存并重新构建
   清除旧缓存避免残留问题：

   npm run clear
   npm run build
   

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