Custom Components Not Displaying in Retool UI – Previously Working Setup

[M_Mulder]

@M_Mulder

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.

---

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"
  }
}

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.  

2. Cleaned Up Manifest Configuration

• Renamed componentManifest.json to componentManifest.json.bak
• Confirmed manifestPath is set correctly in package.json

3. 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 

4. Simplified index.tsx Exports

• Verified proper and minimal exports of components.

5. Restarted All Servers

• Killed node processes and started dev server cleanly.

6. Browser Troubleshooting

• Performed hard refresh (Ctrl+Shift+R) and inspected console logs.

7. 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

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.