TypeError: Cannot read properties of undefined (reading 'builderOptions')" in JavaScript

[xbrandonpowell]

I him having a hard time figuring out this issue you give advice or suggestions on what I can do to figure out what I need to do figure this issue:

The code is within NavbarBuilder.js

import { Builder } from "@builder.io/react";
import Navigation from "../Navbar/navbar";

Builder.registerComponent(Navigation, {
  name: "Navigation",
  inputs: [
    {
      name: "Upload Logo",
      type: "file",
      defaultValue: true,
    },
    {
      name: "Nav Listing",
      type: "list",
      defaultValue: true,
    },
    {
      name: "Url Link",
      type: "url",
      defaultValue: "https://google.com",
    }
  ],
});

[manish-sharma]

Hello @xbrandonpowell,

The problem might be related to spaces in the input names. Would you mind attempting to remove any spaces from the input names and checking if that resolves the issue?

e.g.,

import { Builder } from "@builder.io/react";
import Navigation from "../Navbar/navbar";

Builder.registerComponent(Navigation, {
  name: "Navigation",
  inputs: [
    {
      name: "UploadLogo",
      type: "file",
      defaultValue: true,
    },
    {
      name: "NavListing",
      type: "list",
      defaultValue: true,
    },
    {
      name: "UrlLink",
      type: "url",
      defaultValue: "https://google.com",
    }
  ],
});

[xbrandonpowell]

@manish-sharma I do not understand why the code below looks the same as my code. In the space I tried to remove nothing has happened, but I have tried nothing has happened.

[manish-sharma]

Hello @xbrandonpowell,

Can you share the complete error screenshots? The error you have shared doesn’t look like from registering custom components.

[xbrandonpowell]

I have just restarted my terminal saw in my terminal that getting an ReferenceError: Cannot access ‘WEBPACK_DEFAULT_EXPORT’ before initialization.

ReferenceError: Cannot access ‘WEBPACK_DEFAULT_EXPORT’ before initialization

[manish-sharma]

Hello @xbrandonpowell,

The issue seems to be from navbar.jsx file, can you make sure that you are exporting the navbar component properly?

Ex. export default NavBar;

[xbrandonpowell]

[manish-sharma]

Hello @xbrandonpowell,

There are 2 issues I see with your implementation,

1. In the navbar.jsx I’m not sure why you are importing NavbarBuilder in the line number 8. You may want to remove that.

2. In the NavbarBuilder.js, you are importing Navigation component from ‘…/Navbar/navbar’, when your component name is Nav not Navigation

To resolve this remove line number 8 from navbar.jsx file and for NavbarBuilder, use the below code

import { Builder } from "@builder.io/react";
import Nav from "../Navbar/navbar";

Builder.registerComponent(Nav, {
  name: "Navigation",
  inputs: [
    {
      name: "UploadLogo",
      type: "file",
      defaultValue: true,
    },
    {
      name: "NavListing",
      type: "list",
      defaultValue: true,
    },
    {
      name: "UrlLink",
      type: "url",
      defaultValue: "https://google.com",
    }
  ],
});

[xbrandonpowell]

Thank you for help @manish-sharma