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! 👏