Changing Component Name from HelloWorld to LiveChat Broke Everything

šŸ’¬ App Building
,
1

Iā€™m building a custom component and everything was working fine when the component was named HelloWorld. As soon as I changed the component name to LiveChat, Retool broke and showed this error:

"Error rendering custom component ā€“ element type is invalid."

Additionally, I noticed that I now have multiple manifest files:

  • retool-custom-component-manifest.json in the main folder
  • retool-custom-component-manifest.json and .js in the dist folder

I'm confused.

  1. Why did simply renaming the component break rendering?
  2. Which manifest file does Retool actually use?

Any help would be appreciated before I lose it. Thanks.

2

Hello @JasperCreationss,

  1. If your index.tsx or index.js file still exports HelloWorld instead of LiveChat, Retool won't recognize the updated component.
  • Ensure your main component file exports LiveChat

  1. The one in the root folder (retool-custom-component-manifest.json) is the most relevant.

  2. The one in dist/ is likely generated by your build system, but you should only reference the latest, correctly built version.

  3. Check and update retool-custom-component-manifest.json to reflect the new name.

4 Likes