Missing registration for Component

Technical Questions
1

I am getting below error after Builder sdk upgrade to latest . Can you help me please ?

Screenshot 2024-01-16 at 2.24.04 PM
Screenshot 2024-01-16 at 2.24.04 PM1598×406 49.7 KB

Component Info :

import { Builder } from "@builder.io/react";
import styles from "@/kroma-styles/component-styles/small-component-styles.module.scss";

const WelcomeToKroma = ({
  backgroundColor,
  heading,
  description,
  enableCustomerReviewContent,
}) => {
  return (
    <div style={{ backgroundColor }}>
      <div className="innerContainer">
        <div
          className={`${styles.welcomContainer} ${enableCustomerReviewContent &&
            styles.__reviewEnabled}`}
        >
          {enableCustomerReviewContent && <p className={styles.quoteSign}>“</p>}
          {heading && (
            <div
              dangerouslySetInnerHTML={{ __html: heading }}
              className={`${
                styles.welComeHeading
              } ${enableCustomerReviewContent && styles.__reviewEnabled}`}
            ></div>
          )}
          {description && (
            <div
              dangerouslySetInnerHTML={{ __html: description }}
              className={`${
                styles.welComeDescription
              } ${enableCustomerReviewContent && styles.__reviewEnabled}`}
            ></div>
          )}
        </div>
      </div>
    </div>
  );
};

export default WelcomeToKroma;

Builder.registerComponent(WelcomeToKroma, {
  name: "WelcomeToKroma",
  inputs: [
    {
      name: "backgroundColor",
      type: "color",
      defaultValue: "#ffffff",
    },
    {
      name: "heading",
      type: "richText",
    },
    {
      name: "description",
      type: "richText",
    },
    {
      name: "enableCustomerReviewContent",
      type: "boolean",
    },
  ],
});
2

Hello @SrittamMishra,

To assist you more effectively, could you please share a screenshot of the directory structure of your Next.js project?

Additionally, please confirm which builder react SDK version, you are currently using.

3

Hey @manish-sharma ,

I am currently @2.1.0 for @builder.io/react . I am also on the other ticket with you where we are facing cloudinary related issue post builder sdk upgradation . Also i know that you mentioned it is not the latest version . But i am running through below error while upgrading it .

error /Users/srittammishra/Desktop/projects/Kroma-Headless/node_modules/isolated-vm: Command failed.
Exit code: 1
Command: prebuild-install || (node-gyp rebuild --release -j 4 && node-gyp clean)
Arguments: 
Directory: /Users/srittammishra/Desktop/projects/Kroma-Headless/node_modules/isolated-vm
Output:
prebuild-install warn install No prebuilt binaries found (target=16.0.0 runtime=node arch=arm64 libc= platform=darwin)
gyp info it worked if it ends with ok
gyp info using node-gyp@7.1.2
gyp info using node@16.0.0 | darwin | arm64
gyp info find Python using Python version 3.9.6 found at "/Library/Developer/CommandLineTools/usr/bin/python3"
gyp http GET https://nodejs.org/download/release/v16.0.0/node-v16.0.0-headers.tar.gz
gyp http 200 https://nodejs.org/download/release/v16.0.0/node-v16.0.0-headers.tar.gz
gyp http GET https://nodejs.org/download/release/v16.0.0/SHASUMS256.txt
gyp http 200 https://nodejs.org/download/release/v16.0.0/SHASUMS256.txt

==============

here is a screenshot of my next js project .

Screenshot 2024-01-16 at 6.10.22 PM
Screenshot 2024-01-16 at 6.10.22 PM896×1264 43.1 KB

Screenshot 2024-01-16 at 6.10.44 PM
Screenshot 2024-01-16 at 6.10.44 PM846×1820 98.8 KB

Let me know if you need more info .

4

Hello Srittam!

It seems that the error you’re encountering might be related to the Node.js version. To resolve this, try switching to the LTS (Long-Term Support) version of Node.js. Using the LTS version often ensures better stability and compatibility with various packages.

Please install the LTS version of Node.js and attempt to run your code again. If you continue to face any issues, feel free to let us know, and we’ll be happy to assist you further.

5

Hey @manish-sharma ,

I tried with the latest LTS version of Node js v20.11.0 and still the same error .

error /Users/srittammishra/Desktop/projects/Kroma-Headless/node_modules/isolated-vm: Command failed.
Exit code: 7
Command: prebuild-install || (node-gyp rebuild --release -j 4 && node-gyp clean)
Arguments: 
Directory: /Users/srittammishra/Desktop/projects/Kroma-Headless/node_modules/isolated-vm
Output:
prebuild-install warn install No prebuilt binaries found (target=20.11.0 runtime=node arch=arm64 libc= platform=darwin)
gyp info it worked if it ends with ok
gyp info using node-gyp@7.1.2
gyp info using node@20.11.0 | darwin | arm64
gyp info find Python using Python version 3.9.6 found at "/Library/Developer/CommandLineTools/usr/bin/python3"
gyp http GET https://nodejs.org/download/release/v20.11.0/node-v20.11.0-headers.tar.gz
gyp http 200 https://nodejs.org/download/release/v20.11.0/node-v20.11.0-headers.tar.gz
gyp http GET https://nodejs.org/download/release/v20.11.0/SHASUMS256.txt
gyp http 200 https://nodejs.org/download/release/v20.11.0/SHASUMS256.txt
gyp ERR! UNCAUGHT EXCEPTION 
gyp ERR! stack TypeError: Cannot assign to read only property 'cflags' of object '#<Object>'
6

Hello @SrittamMishra,

Would you mind switching to either Node v18 or Node v19?

7

@manish-sharma ,

tried with both but no luck . Possible to arrange a call please ?