Sometimes I'm receiving: You can't use getStoryblokApi if you're not loading apiPlugin error

[nmsdvid]

Describe the issue you're facing

I'm using @storyblok/react/rsc in a Next.js app router setup and sometimes I'm getting an You can't use getStoryblokApi if you're not loading apiPlugin error. After a couple of page refresh the page works again. I already tried to do something like this:

  let storyblokApi = getStoryblokApi();
  if(!storyblokApi) {
    storyblokApi = getStoryblokApi();
  }

to prevent the issue from happening but with no luck. Actually the code used on the page is pretty straightforward.

import { getStoryblokApi } from "@storyblok/react/rsc"

async function getData() {
  let storyblokApi = getStoryblokApi();

  let { data: nav } = await storyblokApi.get(`cdn/stories/navigation`, { version: 'published', resolve_links: 'story' });
  return nav;
}

export default async function SignIn() {

  const data = await getData();

  return (
    <div className="flex justify-center h-screen bg-gray-100">
         <h1>Sign up</h1>
    </div>
  );
}

Any ideas?

Reproduction

https://www.ai-writer-zerobranded.com/signin

Steps to reproduce

Go to https://www.ai-writer-zerobranded.com click around in the navigation

System Info

System:
    OS: macOS 13.4.1
    CPU: (8) arm64 Apple M1
    Memory: 74.47 MB / 16.00 GB
    Shell: 5.9 - /bin/zsh
  Binaries:
    Node: 18.17.0 - ~/.nvm/versions/node/v18.17.0/bin/node
    npm: 9.6.7 - ~/.nvm/versions/node/v18.17.0/bin/npm
    Watchman: 2024.01.22.00 - /opt/homebrew/bin/watchman
  Browsers:
    Chrome: 121.0.6167.184
    Safari: 16.5.2

Used Package Manager

npm

Error logs (Optional)

You can't use getStoryblokApi if you're not loading apiPlugin.

Validations

• Follow our Code of Conduct

[alisayed95]

I encountered a similar issue and resolved it by directly fetching the API instead of using the getStoryblokApi function.
You can find more information about how to do this in the Storyblok documentation for content delivery v2: https://www.storyblok.com/docs/api/content-delivery/v2

[nmsdvid]

@alisayed95 and how do you handle Cache Invalidation ?

[alisayed95]

@alisayed95 and how do you handle Cache Invalidation ?

@nmsdvid by adding query parameter cv.
ex: cv=${Date.now()}

https://www.storyblok.com/docs/api/content-delivery/v2#topics/cache-invalidation:~:text=If%20an%20resource%27s%20response%20does%20not%20provide%20a%20cv%20parameter%2C%20it%20is%20possible%20to%20receive%20the%20most%20recent%20version%20of%20the%20data%20by%20providing%20a%20cv%20parameter%20in%20your%20request%20that%20is%20set%20to%20the%20Unix%20timestamp%20representing%20the%20current%20time.

[MKlblangenois]

Same issue here, I've the issue even with the Storyblok boilerplate (https://github.com/storyblok/next.js-13-boilerplate).

That's happen when I'm in editor, and save the story, the visual editor reset all data to public data.

[l1keafox]

I am also using Next.js with a Vercel deployment and seeing this error come up.

[stmoerman]

Same issue here. Only happens when I use next/link, and the error dissapears after I reload the page once and it gets cached.

[stevegreenn]

Same issue here. Only happens when I use next/link, and the error dissapears after I reload the page once and it gets cached.

I'm experiencing the same issue. I noticed it when I upgraded to the latest version of Next.js, so I went through the versions and found that v14.0.3 is the last version everything works OK. From v14.0.4 onwards, it breaks as described above. I then went through the canary versions, and believe the issue was introduced in Next.js v14.0.4-canary.7.

So, potentially, this is a Next.js issue rather than a storyblok-react issue? If someone could verify v14.0.4-canary.6 works and that v14.0.4-canary.7 is broken, that would be helpful.

[stmoerman]

A workaround (for now) is to build your own implementation. I completely replaced the getStoryblokApi import and created this instead:

import {
  StoryblokClient,
  apiPlugin,
  getStoryblokApi as getStoryblokApiDefault,
  storyblokInit
} from "@storyblok/react/rsc"

