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
3

Have you had a chance to review the above recommendations, @JasperCreationss? It certainly sounds like you may not have updated the export after renaming the component itself. If you still need assistance, don't hesitate to let us know here!

4

Can you confirm that updating the export fixed this, @JasperCreationss? Also, you shouldn't need to touch any of the manifest files. They are all generated and managed by the @tryretool/custom-component-support library. :+1:

5

Yes! updating the export fixed this issue!

1 Like