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

[mpmp]

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.

[WidleStudioLLP]

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

[mpmp]

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.

[WidleStudioLLP]

@mpmp

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

[mpmp]

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.

[WidleStudioLLP]

@mpmp

Could you please provide a screenshot showing the file naming?

Because the issue is related to the file naming.

[mpmp]

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

[WidleStudioLLP]

Hi @mpmp,

I was reviewing your package.json file and wanted to kindly check—does the following section look correct to you, or is there anything that might need adjustment?

"retoolCustomComponentLibraryConfig": {
"name": "componentname",
"label": "component label",
"description": "description",
"entryPoint": "src/index.tsx",
"outputPath": "dist"
}

[mpmp]

Yes, it looks correct on my end. In the new custom component repo clone it's as simple as:

  "retoolCustomComponentLibraryConfig": {
    "name": "Test",
    "label": "test",
    "description": "test",
    "entryPoint": "src/index.tsx",
    "outputPath": "dist"
  }

and retool-custom-component-manifest.json is:

{
  "customComponentSupportVersion": "2",
  "components": {
    "HelloWorld": {
      "name": "Hello World",
      "model": [
        {
          "name": "name",
          "type": "string"
        }
      ],
      "events": [],
      "defaultHeight": 5,
      "defaultWidth": 2
    }
  }
}

[lindakwoo]

Hey @mpmp,
I see you are using @latest. What happens when you run this in your terminal:

npm ls @tryretool/custom-component-support --all

[lindakwoo]

Also @mpmp, this may be related to a recent incident. When you go to change the version of your custom component library in your app, do you see multiple "dev" revisions that you can select?