I followed the Storyblok documentation and have the exact same files.
But I still get the server error, "Component page doesn't exist." despite having the page component in the "components" object of the function storeblokInit.
I've restarted a few times and I get this error pretty frequently despite following different docs.
src/lib/storyblok.ts
import Page from '@/components/Page'
import { apiPlugin, storyblokInit, getStoryblokApi } from '@storyblok/react'
storyblokInit({
accessToken: process.env.NEXT_PUBLIC_STORYBLOK_API_KEY,
use: [apiPlugin],
apiOptions: {
region: 'us',
},
components: {
page: Page,
},
})
export { getStoryblokApi }
src/app/layout.tsx
import StoryblokProvider from "@/components/StoryblokProvider";
import "./globals.css";
export default function RootLayout({
children,
}: Readonly<{
children: React.ReactNode;
}>) {
return (
<StoryblokProvider>
<html lang="en">
<body>
{children}
</body>
</html>
</StoryblokProvider>
);
}
src/components/StoryblokProvider.jsx
'use client';
import { getStoryblokApi } from '@/lib/storyblok';
export default function StoryblokProvider({ children }) {
getStoryblokApi();
return children;
}
src/app/page.tsx
import { getStoryblokApi } from '@/lib/storyblok';
import { StoryblokStory } from '@storyblok/react/rsc';
export default async function Home() {
const { data } = await fetchData();
return (
<div>
<StoryblokStory story={data.story} />
</div>
);
}
export async function fetchData() {
const storyblokApi = getStoryblokApi();
return storyblokApi.get('cdn/stories/home', { version: 'draft' });
}
src/components/Page.jsx
import { storyblokEditable, StoryblokServerComponent } from '@storyblok/react/rsc';
const Page = ({ blok }) => (
<main {...storyblokEditable(blok)}>
{blok.body.map(nestedBlok => (
<StoryblokServerComponent blok={nestedBlok} key={nestedBlok._uid} />
))}
</main>
);
export default Page;
Have tried following different docs Regularly restarted the server Re-installed any packages I thought I may have missed
And despite the code being exactly the same, I keep getting this error.