Error when trying to deploy a custom component

App Building
1

Hi all!

I'm trying to build a custom component (slider with more than 2 handles).

So far I've been following the steps described on that page: Build custom component libraries | Retool Docs.

It works smoothly until I type npx retool-ccl dev where the following error message returns.

Also, I did update @tryretool/custom-component-support.

Any idea on how to solve this or what I might be doing wrong?

Thanks a lot.

The error message:

$ npx retool-ccl dev
Generating & updating manifest...
X [ERROR] No matching export in "tryretool-custom-component-collections-global:@
tryretool/custom-component-support" for import "Retool"

src/index.tsx:4:9:
  4 │ import { Retool } from '@tryretool/custom-component-support'
    ╵          ~~~~~~

Build succeeded.
Sending updated code to Retool :incoming_envelope:...

=============
Newer version of @tryretool/custom-component-support available!
Please upgrade using the appropriate npm/yarn commands to receive new features a
nd bug fixes:
yarn upgrade @tryretool/custom-component-support
npm update @tryretool/custom-component-support

See Build custom component libraries | Retool Docs fo
r more details.

Error while sending code to Retool {
error: ResponseError: Response returned an error code
at CustomComponentLibraryApi.request (C:\Users\Moi\Documents\Code\retool\n
ew-custom-component\node_modules@tryretool\custom-component-support\retool_clie
nt\runtime.js:213:15)
at process.processTicksAndRejections (node:internal/process/task_queues:10
5:5)
at async CustomComponentLibraryApi.customComponentLibrariesLibraryIdRevisi
onsPostRaw (C:\Users\Moi\Documents\Code\retool\new-custom-component\node_modules
@tryretool\custom-component-support\retool_client\apis\CustomComponentLibraryAp
i.js:216:26)
at async CustomComponentLibraryApi.customComponentLibrariesLibraryIdRevisi
onsPost (C:\Users\Moi\Documents\Code\retool\new-custom-component\node_modules@t
ryretool\custom-component-support\retool_client\apis\CustomComponentLibraryApi.j
s:229:26)
at async C:\Users\Moi\Documents\Code\retool\new-custom-component\node_modu
les@tryretool\custom-component-support\build_components.js:234:36
at async C:\Users\Moi\Documents\Code\retool\new-custom-component\node_modu
les\esbuild\lib\main.js:1495:27 {
response: Response {
status: 400,
statusText: 'Bad Request',
headers: Headers {
date: 'Tue, 29 Oct 2024 15:00:30 GMT',
'content-type': 'application/json; charset=utf-8',
'content-length': '102',
connection: 'keep-alive',
'x-request-id': '4adad1fe9a3cd17887b3128c55012c6c',
'cache-control': 'private',
'set-cookie': 'in_retool_canary_group=never; Path=/; Expires=Wed, 30 Oct
2024 15:00:30 GMT; Secure; SameSite=Strict',
'x-retool-api-version': '3.110.0-a37f2e7 (Build 208590)',
'retry-after': '33.732',
'x-ratelimit-limit': '300',
'x-ratelimit-remaining': '285',
'x-ratelimit-reset': 'Tue Oct 29 2024 15:01:04 GMT+0000 (Coordinated Uni
versal Time)',
etag: 'W/"66-TdGuhhep3w6ZAE9t7murxmHZjLo"',
'strict-transport-security': 'max-age=31536000; includeSubDomains'
},
body: ReadableStream { locked: false, state: 'readable', supportsBYOB: tru
e },
bodyUsed: false,
ok: false,
redirected: false,
type: 'basic',
url: 'https://quellevoitureelectrique.retool.com/api/v2/custom_component_l
ibraries/15941bf6-21a9-42b8-8a82-e26a2733a951/revisions'
}
}
}
X [ERROR] Response returned an error code [plugin zip-and-send]

C:\Users\Moi\Documents\Code\retool\new-custom-component\node_modules\@tryret

