Embed chart in a React App

Community Help
1

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?

2

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?

3

@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:

Screenshot 2025-12-23 at 1.37.30 PM
Screenshot 2025-12-23 at 1.37.30 PM1324×198 18.4 KB

Could you explain a little bit what the returned document markup? Then I can share more.

4

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.

Edit: attachments might need to be placed in /public: Static Asset Handling | Vite

5

@mootari I noticed all the data files, including both JSON and CSV files, are giving out 304 errors in the Network Tab. After taking a closer look, I noticed the site is requesting data from the following URL “http://localhost:5173/node_modules/.vite/deps/files/1aa1f923cfda9be3481e3b71f037884b4e8e983a62e1b1187d68e1010e4b09379f10ac3174ec26d482c82a5ce8c4f677c0f367484f8d067f16349cf8d3cd324e.csv”.

However, the “deps” folder doesn’t have any subfolders after I run “npm install”. Simply placing the data files in the “public” folder doesn’t address this issue.

6

Did you mean to write “404”? Although I’d be surprised if you saw an error at all, because afaict Vite simply serves the entry page (hence the <!doctype ...).

It’s not even needed for the build, where according to my tests the file attachments get included and referenced correctly. So the problem is limited to the dev server / HMR because for some reason Vite doesn’t handle the asset path there.

Edit: I can observe the exact same problem in a vanilla JS setup.

1 Like
7

You are right. After I deploy the page, the files are included and referenced correctly. It is just the dev server.

I was just referring to the 304 status in the network tab, and now I realized that it is the same status for every other image and asset.

Do you have any suggestions for me to resolve this issue on the dev server?

8

Only 4xx and 5xx are errors. You can learn more about HTTP statuses here: HTTP response status codes - HTTP | MDN

I’d consider this a bug in Vite and file an issue in their repo. Try to keep your reproduction example simple, and ideally leave React out of it since it’s not required to reproduce the problem.

Edit: actually, this discussion already covers the exact problem (though without any good solutions): loading assets from node_modules · vitejs/vite · Discussion #13138 · GitHub

9

I found a workaround (I’ve also left a comment on the discussion):

export default defineConfig(({mode}) => ({
  plugins: [react()],
  
  ...mode === "development" && {
    optimizeDeps: {
      exclude: ["@my-org/my-package"],
    }
  }
}));