const storyblokApi: StoryblokClient | undefined = undefined

export const AppStoryblokInit = () => {
  storyblokInit({
    accessToken: process.env.STORYBLOK_ACCESS_TOKEN,
    use: [apiPlugin],
    components
  })

  return getStoryblokApiDefault()
}

export const getStoryblokApi = (): StoryblokClient => {
  if (storyblokApi !== undefined) return storyblokApi
  return AppStoryblokInit()
}

I can now directly import getStoryblokApi in my individual app router pages from this implementation, and my error has been gone since.

[mathiastervo]

We have this issue too. We are implementing Storyblok and as @stevegreenn wrote, the problem does not appear in 14.0.3 but is still a problem in 14.1.0. Since the message is so Storyblok specific, where does one start to formulate a bugreport in vercel/next.js/issues?

[dariusrosendahl]

+1 same problem.

When using the custom getStoryblokApi() from @stmoerman it does work...

[Jdruwe]

+1 would be awesome to see this getting fixed :D

[ismaelbks]

Even on 14.0.3 I had the issue, downgrading to latest 13 fixed the problem for me altough on other projects I don't have the problem on 14.0.3 ...

[negprof]

same problem.

[arnevankauter]

Is there any update regarding this issue?

[mickeymarse]

Over here just having the same issue. Hoping there will be a fix soon?

Also, why fetchData() is being exported in the tutorial/guide? That causes another error.

[arorachakit]

Hey everyone!
Thank you so much for reporting this issue, we have got a couple of them on some other channels as well.
I just wanted to give you all an update, that we are actively working on the fix of this.
As of now, it seems that it has to do something with the new release of Next.js. We are looking for a fix, we will let you all know once we have something.

Meanwhile, it would be great if any of you could share anything that we can reproduce - we are trying to look at a couple of examples, and it would be great to see some more. Thank you so much! :)

cc - @fgiuliani @alexjoverm

[localpat]

March 28 and we still have this problem  😩

[FahadSalamatRandhawa]

facing same issue, once you reload page it works fine.
Currently working solutions is to downgrade nextjs to 14.0.3

[arnevankauter]

Currently working solutions is to downgrade nextjs to 14.0.3

This works for certain use cases but it's not 100% failproof.
@arorachakit @fgiuliani @alexjoverm is there any update regarding this topic?

[saiminh]

Sorry if this is not relevant for everyone, but I had this issue and realised that it helped to import "storyblokInit" and "apiPlugin" and then initiate Storyblok with the token in each component/route I fetch data from the API. So basically add:

import { getStoryblokApi, storyblokInit, apiPlugin } from "@storyblok/react/rsc";

storyblokInit({
  accessToken: process.env.STORYBLOK_API_TOKEN,
  use: [apiPlugin],
});

to every component where you want to fetch data.

[arorachakit]

Hey everyone!

We tried implementing a few things, and we weren't able to replicate the issue properly.

What I have for now is the following repo - https://github.com/alexjoverm/reactsdk-952 that Alex created.
You can check this repo to see how exactly the implementation looks and how it should be done. There are no errors for us in the mentioned project.

But - it would be great and helpful if you could use this repo and make some changes to share with us when and where exactly you're facing the issues. Maybe you can extend the project to add something that is causing this issue and share the link for that OR feel free to create pull requests in the same so that we understand the exact issue and can replicate it to make some changes.

We highly appreciate your contribution, thank you so much!

TL;DR;
Please use this repo to create sample projects to share with us or create a pull request in the same so we can replicate the issue from our side as well and find a solution. Thank you!

cc- @alexjoverm @fgiuliani

[arorachakit]

Hey everyone!
We were able to replicate the issue, thanks to @stevegreenn for creating a perfect example for us along with the information provided. The information you provided is really valuable to us :)

To give you all an update - as of now, we can see that the Next Link component causes this issue for the first time and it works later after clicking once. I would like to confirm if any of you are facing the error in any different scenario as well. It would be good to know if there are more places other than where this issue occurs.

To add on, as mentioned and discussed earlier - it looks like an issue on the Next.js side or the way it Next Link works in the new update. Maybe we are missing something there.

