Docusaurus推荐的组件导入语句报错无法解析模块如何解决

• 相对路径层级计算错误：报错的Markdown文件位于docs/theirlabel/二级目录下，此前尝试的../src/components/figure仅向上返回1级目录到docs/文件夹，无法定位到项目根目录下的src组件目录。
• 文件名大小写匹配失败：Linux类编译环境对路径大小写严格敏感，若组件实际文件名为大写开头的Figure.jsx，导入时写小写figure会直接触发模块找不到错误。
• 别名配置异常：@site是Docusaurus默认指向项目根目录的路径别名，若手动修改过webpack解析配置、或项目目录结构不符合官方初始化约定，会导致别名无法正常解析，该问题在原生模板创建的项目中极少出现。

1. 先用相对路径验证可用性：从docs/theirlabel/latest.md的位置出发，向上跳转2级即可到达项目根目录，正确导入写法为：

   import Figure from '../../src/components/figure'
   

   Docusaurus默认配置支持自动识别.js/.jsx/.ts/.tsx后缀，导入时不需要手动写文件后缀。
2. 核对文件命名大小写：进入src/components/目录确认组件文件的实际命名，若文件为大写开头的Figure.jsx，同步修改导入路径的大小写即可：

   // 对应文件名为Figure.jsx的写法
   import Figure from '../../src/components/Figure'
   

3. 恢复@site别名可用性：如果相对路径导入正常、但@site开头的路径依旧报错，检查docusaurus.config.js中的webpack自定义配置，不要手动覆盖默认的@site别名规则；修复后删除项目根目录下的.docusaurus缓存文件夹，重启开发服务即可使用官方推荐的别名导入写法。
4. 若上述操作后仍报错，检查figure组件文件是否存在、是否放在src/components/目录下，确认文件位置没有放错。

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