Installing Custom Component from Custom Gallery Repo

💬 App Building
1

Hi,

I was able to run the following which worked:

npx retool-ccl init which returned this:

Creating new library in the Retool backend..
...Succesfully made new library!
Writing updates to package.json

Then I tried npx retool-ccl deploy in the Carousel folder and got this

Generating & updating manifest...
X [ERROR] Cannot read properties of undefined (reading '0') [plugin generate-manifest]

X [ERROR] Could not resolve "retool-custom-component-manifest.json"

2 errors
Build failed :cross_mark:
Unhandled error: {
err: Error: Build failed with 2 errors:
error: Cannot read properties of undefined (reading '0')
error: Could not resolve "retool-custom-component-manifest.json"

Any help is appreciated.

thanks,

Mike

3

Hey @mikeS - had you previously run npm install in the same directory?

4

Hi Darren - yes I did.

1 Like
5

It looks like most of the components in the new gallery repo are missing a top-level tsconfig.json file. You should be able to create one that sits alongside package.json and paste in the following:

{
  "compilerOptions": {
    "target": "ESNext",
    "lib": ["dom", "dom.iterable", "esnext"],
    "skipLibCheck": true,
    "esModuleInterop": true,
    "strict": true,
    "module": "esnext",
    "moduleResolution": "node",
    "resolveJsonModule": true,
    "noEmit": true,
    "jsx": "react-jsx"
  },
  "include": ["**/*.tsx", "**/*.ts"]
}

Let me know if that helps!

6

Thanks Darren - worked like a champ!

Now, I tried building the draggable-table and there is no build script. How do these components make it through the PR process with missing files?

thanks,

Mike

7

Glad to hear it! In general, this new gallery repository is a bit of an experiment and we're still thinking through how to best make custom components shareable. My personal recommendation is to maintain a personal library based off of the template and then manually add in any new components that look interesting!

8

Hi @mikeS , echoing @Darren ‘s response here. The gallery was more meant as a way to inspire folks and show them what was possible. Any of the components you see there you can bring over into your own repo, but the gallery repo wasn’t meant to be installable directly (mostly because there are so many varied components we figured folks wouldn’t want to use them all).

9

Ok, I'm a little lost here. I tried importing the component from yesterday's video on AI-Powered custom component and I get this after logging in with our token.

Unhandled error: {
err: Error: Could not find Library with name (AIEditor). Please check your package.json retoolCustomComponentLibraryConfig value.
at Object.deployCommand [as handler] (path\Retool\retool-ai-editor\node_modules@tryretool\custom-component-support\commands\deploy\deploy.js:31:19)
at process.processTicksAndRejections (node:internal/process/task_queues:95:5),
msg: null
}

So, then I update package.json with this and I see the component in our instance but it replaced the one I added yesterday.

"retoolCustomComponentLibraryConfig": {
"name": "OurComponents",
"label": "Our Custom Components",
"description": "A library full of great things",
"entryPoint": "src/index.tsx",
"outputPath": "dist"
}

How do we add multiple components to our library?

I think you guys need to produce a video, with the intent of presenting to an audience that doesn't even have a library setup yet, that shows how to take a simple component or repo of at least 2 components and install them both. I was hoping that the video from yesterday would show that. Cover the process from square one.

thanks,
Mike

10

Agreed! I can share a quick recording here, but'll leave the real thing to the professionals.

11

That sounds great Darren, thanks! Looking forward to your video!

Mike

12

@Darren

I'm trying to install the smart-pdf-viewer into our library but still now sure how to do this. Here is what I've done:

  1. Opened custom gallery repo
  2. Git pull
  3. Went to components/smart-pdf-viewer
  4. Did npm install
  5. Tried npx retool-ccl deploy
  6. Got error:

Unhandled error: {
err: Error: Could not find Library with name (SmartPdf). Please check your package.json retoolCustomComponentLibraryConfig value.
at Object.deployCommand [as handler] (C:\path\custom-component-gallery\components\smart-pdf-engine\node_modules@tryretool\custom-component-support\commands\deploy\deploy.js:31:19)
at process.processTicksAndRejections (node:internal/process/task_queues:95:5),
msg: null

Please let me know what I'm doing wrong. All I want to do is deploy this component to our existing library!

thanks,
Mike

13

Hey @mikeS - apologies for keeping you in suspense! I just recorded a walkthrough for you.

Please forgive the gaffes, as I didn't really rehearse this. Let me know if you have any questions!

1 Like
14

@Darren - That is perfect! I got it working. The key was the root level index.tsx file.

thanks,
Mike

1 Like