Getting Invalid path retool-custom-component-manifest.json.js in a new Custom Components Library

Hi! Today, when trying to develop a custom component, I couldn't get it to update, despite running npx retool-ccl dev. I looked into the our self-hosted instance's logs and saw:

Invalid path retool-custom-component-manifest.json.js in zip file. Path cannot be an absolute path, cannot contain the character | and must be one of the files [components.js, components.css, retool-custom-component-manifest.json]

Indeed, there's a file retool-custom-component-manifest.json.js in the dist/ folder.

Based on the thread below I explicitly set @tryretool/custom-component-support's version to ^1.7.0.

https://community.retool.com/t/how-do-i-build-custom-components-in-3-148/56475/4

I also tried upgrading our Retool instance to 3.148.9-stable and cloning the CCL repo again and created a new CCL, but the bug still persists.

Hey @mpmp Welcome to the community,

Have you made any changes to the retool-custom-component-manifest.json.js file? Also, please check the generated retool-custom-component-manifest.json file, as it defines how data can be passed between the Retool app and your custom component. It's possible that an error could be caused by unnecessary or incorrect inputs or outputs defined in this file.

Keep in mind that this file is automatically generated when you clone the Retool custom component template, so it's important not to rename it.

Additionally, please ensure you're using the latest version of the @tryretool/custom-component-support package by updating it in your project.

Create custom component according to the retool doc

Hi @WidleStudioLLP!

I have not made any changes to retool-custom-component-manifest.json.js. retool-custom-component-manifest.json looks correct and I have not made any changes to it either.

I have tested it both with the latest version of @tryretool/custom-component-support with the version set to 1.7.0.

I followed the retool doc.

To add more context, I'm not able to sync with our Retool instance using npx retool-ccl dev but I'm able to deploy them using npx retool-ccl deploy.

@mpmp

Can you start the process from the beginning, including cloning the custom component and setting up everything required for it.

As described in my post, I already tried it:

  1. I cloned the custom components repo again.
  2. I created a new Custom Components Library with npx retool-ccl init.
  3. I tried syncing the default component with npx retool-ccl dev.

I got the same error.

@mpmp

Could you please provide a screenshot showing the file naming?

Because the issue is related to the file naming.

Sure, here you go. Do you need the src/ directory as well?