使用组件开发Directus自定义布局扩展时构建失败求助

问题描述 #

通过npm init directus-extension创建Directus自定义布局扩展，原本可正常构建index.js并在本地Directus应用中安装。但在layout.vue中引入ProblemCard组件后，执行构建命令时出现如下错误：

✖ Failed
[RollupError] Could not resolve "./ProblemCard" from "src/layout.vue?vue&type=script&lang.js"

C:\Users\Martin\Documents\GitHub\systainchange\directus-extension-preflight-dashboard_old\src\layout.vue?vue&type=script&lang.js
RollupError: Could not resolve "./ProblemCard" from "src/layout.vue?vue&type=script&lang.js"
    at error (C:\Users\Martin\Documents\GitHub\systainchange\directus-extension-preflight-dashboard_old\node_modules@directus\extensions-sdk\node_modules\rollup\dist\shared\rollup.js:271:30)
    at ModuleLoader.handleInvalidResolvedId (C:\Users\Martin\Documents\GitHub\systainchange\directus-extension-preflight-dashboard_old\node_modules@directus\extensions-sdk\node_modules\rollup\dist\shared\rollup.js:24275:24)
    at C:\Users\Martin\Documents\GitHub\systainchange\directus-extension-preflight-dashboard_old\node_modules@directus\extensions-sdk\node_modules\rollup\dist\shared\rollup.js:24237:26

同时疑问：自定义布局中是否支持使用组件？

解答 #

Directus自定义布局完全支持引入并使用自定义组件，这个错误是Rollup无法定位到组件文件导致的，按以下步骤排查解决：

• 核对组件文件路径
  确认ProblemCard.vue（或对应组件文件）与layout.vue的目录关系。如果组件在子目录（比如src/components/ProblemCard.vue），则引入路径要改为./components/ProblemCard；若在同一目录，确保路径书写无误。
• 严格匹配文件名大小写
  Windows系统文件名不区分大小写，但Rollup解析时会严格校验。确保引入语句中的文件名和实际文件的大小写完全一致，比如实际是ProblemCard.vue，就不能写成problemCard。
• 明确指定组件文件后缀（可选）
  部分场景下Rollup需要明确.vue后缀才能正确解析，尝试将引入语句修改为：

  import ProblemCard from './ProblemCard.vue'
  

• 依赖环境排查（极端情况）
  若以上操作无效，检查@directus/extensions-sdk版本是否与本地Directus版本匹配；尝试删除node_modules、package-lock.json后重新执行npm install，再重新构建。

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