We will need to investigate more before arriving at a solution here as we are not completely sure of the reason behind it. There is a temporary fix though - as stated by @saiminh, you can initialize Storyblok in each of the routes. There shouldn't be any performance-related issues in this case (hopefully).
Right now this seems to be a quick fix for the issue, meanwhile, we are also working on finding out what exactly is happening and how can it be fixed.

Also, here is a link to @alexjoverm 's comment along with a commit to show the quick fix I just mentioned about initializing Storyblok in every route. Please take a look at it as well for a better reference.

We will get back to you as soon as we find something, and please share us your findings as well if you find something new.
Thank you!

[alexjoverm]

Thanks everyone for your patience and working together on this! 👏

[dlhck]

Is there any update on this? We get the same error when client side navigation is happening (i.e. clicking on a next/link)

[zewas-digital]

Same problem here

[richardtaylordawson]

Same issue here. Following the tutorial found at https://www.storyblok.com/tp/add-a-headless-cms-to-next-js-13-in-5-minutes and it doesn't work.

I specifically did the setup where you have the storyblokInit in a provider as well as in the layout file

[alexjoverm]

Hey all! We're actively investigating this, but unfortunately we haven't found an ideal and clean solution yet.

For now, the workaround suggested here by @stmoerman should make the job.

[dipankarmaikap]

We’ve created an issue in the Next.js repository for further investigation: Next.js Issue #68882

[edodusi]

Hi all, we are working on a stable solution to this issue, in PR #1201 is our proposal. We will test this a bit more and you can help us by reviewing and testing it in your projects. Please let us know if you have any feedback, thanks!

[dariusrosendahl]

Hi all, we are working on a stable solution to this issue, in PR #1201 is our proposal. We will test this a bit more and you can help us by reviewing and testing it in your projects. Please let us know if you have any feedback, thanks!

Great! I would love to help by testing it in my projects. Is there an easy way to install it in my projects? I thought I could install it with

pnpm add github:storyblok/storyblok-react#feat/next-rsc-support

But since it's a monorepo, no dice

[dariusrosendahl]

@edodusi Perhaps a beta package to install for the people in this thread so everybody can quickly test if it has the expected result?

[edodusi]

hi @dariusrosendahl, sorry for the late response I was on vacation 😄
you can pull the branch, build it and then just add it to your project with npm link (for example), I think this is the easiest way and this way you can also check the code if something goes wrong and try some fix, let me know if you run into any issue doing that and I will try to help!

[edodusi]

Hi all, we think the new implementation of RSC is ready for a battle test, and we would really appreciate any feedback.
You can test it by using the latest "dev" release with this command yarn add https://pkg.pr.new/@storyblok/react@5d2b50b.tgz (or by adding this to your package.json)

In order to integrate it, please follow the steps provided in the update README starting from Next.js using App Router, here is the link: https://github.com/storyblok/storyblok-react/blob/5d2b50b40ecb23ca95f4271075338ef279c998af/README.md#nextjs-using-app-router

Thank you for your contribution!

[andrea-budel-remedia]

@edodusi any chance to see this PR merged into main?

[edodusi]

@andrea-budel-remedia yes, definitely. We are looking for some more feedback to ensure we don't break existing implementations, but we plan to merge and release this soon.

If you can help, I encourage you to try the latest dev build, you can find it somewhere in the comments here!

[edodusi]

Hi everyone, we just released v4.0.0 with improved support for Server Components. There are some changes to the implementation, please find them on the updated README.

I will now close this issue, and I encourage you to try the new release and report any trouble opening a new one.

Thank you all for your support

[richardtaylordawson]

@edodusi am I right in thinking that now you can have full server components while still maintaining editing capabilities with visual editor? Before you had to choose a path. Either:

1. full RSC and you'd save to see changes
2. RSC for layout but the components were all client in order to have real time editing

[edodusi]

@richardtaylordawson you are right

[richardtaylordawson]

@edodusi that's amazing!!! I'm implementing now! super excited for the change! Well done!

Quick question. Let's say production is hosted at production.com. Our preview url for editors in storyblok is then production.com

How would we turn off the bridge for production.com except when its loaded within storyblok itself?

[edodusi]

@richardtaylordawson this would be a topic for another discussion but I think you shouldn't worry about that because, even if you try to load it, the business logic of the bridge won't actually do anything outside the visual editor.

But of course this is something worth discussing, I'll raise the topic internally.