Custom component libraries with named imports

💬 App Building
1
  1. My goal: Building custom components with named components
  2. Issue: Named components are ignored
  3. Steps I've taken to troubleshoot: Rebuilt custom components, watched the manifest files
  4. Additional info: (Cloud or Self-hosted, Screenshots)

Hi all, I’m taking custom components for a spin for the first time. The official docs work fine and I’m able to accomplish what I want. However I cannot move the custom component out of index.tsx and have it built, no matter how I try to import it from a separate file (e.g. Barrel File Pattern).

A comment in a related issue references using named imports (which would be incredibly helpful for code organisation), but I’ve had no luck with them.

Perhaps the powers that be could update the example github repo with a working example?

1 Like
2

Hi @abeechin ,

I’ve been creating Custom Components in Retool for some time and haven’t run into this roadblock.

If you have a github repo or minimal reproducible code example, I’d be more than happy to take a look for you.

1 Like
3

Hey @abeechin! Unfortunately, I’m not seeing any screenshots attached to your original post? And along with @mitchmess, I would also be happy to take a look if you’d like! One of my responsibilities at work is building out and maintaining our custom component library, so I have a little experience I could offer if a link to your repo is available. :slightly_smiling_face:

4

Hi @mitchmess and @AJVancattenburch thank you for offering to take a look :slight_smile:

It looks like I ran into some problem with the build tool and wildcard exports from the main index.tsx file.

e.g. The following fails to include MyButton in the manifest file for me:

src/component/MyButton/button.tsx has export const MyButton = …
src/component/MyButton/index.tsx has export * from './button
src/index has export * from ./components/MyButton

But an explicit import works :tada::

src/index has export { MyButton } from ./components/MyButton

Afaik the first example should also make MyButton available for importing into a file but doesn’t seem compatible with the build tool. Curious if you have encountered the same?

1 Like
5

While the wildcard pattern is correct in general JavaScript, the Retool build tool seems to only fully trust explicit named exports (export { MyButton } from '...') for generating the final component manifest.

You’re already doing this in your /src/components/MyButton/button.tsx file:

  • export const MyButton = (props) => { /* ... */ };

Main fix:

Instead of using a wildcard export in the main /src/index.tsx file, you gotta consolidate the list of components that should be public into your top-level entry /src/index.tsx. file as named exports that match the named export from your component, like so:

  • // Filepath: /src/index.tsx

// If MyButton lives in /src/components/MyButton/button.tsx:
export { MyButton } from './components/MyButton/button';

By making the export declaration explicit in src/index.tsx, you provide the build tool with a guaranteed name and path, successfully bypassing the issue with its wildcard resolution.

1 Like
6

In case it would be considered helpful, I’ll include an example from our library that shows how I build out one of our components, and how I export it from the top-level /src/index.tsx file:

// Filepath: /src/components/cluster-scoreboard/cluster-scoreboard-v2.tsx
/* eslint-disable @typescript-eslint/no-explicit-any */

export const ClusterTable__V2: React.FC<ClusterTableProps> = ({
  uniqueKey = 'SEGMENT_ID',
  viewId = { cornerstone: 2, pinnacle: 1 }
}) => {
  // ...render logic...

  return (
    <section className={styles.scoreboard}>
      <div className={styles.container}>
        {renderHeaderRow()}
        {filteredData.map((item: any) => renderRow(item, 0))}
      </div>
    </section>
  );
};

Then we export it as the exact name of the export, ClusterTable__V2, from the file where we build out our custom component at file location /src/components/cluster-scoreboard/ClusterScoreboard__V2:

// Filepath: /src/index.tsx

export { ClusterTable } from './components/cluster-scoreboard/cluster-scoreboard';
export { ClusterTable__V2 } from './components/cluster-scoreboard/ClusterScoreboard__v2';
export { KeyFactorTable } from './components/key-factor-scoreboard/KeyFactorScoreboard';

We currently have 3 custom components, so three export files exist. All of them get shipped out at the /src/index.tsx level. Hopefully this helps! :folded_hands:

1 Like