Recently, I tried to upgrade my old React app to use Vite instead of Create React App, because CRA has been deprecated. However, I noticed my embedded Observable chart with Runtime no longer works.
I am using the same embed code, but I get the error saying “Unexpected token ‘<’, "<!DOCTYPE "… is not valid JSON.” The current instructions for embedding Observable charts still use CRA. Does anyone know how I can update the embed code to support Vite + React projects?
Can you share more of the returned document markup? This sounds like you might have gotten a Cloudflare bot challenge.
Also, can you share which notebook you were trying to embed?
@mootari The notebook I want to embed is: China Province Population Map / Shuai Hao | Observable . When I was using CRA, the same code worked fine. But after switching to Vite, the same code results in the following error:
Could you explain a little bit what the returned document markup? Then I can share more.
I suspect that Vite fails to be bundle the file attachments, and that the Runtime error that you see is a 404 response when the notebook tries to fetch the geojson file. You may want to check if the attachments are present in the built files.
You should be able to view the full response by selecting the request in your devtools network tab and then selecting the preview tab.
