Preview does not open blok in the sidebar after clicking the element in de preview editor.

[LucaMargadant]

Hi there, i really hope i didn't overlooked something here. Im currently facing an issue since storyblok version 4.5 after the update for Nuxt 3 Stable. Does everyone else facing this issue?

If clicking on an element inside Storyblok Visual Editor the desired Blok does not open in the sidepanel. The console shows following error:

(anonymous) @ storyblok-v2-latest.js:1 handleOpenBlok @ storyblok-v2-latest.js:1 handleWindowClick @ storyblok-v2-latest.js:1 VM1789:1 Uncaught SyntaxError: "undefined" is not valid JSON at JSON.parse (<anonymous>) at storyblok-v2-latest.js:1:11649 at m.handleOpenBlok (storyblok-v2-latest.js:1:11659) at m.handleWindowClick (storyblok-v2-latest.js:1:11405)

Otherwise, while opening a blok manually and changing the bloks content the visual editor updates his content. The Bug only affects the selecting / clicking on a blok.

---

Expected Behavior

Expect storyblok to open desired block at sidepanel.

Additional Information

Node: v16.18.0

Package.json:

"@storyblok/nuxt": "^4.6.0",
"nuxt": "^3.0.0",

Implementation:

const storyStore = useStoryStore();
await storyStore.fetchCurrentStory();
const data = ref(storyStore.getCurrentStory);

onMounted(() => {
    const runtimeConfig = useRuntimeConfig();
    const route = useRoute();

    // If version is draft, load the bridge to support storybloks preview
    const version = route.query._storyblok || runtimeConfig.NODE_ENV === 'development' ? 'draft' : 'published';

    if (version === 'draft') {
        useStoryblokBridge(data.value.story.id, (evStory) => {
            data.value.story = evStory;
        });
    }
});

Pinia Store for stories:

export default defineStore('StoryStore', {
    state: () => ({
        data: {},
    }),

    actions: {
        async fetchCurrentStory() {
            const storyblokApi = useStoryblokApi();

            // Get current story based on route path and version
            const route = useRoute();
            const runtimeConfig = useRuntimeConfig();
            const version = route.query._storyblok || runtimeConfig.NODE_ENV === 'development' ? 'draft' : 'published';
            const path = route.path === '/' ? '/home' : route.path;

            try {
                const { data } = await storyblokApi.get(`cdn/stories${path}`, {
                    version,
                });

                this.data = data;
            } catch (e) {
                throw createError({
                    statusCode: res.response.status,
                    message: res.response.status === 404
                        ? 'Diese Seite existiert leider nicht.' : res.response.data,
                });
            }
        },
    },

    getters: {
        getCurrentStory(state) {
            return state.data;
        },
    },
});

Nuxt Config

['@storyblok/nuxt', {
    accessToken: process.env.STORYBLOK_TOKEN,
    bridge: true,
    useApiClient: true,
}],

[SebbeJohansson]

Is the reason behind not using useStoryblok() to be able to store the story outside of the page and in the pinia store?

[reinoldus]

I have the same issue on storyblok-nuxt-2

[reinoldus]

Last comment in this issue has the fix storyblok/storyblok-nuxt-2#62

You are probably in "published" mode while editing the page. The bridge could probably throw a meaningful error in that case.

[Dawntraoz]

Since this is no longer an issue in the up-to-date projects, I'm closing the issue. If someone ever faces a problem with the Visual Preview you can always open a new issue with the version you are using currently! 🎉