3

I generated a custom layout extension for directus with npm init directus-extension. This works fine and I can build a index.js, which I can install in my local directus app. But when I want to use components in my layout.vue file (in this case ProblemCard) running the build then brings following error:

✖ 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

Any help or idea how I can solve that? Is it possible to use components in custom layouts?

Daniel Steinmann
  • 2,119
  • 2
  • 15
  • 25
EdMadd
  • 71
  • 5

1 Answers1

1

The mentioned directus uses Vite for the translation. See here:
https://github.com/directus/examples/blob/main/vue/package.json

So there is an issue with importing the file to Vite.

Vite - Error: Could not resolve XY file

The meaning of the Could not resolve error message in Vite is that it can't find the required file or module. This could be because you used an incorrect file path, or the module or file is missing from the project.

Vite - How to import *.vue files

The extension-less import was intentionally removed from Vite, which is also followed in vue-cli.

The correct way of importing always includes the extension!

For example Page.vue importing

// Not working !!!
import Page from "Page" // don't use this

// Successfully !!!
import Page from "Page.vue"

You can read more about this issue here:
https://github.com/vitejs/vite/issues/178

rozsazoltan
  • 2,831
  • 2
  • 7
  • 20