Make sure you updated your Dependencies if your using 0.2.3

Technical Questions
1

Make sure people get the correct versions for the dependencies?

If anyone has run into this error message if you link the correct version for the dependencies, so we can be updated to the right package:

TypeError: _builder_io_reactWEBPACK_IMPORTED_MODULE_0.Builder.init is not a function

Package                Current  Wanted  Latest  Location                            Depended by
@builder.io/dev-tools    0.2.3   0.2.6   0.2.6  node_modules/@builder.io/dev-tools  my-next-sbr
eslint                  8.53.0  8.54.0  8.54.0  node_modules/eslint                 my-next-sbr
react-router-dom        6.19.0  6.20.0  6.20.0  node_modules/react-router-dom       my-next-s

Make sure everyone if you run into this error message if you are currently on 0.2.3 the package has just got updated to 0.2.6 if any do not know want to let people know.

2

I have just updated the package and we still getting the same error message. If you have run into this error message and still cannot figure out this issue what have you done to solve this issue?

Screenshot 2023-11-28 at 11.18.52 AM (2)
Screenshot 2023-11-28 at 11.18.52 AM (2)783×384 43.1 KB

3

Hello @xbrandonpowell,

Updating your builder-registry.js code with the below code should resolve the issue for you

"use client";

import { builder, Builder } from "@builder.io/sdk"; // Make sure this import is included
import Nav from "./components/Navbar/navbar";

//const YOUR_KEY = "472c17b44b99422098f586c3fbe4dc2b";
// Replace with your Public API Key.
builder.init(process.env.NEXT_PUBLIC_BUILDER_API_KEY);
4

Just updated everything in my code from there we getting the same error message with:

Screenshot 2023-11-28 at 2.21.28 PM
Screenshot 2023-11-28 at 2.21.28 PM1921×909 65 KB

5

Hello @xbrandonpowell,

It should be Builder.registerComponent, Please use the below code

"use client";

import { builder, Builder } from "@builder.io/sdk";
import Nav from "./components/Navbar/navbar";

//const YOUR_KEY = "472c17b44b99422098f586c3fbe4dc2b";
// Replace with your Public API Key.
builder.init(process.env.NEXT_PUBLIC_BUILDER_API_KEY);


// import TripleColumnsComponent from "./components/eCommerces/Hero/TripleColumnsComponent";

Builder.registerComponent(Nav, {
  name: "Navigation",
  inputs: [
    {
      name: "UploadLogo",
      type: "file",
      image:
        "https://cdn.builder.io/api/v1/image/assets%2F472c17b44b99422098f586c3fbe4dc2b%2F32e07efa314c4b2382aabc318c1c84b8",
      defaultValue: "https://cdn.builder.io/api/v1/image/assets%2F472c17b44b99422098f586c3fbe4dc2b%2F32e07efa314c4b2382aabc318c1c84b8",
    },
    {
      name: "NavColumns",
      type: "list",
      label: "Columns",
      subFields: [
        {
          name: "NavTitle",
          type: "list",
        },
        {
          name: "NavItem",
          type: "text",
          defaultValue: "true",
        },
        {
          name: "NavItem",
          type: "url",
          defaultValue: "https://cdn.builder.io/api/v1/",
        },
      ],
    },
    {
      name: "NavIcons",
      type: "list",
      label: "Columns",
     
      subFields: [
        {
          name: "Icon",
          type: "file",
          
        },
        {
          name: "IconUrl",
          type: "url",
     
        },
      ],
    },
  ],
});

Builder.register("insertMenu", {
  name: "Hero Components",
  items: [
    {
      name: "Hero",
      type: "list",
      label: "Columns",
      defaultValue: true,
      itemProps: [
        {
          name: "Hero Banner",
          image: "https://cdn.builder.io/api/v1/image/assets%2F472c17b44b99422098f586c3fbe4dc2b%2Fd26072f68e064958b64475180a5dc5da",
          type: "file",
        },
      ],
    },
    {
      name: "Double Columns",
      itemProps: [
        {
          name: "Double Banner",
          type: "file",
        },
      ],
    },
    {
      name: "Triple Columns",
      itemProps: [
        {
          name: "Double Banner",
          type: "file",
        },
      ],
    },
    {
      name: "Dynamic Columns",
      itemProps: [
        {
          name: "Double Banner",
          type: "file",
        },
      ],
    },
  ],
});
1 Like