Missing "./components/StoryblokComponent.astro" specifier in "@storyblok/astro" package

[johnnymcneil]

Describe the issue you're facing

I have followed Storyblok's guide on integrating with Astro (seems to be nearly identical to the guide found on docs.astro.build) I'm met with the following error:

Missing "./components/StoryblokComponent.astro" specifier in "@storyblok/astro" package

I found the following three errors in @storyblok/astro/components/StoryblokComponent.astro:

Error on Line 2

Error on Line 3

Error on Line 24

I'm new to Storyblok and its codebase so I don't have any solutions off-hand, but I will continue digging into this on my own. That being said, any help would be appreciated.

Reproduction

https://github.com/johnnymcneil/storyblok-astro-bug

Steps to reproduce

Setup Storyblok

1. Create a new Space
2. Update the space settings to use https://localhost:4321 as default preview URL
3. Note the Access Token found in settings as well
4. Create a new block called blogPost with the following fields

• title - A text field
• description - A text field
• content - A rich text field

5. Create a new story with the blogPost content type named test-post. Fill in the fields with any text you like.

Prepare new Astro project

1. npm create astro@latest
2. Create a .env file in the root of your project with the following variable, where YOUR_ACCESS_TOKEN is the access token found in the Storyblok space settings:

.env

STORYBLOK_TOKEN=YOUR_ACCESS_TOKEN

6. Install dependencies with npm install @storyblok/astro vite
7. We also need an SSL plugin for Astro's dev server to satisfy to satisfy Storyblok, install with npm install -D @vitejs/plugin-basic-ssl
8. Modify astro.config.mjs to include the Storyblok integration and vite plugin:

astro.config.mjs

import { defineConfig } from 'astro/config';
import storyblok from '@storyblok/astro';
import { loadEnv } from 'vite';
import basicSsl from '@vitejs/plugin-basic-ssl';

const env = loadEnv('', process.cwd(), 'STORYBLOK');

export default defineConfig({
  vite: {
    plugins: [basicSsl()],
    server: {
      https: true
    }
  },
  integrations: [
    storyblok({
      accessToken: env.STORYBLOK_TOKEN,
      components: {
        blogPost: 'storyblok/BlogPost',
        blogPostList: 'storyblok/BlogPostList',
        page: 'storyblok/Page'
      },
      apiOptions: {
        region: 'us'
      }
    })
  ]
});

9. Create new folder src/storyblok
10. Create new file src/storyblok/BlogPost.astro

src/storyblok/BlogPost.astro

---
import { storyblokEditable, renderRichText } from '@storyblok/astro'

const { blok } = Astro.props
const content = renderRichText(blok.content)
---

<article {...storyblokEditable(blok)}>
  <h1>{blok.title}</h1>
  <p>{blok.description}</p>
  <Fragment set:html={content} />
</article>

11. Create a new page in the src/pages/ directory named test-post.astro with the following content:

src/pages/test-post.astro

---
import { useStoryblokApi } from '@storyblok/astro'
import StoryblokComponent from '@storyblok/astro/StoryblokComponent.astro'

const storyblokApi = useStoryblokApi()

const { data } = await storyblokApi.get("cdn/stories/test-post", {
  version: import.meta.env.DEV ? "draft" : "published",
});

const content = data.story.content;
---
<StoryblokComponent blok={content} />

12. Run astro dev server with npx astro dev

Finally, attempt to load your test content. The error will display.

System Info

System:
    OS: Windows 11 10.0.22621
    CPU: (32) x64 13th Gen Intel(R) Core(TM) i9-13900K
    Memory: 50.77 GB / 63.77 GB
Binaries:
    Node: 20.9.0 - C:\Program Files\nodejs\node.EXE
    npm: 10.3.0 - C:\Program Files\nodejs\npm.CMD
Browsers:
    Edge: Chromium (120.0.2210.144)
    Internet Explorer: 11.0.22621.1

Used Package Manager

npm

Error logs (Optional)

No response

Validations

• Follow our Code of Conduct

[johnnymcneil]

The error magically went away 🤷 not sure what to make of that. I'll continue updating if it doesn't stay resolved

[n-seine]

Exact same issue here. According to this SO question, it's a known bug, that no one figured yet and that pops randomly ... which is weird

[RockBacon9922]

From what I have found out it is something to do with module resolution with typescript.

By default the astro config has it's module resolution quite low so if I set my module resolution to this:

tsconfig.json

{
  "extends": "astro/tsconfigs/strict",
  "compilerOptions": {
    "moduleResolution": "NodeNext",
  },
}

I am guessing it has something to do with these virtual imports in StoryblokComponent.astro

StoryblokComponent.astro

import components from "virtual:storyblok-components";
import options from "virtual:storyblok-options";

[schabibi1]

Good to hear, @johnnymcneil !
@n-seine @RockBacon9922 Could you upgrade @storyblok/astro version to 4.0.3? I tested it, and it works.

Closing it as it works with the newer version of the SDK, but if you face a similar issue, feel free to re-open it.