Embedded visual preview returning 422 error in editor

[studiolathe]

Hi there

I have been using Storyblok v1 + Nuxtjs for quite some time without issue, but I am currently stuck on a bug I'm not sure how to fix so I thought it would worth asking for some help!

When attempting to edit an internal page I am receiving a Status code 422 error in the embedded visual preview? When checking the console > Network > Preview on the request it returns the message:

error: "Parameter(s) _storyblok, _storyblok_c, _storyblok_lang, _storyblok_release, _storyblok_rl, _storyblok_tk not allowed"

The content loads fine locally outside of the Storyblok editor but this error means the client can no longer see the preview. It only happens in one particular page so I am struggling to debug.

Any help would be greatly appreciated!

[venux92]

Same issue for me after updating from v1 to v2 and following the documentation.

[samuells]

Thank you for the reports. It is quite hard to say what could be the problem from the error, but first, could you try to update your storyblok/nuxt package to the latest version? -> https://www.npmjs.com/package/@storyblok/nuxt

We made a few improvements, and it would be interesting if it is also happening there.

Please be aware that the with are unifying the modules naming, and the latest version of nuxt modules is @storyblok/nuxt, so you will have to rename the module in nuxt.config.js.

All the necessary info for transition is here -> https://www.npmjs.com/package/@storyblok/nuxt + check the link for the Live demo.

[fgnass]

@studiolathe @venux92 Did you find a solution or figure out the cause? I'm currently running into the same problem.

[oezkancodes]

If you are using the URL-parameter from your dynamic routes to fetch your data, then use route.path instead of route.fullPath. The problem is, route.fullPath will contain additional queries from Storyblok.

Example:

const route = useRoute();
const storyblokApi = useStoryblokApi();
const story = storyblokApi.get('cdn/stories' + route.path); // not route.fullPath

[studiolathe]

@samuells Thanks for the reply and sorry for not getting back to you sooner!

I have followed your steps migrating to latest package (although the related project is built on Nuxt 2 so I have installed @storyblok/nuxt-2 and @nuxtjs/composition-api) and updated to Storyblok V2 but the error continues to persist on all child pages (i.e. /journal/_slug.vue) but not on parent pages, which leaves the live preview editor unusable.

Are you able to provide any further guidance or advice?

On a related note, Nuxt can only run @storyblok/nuxt-2 when build.standalone: true is defined in the config (otherwise there are child dependency issues) but there are now server errors stoping the production from building? Error below:

ERROR in ./node_modules/pathe/dist/index.cjs 174:43
Module parse failed: Unexpected token (174:43)
You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file. See https://webpack.js.org/concepts#loaders
| };
| const format = function(p) {
>   const segments = [p.root, p.dir, p.base ?? p.name + p.ext].filter(Boolean);
|   return normalizeWindowsPath(p.root ? resolve(...segments) : segments.join("/"));
| };
 @ ./node_modules/@nuxtjs/composition-api/dist/runtime/index.mjs 628:28-44
 @ ./.nuxt/composition-api/plugin.mjs
 @ ./.nuxt/index.js
 @ ./.nuxt/server.js
 @ multi ./node_modules/@nuxt/components/lib/installComponents.js ./.nuxt/server.js

Do you know why this might be the cause?

Thanks in advance!

[alvarosabu]

Hi @studiolathe, sorry for the late response, is this error still happening to you, were you able to find a solution?

[alvarosabu]

I'm closing the issue due to inactivity, please feel free to reopen if the issue still happening. Thanks!

[studiolathe]

Hi @alvarosabu

Please excuse the delayed response!

Yes, unfortunately the issue seems to persist and I am struggling to find the definitive guidance on how to manage the correct setup for staging and production environments with Storyblok, particularly with SSR projects.

For context I have managed to get the Live Preview editor working in live statically generate environments by using the settings your SB team responded with in my Github issue here: storyblok/storyblok-nuxt-2#62 i.e. using preview token for draft and public for published and having two seperate builds on Netlify respectively, one serving the preview and one for published.

Although, in my current SSR project I am able edit the /home (index page) and see live changes in the editor and frontend but when editing another page i.e. /about I continue to receive the below 422 error from a network request:

"error":"Parameter(s) _storyblok, _storyblok_c, _storyblok_version, _storyblok_lang, _storyblok_release, _storyblok_rl, _storyblok_tk not allowed"}

When reviewing the network tab it seems there is a request that is successful and then an additional request that causes the error that has a series of additional queries added (FYI I have hidden tokens below)?

https://api.storyblok.com/v2/cdn/stories//about?_storyblok=305311654&_storyblok_c=page&_storyblok_version&_storyblok_lang=default&_storyblok_release=0&_storyblok_rl=1685756429223&_storyblok_tk%5Bspace_id%5D=xxxxxx&_storyblok_tk%5Btimestamp%5D=1685756429&_storyblok_tk%5Btoken%5D=xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx&version=draft&token=xxxxxxxxxxxxxxxxxxxxxxx&cv=undefined

Do we know why this second request is happening?

For further context my nuxt.config.js:

["@storyblok/nuxt-2/module", {
      accessToken: (process.env.STAGING === 'true' || process.env.NODE_ENV === 'development') ? process.env.STORYBLOK_API_TOKEN_STAGING : process.env.STORYBLOK_API_TOKEN,
      useApiClient: true,
      apiOptions: {
        cache: {
          clear: 'auto',
          type: 'memory',
        },
      },
    }],

And then the asyncData request in page template:

asyncData: async (context) => {
  const version =
    context.query._storyblok || context.$config.staging === "true"
      ? "draft"
      : "published";
  const storyblokApi = useStoryblokApi();
  const { data } = await storyblokApi.get("cdn/stories/about", {
    version: version,
  });

  return { story: data.story };
},

I am not sure if I am misunderstanding something and I am just looking for the correct and desired approach as the docs is isn't clear in this regards?

As always, I appreciate any help you could provide!

[jackbarham]

If you are using the URL-parameter from your dynamic routes to fetch your data, then use route.path instead of route.fullPath. The problem is, route.fullPath will contain additional queries from Storyblok.

Example:

const route = useRoute();
const storyblokApi = useStoryblokApi();
const story = storyblokApi.get('cdn/stories' + route.path); // not route.fullPath

I had this issue. Changing from route.fullPath to route.path worked.