ool\custom-component-support\retool_client\runtime.js:213:14:
213 │ throw new ResponseError(response, 'Response returned an ...
╵ ^

at CustomComponentLibraryApi.request (C:\Users\Moi\Documents\Code\retool\new

-custom-component\node_modules@tryretool\custom-component-support\retool_client
\runtime.js:213:15)
at process.processTicksAndRejections (node:internal/process/task_queues:105:
5)
at async CustomComponentLibraryApi.customComponentLibrariesLibraryIdRevision
╵ ~~~~~

at setup (C:\Users\Moi\Documents\Code\retool\new-custom-component\node_modules\@tryretool\custom-component-support\build_component

s.js:229:19)
at handlePlugins (C:\Users\Moi\Documents\Code\retool\new-custom-component\node_modules\esbuild\lib\main.js:1293:21)
at buildOrContextImpl (C:\Users\Moi\Documents\Code\retool\new-custom-component\node_modules\esbuild\lib\main.js:979:5)
at Object.buildOrContext (C:\Users\Moi\Documents\Code\retool\new-custom-component\node_modules\esbuild\lib\main.js:787:5)
at C:\Users\Moi\Documents\Code\retool\new-custom-component\node_modules\esbuild\lib\main.js:2197:68
at new Promise ()
at Object.context (C:\Users\Moi\Documents\Code\retool\new-custom-component\node_modules\esbuild\lib\main.js:2197:27)
at Object.context (C:\Users\Moi\Documents\Code\retool\new-custom-component\node_modules\esbuild\lib\main.js:2037:58)
at buildAndDeployDevContiniously (C:\Users\Moi\Documents\Code\retool\new-custom-component\node_modules@tryretool\custom-component
-support\build_components.js:327:48)

2 errors
[watch] build finished, watching for changes...

2 Likes
2

Can you show us the contents of srs/index.tsx?
Or try reverting that file back to it's original state and see what happens?

2 Likes
3

Thanks Julius,

I tried again with the original index.tsx file, the one that gets downloaded when cloning template repository, the error message is the same.

The content is as follows:
import React from 'react'
import { type FC } from 'react'

import { Retool } from '@tryretool/custom-component-support'

export const HelloWorld: FC = () => {
const [name, _setName] = Retool.useStateString({
name: 'name'
})

return (


Hello {name}!


)
}

4

I'm not sure how much you know about npm, so when you say this, do you mean you updated it in the package.json? Did you run npm install again after that? if you search for the package name @tryretool/custom-component-support in package-lock.json, what do you see for the version?

5

I clearly don't know much ;).

When I said I updated @tryretool/custom-component-support, I meant I ran the following command in the terminal:

npm update @tryretool/custom-component-support

And this, before the issue I reported in this topic.

Version for @tryretool in package-lock.json is 0.0.7.

6

Ok so problem solved apparently.

Basically when following the steps on Build custom component libraries | Retool Docs, I get an index.tsx file that goes like this:

import React from 'react'
import { type FC } from 'react'

import { Retool } from '@tryretool/custom-component-support'

export const HelloWorld: FC = () => {
  const [name, _setName] = Retool.useStateString({
    name: 'name'
  })

  return (
    <div>
      <div>Hello {name}!</div>
    </div>
  )
}

with the error message that I specified earlier.

I deleted the first 3 lines of codes :slight_smile:

import React from 'react'
import { type FC } from 'react'

import { Retool } from '@tryretool/custom-component-support'

and now I have no error message in the terminal and I can access my custom components on the retool webapp.

However, my component does not display properly and instead shows the following error message:

Error rendering custom component

Retool is not defined

MultiSlider@data:text/javascript,var%20__create%20%3D%20Object.create%3B%0Avar%20__defProp%20%3D%20Object.defineProperty%3B%0Avar%20__getOwnPropDesc%20%3D%20Object.getOwnPropertyDescriptor%3B%0Avar%20__getOwnPropNames%20%3D%20Object.getOwnPropertyNames%3B%0Avar%20__getProtoOf%20%3D%20Object.getPrototypeOf%3B%0Avar%20__hasOwnProp%20%3D%20Object.prototype.hasOwnProperty%3B%0Avar%20__commonJS%20%3D%2

So I wonder if that might come from the fact that I deleted those 3 lines.

Will keep investigating but happy if someone as an idea on how to solve this.

Here's the screenshot:
image

7

Unfortunately you created that new error by getting rid of those three lines. I'm not sure why you're having the original problem. But I'm pretty sure that's not the way to solve it.

1 Like
8

Ok, so it works now.

I repeated the whole process but this time when there was a suggestion to force an audit because of vulnerabilities, I didn't do it.

That's the best explanation I have.

2 Likes