Upgrading `@builder.io/sdk` to 2.2.1 breaks build

Technical Questions Shopify
1

Describe the bug
We’re trying to upgrade @builder.io/sdk to 2.2.1 from 2.1.1, it fails in build step:

throw new Error("Fetching content failed, expected apiKey to be defined instead got: ".concat(this.apiKey));

The API key is defined as an environment variable and it is passed correctly. We even tried passing an API key directly to the builder.init() function, but it still didn’t work.

Additional context
It also appears that when we attempt to update @builder.io/react to 3.2.0 from 3.1.1, it fails with the same error.

Using:
Next.js 14.1
Node 18

2

Hello @neri!

Do you have the builder-registry.ts file in your project?

3

Same here and I have builder-registry.ts in my project

4

Hello @yannis,

You you try adding builder.init('API KEY') to the builder-registry.ts file and let us know how that works for you?

import { builder } from '@builder.io/react';

builder.init("YOUR API KEY or env variable");
5

Doesn’t work.

init doesn’t exist if I use:

import { Builder } from '@builder.io/react';
Builder.init(process.env.NEXT_PUBLIC_BUILDER_API_KEY!);

if I add

import { builder } from "@builder.io/sdk";
builder.init(process.env.NEXT_PUBLIC_BUILDER_API_KEY!);

I still have the same issue:

Builder integration error: Looks like the Builder SDK has not been initialized properly (your API key has not been set). Make sure you are calling builder.init("«YOUR-API-KEY»"); as early as possible in your application’s code.

6

It should be

import { builder } from ‘@builder.io/react’;
builder.init(process.env.NEXT_PUBLIC_BUILDER_API_KEY!);

7

Well it works but this seems a bit odd to have i think, maybe someone should work on the naming of the functions :stuck_out_tongue:

import { Builder, builder } from “@builder.io/react”;

8

Hello @yannis,

I’ll certainly raise a request for our team to further investigate and deploy a proper fix.

Thank you for bringing this to our attention,

9

There is no Builder in @builder.io/react
Like Yannis said for nextjs app router we have to import {builder} from “@builder.io/sdk”

Builder docs say this too.

My content loads from builder with the builder/examples/next-js-app-router/app/data-example/page.tsx at main · BuilderIO/builder · GitHub example
(that uses @builder/sdk)

BUT

I get that builder init error in the browser even though my content is rendering fine

Is there a solution for this issue?

10

node 20
mac M2

“dependencies”: {
“@builder.io/react”: “^8.0.8”,
“next”: “15.1.6”,
“react”: “^19.0.0”,
“react-dom”: “^19.0.0”
},
“devDependencies”: {
“@eslint/eslintrc”: “^3”,
“@types/node”: “^20”,
“@types/react”: “^19”,
“@types/react-dom”: “^19”,
“eslint”: “^9”,
“eslint-config-next”: “15.1.6”,
“postcss”: “^8”,
“tailwindcss”: “^3.4.1”,
“typescript”: “^5”
}