arorachakit
commented
4 weeks ago Hey @grantspilsbury ! I tried the stackblitz link with a couple of changes - I just removed the preview/config options for testing. And it works for me!
What I mean is the setup you have works. Regarding questions -
- I think the context is an issue here, because it is falsy - it might have been loading the published version which is not editable. But as you consoled it, it looks good - so not sure.
- If you have your own mapper, then you don't need StoryblokComponent.
- No you don't need the provider in this case
Also - just a suggestion, since you're already fetching the story in StaticProps, you don't need to fetch that again, you can just use useStoryblokState
Here is the code, that I tried (it is yours, I just removed a few things to test and added useStoryblokState as well, though it works with useStoryblok too) Please let me know if you face more issues, or if live editing is still an issue. You can use this to compare and see if there was anything that was causing the issue.
Also, another quick question - is it happening on dev or prod or both?
import {
storyblokInit,
apiPlugin,
useStoryblok,
getStoryblokApi,
storyblokEditable,
useStoryblokState
} from "@storyblok/react";
import React from 'react'
// Function to get story by slug
const getStoryBySlug = async (slug) => {
const params = {
version: 'draft',
cv: Date.now()
}
const storyblokApi = getStoryblokApi()
const { data } = await storyblokApi.get(`cdn/stories/${slug}`, params)
return data.story
}
export const mapPanel = (data) => ({
title: data.title.replace(/(^"|"$)/g, '')
})
// Sample Panel component
const Panel = ({ title }) => (
<div className="panel">
{title}
</div>
)
const componentMap = {
panel: [Panel, mapPanel]
}
// Components map
const components = {
panel: Panel,
// Add other components here
}
// Initialize Storyblok
storyblokInit({
accessToken: 'Td6uuk4Q2JYJH3uzOuOyIgtt',
use: [apiPlugin],
components
})
// Custom component mapper
const ComponentMapper = ({ blok }) => {
const [Component, mapFn] = componentMap[blok.component] ?? []
const props = mapFn ? mapFn(blok) : {}
return (
<div {...storyblokEditable(blok)} key={blok._uid}>
<Component {...props} />
</div>
)
}
// Home component
const Home = ({ story }) => {
const editableContent = useStoryblokState(story)
const content = editableContent?.content || {}
const { panel = [], body = [] } = content
return (
<main>
{(panel ?? []).map((blok) => (
<ComponentMapper blok={blok} key={blok._uid} />
))}
{(body ?? []).map((blok) => (
<ComponentMapper blok={blok} key={blok._uid} />
))}
</main>
)
}
export default Home
// Static props for the Home component
export const getStaticProps = async (context) => {
console.log(context)
const story = await getStoryBySlug('home')
return {
props: {
story
},
revalidate: 3600
}
}```
grantspilsbury
pvhuwung
Describe the issue you're facing
I am trying to get live editing working for @storyblok-react on my Nextjs 14 site (not using App router). The HTML looks ok but live editing is not working. The latest version of https://app.storyblok.com/f/storyblok-v2-latest.js is being loaded.
This is the code I have added:
When logging editable content it also looks ok:
The rendered HTML looks something like this
Reproduction
https://stackblitz.com/edit/stackblitz-starters-uh3eae?file=pages%2Findex.jsx
Steps to reproduce
No response
System Info
Used Package Manager
npm
Error logs (Optional)
No response
Validations