General debugging in custom components

How do you do a general debugging in custom components? I'm trying to import a library and I'm using the simplest code that I can find with that library but it's still a blank component and I'm not sure how I would debug it.

I'm aware of the debug tools on the bottom right but I'm not sure what information that I can get from that since this is just HTML.

This is the code that I have in the iframe:

<div id="react"></div>
  const initialNodes = [
  { id: '1', position: { x: 0, y: 0 }, data: { label: '1' } },
  { id: '2', position: { x: 0, y: 100 }, data: { label: '2' } },
  const initialEdges = [{ id: 'e1-2', source: '1', target: '2' }];  

  const MyCustomComponent = ({ triggerQuery, model, modelUpdate }) => (
    <p>Hello, {}!</p>
      <ReactFlow nodes={initialNodes} edges={initialEdges} />

  const ConnectedComponent = Retool.connectReactComponent(MyCustomComponent);
  const container = document.getElementById("react");
  const root = ReactDOM.createRoot(container);
  root.render(<ConnectedComponent />);

But it keeps appearing as blank because something is wrong. All I want is to learn how to debug this so wondering what other people would do.

This is what I see on the edit mode

Figured it out, the best I've noticed is using the Chrome Debugging tool. Turns out the issue was with my CDN minified JS, it was still using an import.

Warning for those using CDN JS, some of the minified libraries are using import still.

Hi @SimpleEd

I saw this error in the browser console dev tools:

Adding type='text/babel' to the main script resolves & leads to other errors:

See this error indicating that the custom component code has incorrect JSX syntax:

Thanks for flagging, @SimpleEd! I see that as well :disappointed:

Sorry, didnt see the notification on your comment until now @Tess! Curious, how come we have to specify "text/babel"? Is that how Retool compiles the code?

Good question! I really just compared your overall syntax to our example code in our docs to see if anything was missing

I am linking an external resource that talks about why this is used