“@storyblok/astro”包中缺少“./components/StoryblokComponent.astro”说明符

Question

我正在构建一个 Astro 应用程序以及 StoryBlok。 我遵循这个教程 - (https://www.storyblok.com/tp/add-a-headless-cms-to-astro-in-5-mines)

我创建了一个 Storyblok 文件夹和多个名为“Teaser”、“Page”、“Grid”和“Feature”的 Astro 文件。 在“Page.astro”和“Grid.astro”中，有这样的重要内容- 从 '@storyblok/astro/components/StoryblokComponent.astro' 导入 StoryblokComponent 但 astro 似乎无法导入这些组件......

错误如下-

我去node_modules查看了@storyblok文件夹，特别是“StoryblokComponent.astro”。 然后我看到该文件内的导入也有错误...

我似乎无法找到/理解我应该做什么...我遵循了教程的每一步，并且互联网似乎没有很多有关此问题的有用的故障排除信息。安装这么难、这么深，似乎有点奇怪。

这是我的 StoryblokComponent.astro 代码，放置在 node_modules -> @storyblok -> astro -> Components 中

---
import components from "virtual:storyblok-components";
import options from "virtual:storyblok-options";
import camelcase from "camelcase";
import type { SbBlokData } from "./dist/types";
import type { AstroComponentFactory } from "astro/dist/runtime/server";

interface Props {
  blok: SbBlokData;
  [prop: string]: unknown;
}

const { blok, ...props } = Astro.props;

if (!blok) {
  throw new Error(
    "Cannot render StoryblokComponent. 'blok' prop is undefined."
  );
}

/**
 * convert blok components to camel case to match vite-plugin-storyblok-components
 */
let key = camelcase(blok.component);

const componentFound: boolean = key in components;

let Component: AstroComponentFactory;

if (!componentFound) {
  if (!options.enableFallbackComponent)
    throw new Error(
      `Component could not be found for blok "${blok.component}"! Is it defined in astro.config.mjs?`
    );
  else {
    Component = components["FallbackComponent"];
  }
} else {
  Component = components[key];
}
---

<Component blok={blok} {...props} />

Answer 1

您运行的是哪个版本的

astro

和

@storyblok/astro

？我以前没有见过这个错误。你还在挣扎还是已经解决了？

如果仍然是问题，您能否分享一个最小的可重现示例和/或打开一个新问题以便我们进一步调查？

期待您的回复，让我们为您开始 Storyblok + Astro 之旅做好准备。 🚀