Just a blank area where UI & tools should be!

Shotstack API
1

Stuck with Shotstack Studio SDK in React—Editor UI Won’t Load, Need Help!

Hey everyone,

I’ve been struggling to integrate the Shotstack Studio SDK into my React app for a Car Dealership SaaS project, and I’m hitting a wall. The goal is to let users upload a video (e.g., test.mp4) via a Flask backend with an Azure Blob Storage SAS URL and edit it using the Shotstack editor UI (timeline, trim, text overlay) in a #studio-container div. The upload works fine, but the editor just shows a blank white space, and I’m getting a bunch of errors I can’t resolve.

What I’m Trying to Do

I’m building a React app where users can log in, upload videos to Azure Blob Storage, and edit them with Shotstack’s Studio SDK. The backend (Flask on http://127.0.0.1:5000) handles the upload and returns a SAS URL, which I pass to the frontend. The plan is to initialize the Shotstack editor with that video URL and show the editing interface.

Where It’s Failing

  • The upload succeeds (Flask logs show POST /upload 200), and the UI says “File test.mp4 uploaded successfully,” but the #studio-container stays empty.
  • Latest errors in the console:
    • TypeError: handleUpload is not a function (App.tsx:138)—seems like a React scoping issue.
    • Target element not found and Iframe not found in the target element (shotstack.min.js:1:1)—the SDK can’t set up the UI.
    • Studio init failed: TypeError: Cannot set properties of undefined (setting 'onload') (App.tsx:84)—happens with window.shotstack.create.
    • TypeError: window.shotstack.init is not a function—tried switching to init based on a CodeSandbox example, but it’s not there.

What I’ve Tried So Far

I’ve been working on this for a while, trying everything I can think of:

  • Started with window.shotstack.create('studio', template, options) in a useEffect hook, using useRef for #studio-container.
  • Switched to window.shotstack.init('studio', options) after seeing it work in a CodeSandbox example (link), but init isn’t even in my window.shotstack.
  • Tweaked create with empty templates and minimal options to dodge the onload error, but no luck.
  • Tried window.shotstack.load('studio', options) as another option.
  • Added polling with setTimeout to make sure the SDK loads before initializing.
  • Went for dynamic script loading (adding the SDK script via JavaScript) to avoid static loading issues, even removing the <script> from index.html.
  • Tested with just apiKey and element to see if the editor would load at all, but still nothing.
  • Added debug logs (e.g., console.log("handleUpload called")) to track the handleUpload function, which recently threw that weird error.
  • Confirmed JavaScript is enabled (app runs, logs show up), and tried multiple browsers (Chrome, Edge, Firefox) with the same result.

Current Setup

  • Project: Located at C:\Users\vtcru\Documents\SaaS\car-dealership-saas.
  • File: src/App.tsx (React, latest version via create-react-app).
  • SDK: Using https://js.shotstack.io/studio/0.5.6/shotstack.min.js (also tested latest).
  • Backend: Flask on http://127.0.0.1:5000, storing videos in Azure Blob Storage (cardealershiopsaastorage.blob.core.windows.net/media/test.mp4).
  • Console Output: console.dir(window.shotstack) shows create, edit, load, on, refresh, but no init.

Extra Notes

  • I’m getting CORS warnings (Access-Control-Allow-Origin missing) when fetching the SAS URL, but that shouldn’t stop Shotstack since it can access it directly.
  • The Flask backend is solid (200 OK on uploads), so the issue seems to be frontend/SDK-related.

Help Me Out!

I’m running in circles and could really use some advice. Can anyone confirm the right way to init the Studio SDK (version 0.5.6) in React, especially since init isn’t showing up for me? Why does create throw that onload error, and what’s the correct setup? Also, any ideas on fixing the handleUpload is not a function error—maybe a syntax hiccup I’m missing? .

Thanks in advance for any pointers—I’m feeling pretty stuck on this one!