Custom React Sketch Canvas component from NPM?

Hi, a new user here.
I'm trying to build a custom component - React Sketch Component using a React component from the NPM module.

What I've done:

  1. I have added the to the libraries
  2. Created a custom component
  3. Imported the package by using window.react-sketch-canvase

I cannot figure out how to add the react component to the custom component in Retool.
It seems like import ReactSketchCanvas from 'react-sketch-canvas'; doesn't work? But I'm not sure.

Can anyone help me debug the issue?

For reference this is the code inside my custom component:

  ... some classes 

<script crossorigin src=""></script>
<script crossorigin src=""></script>
<script crossorigin src=""></script>

<div id="react"></div>

<script type="text/babel">
  const { ReactSketchCanvas } = window.react-sketch-canvas;
  const styles = {
    border: "0.0625rem solid #9c9c9c",
    borderRadius: "0.25rem",
  const MyCustomComponent = ({ triggerQuery, model, modelUpdate }) => (
    <div className="card"> 
      <div className="title">Custom component</div>

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

Hi @Keen! Welcome to the Retool Community! Hmm, can you try const { ReactSketchCanvas } = window["react-sketch-canvas"];which exactly matches the syntax in our docs. Are you getting any console errors?

I'm also wondering if we need a different script url :thinking: Maybe this link: ""

Hi @Keen! Stepping in here as well. I haven't been able to get this particular library to work in a custom component, but I could definitely be missing something (so don't let this discourage you entirely). I'd be happy to continue helping you debug if you've made any progress and are hitting new error messages!