Custom Components Not Displaying in Retool UI – Previously Working Setup

💬 App Building
,
1

I'm currently experiencing an issue where my custom components are no longer displaying in the Retool UI component selector. These components were working as expected previously, and I haven’t made any significant changes that would justify this behavior. I’ve gone through several troubleshooting steps but haven’t been able to resolve the issue. Your assistance would be greatly appreciated.

:wrench: Current Setup

  • Environment: Retool Cloud
  • Custom Component Library Version: @tryretool/custom-component-support@^1.7.0
  • Library Name: MartijnCustomComponents
  • Component Manifest Location: src/manifest.tsx
  • Export File: src/index.tsx

Here's my package.json:

{
  "name": "my-react-app",
  "version": "0.1.0",
  "private": true,
  "dependencies": {
    "@tryretool/custom-component-support": "^1.7.0",
    "react": "^18.2.0",
    "react-dom": "^18.2.0"
  },
  "engines": {
    "node": ">=20.0.0"
  },
  "scripts": {
    "dev": "npx retool-ccl dev",
    "deploy": "npx retool-ccl deploy"
  },
  "retoolCustomComponentLibraryConfig": {
    "name": "MartijnCustomComponents",
    "label": "martijnCustomComponents",
    "description": "Retool custom components for POCs",
    "entryPoint": "src/index.tsx",
    "manifestPath": "src/manifest.tsx",
    "outputPath": "dist"
  }
}

:test_tube: Troubleshooting Steps Taken

  1. Verified Development Server is Running
  • npm run dev shows:
Build succeeded 🔨  
Sending updated code to Retool 📨...  
Updated code received by Retool ✅  
Successfully created a new version (dev) of the library.
  1. Cleaned Up Manifest Configuration
  • Renamed componentManifest.json to componentManifest.json.bak
  • Confirmed manifestPath is set correctly in package.json
  1. Redeployed the Components
  • npm run deploy completed with:
Build succeeded 🔨  
Sending updated code to Retool 📨...  
Updated code received by Retool ✅  
Successfully created a new version (5) of the library.  
Generating & updating manifest...

  dist\components.js                             43.3kb
  dist\retool-custom-component-manifest.json.js    70b        
  dist\retool-custom-component-manifest.json       62b
  1. Simplified index.tsx Exports
  • Verified proper and minimal exports of components.
  1. Restarted All Servers
  • Killed node processes and started dev server cleanly.
  1. Browser Troubleshooting
  • Performed hard refresh (Ctrl+Shift+R) and inspected console logs.
  1. Package Version Fix
  • Ensured @tryretool/custom-component-support is pinned to ^1.7.0 (not latest) (Tried a bunch of versions, same result)
  1. Are there known issues with custom components disappearing suddenly?
  2. Could there be a caching issue on the Retool side?
  3. Is there a way to verify if my components are actually being received by Retool?
  4. Are there any specific permissions or settings I need to check?
  5. What logging or debugging steps would you recommend to isolate this issue?

Any help with this would be really appreciated

Retool Support Policy

2

@M_Mulder is this a library you created for an organization? I once had a similar roadblock -- and found out it was due to permission changes happening in the organization and my permissions were unintentionally and incorrectly set for custom components. Are you sure your user account has the proper permissions to view or add custom components?

Worth a shot to check there! :pray:

1 Like
3

:white_check_mark: Issue Solved:
The root cause was using import statements in the src/index.tsx file to include React components. For some reason, Retool no longer properly recognized these imports. After manually moving all component definitions directly into the index.tsx, the components started displaying again in the Retool UI component selector.

1 Like
6

Thanks for sharing an update, @M_Mulder! I'm glad to hear you got it working.

For future reference, you should be able to break those components out into their own files and use a named import, instead. Shout-out to @Mark_Slade for surfacing this!

1 Like