Hi there, I’m using the code snippets to embed my notebook in react. However, when I run ‘yarn start’ I get a ‘failed to compile error’ complaining about the fileattachments. I did follow these instructions, also provided in embed window but it did not seem to solve the issue. For file attachment…

Ok, it seems I also forgot to remove import.meta.url, as described in how do i embed the notebook in react . I was hoping the instructions in the embed window about file attachments working with babel would have fixed this. Is this work around still necessary or is there a fix?

hi @mbrownshoes if you’re using create-react-app you might want to look at this thread [image] Zoomable Sunburst d3 chart with react Here’s a working demo you can check out: The main wrinkle here is that create-react-app doesn’t support the standard import.meta syntax…

Interesting, so I keep running into this error now, even when I try embedding using the zoomable-sunburst example chart = RuntimeError: Unexpected token < in JSON at position 0 this is after I implemented this change const fileAttachments = new Map([["flare-2.json","/flare-2.json"]]);

[image] mbrownshoes: chart = RuntimeError: Unexpected token < in JSON at position 0 weird, seems like there is something wrong with the content on your json file. Did you download it and move to public/ ?

I put the notebook code here: src/@d3/zoomable-sunburst as described in: https://github.com/observablehq/react-zoomable-sunburst Ah, so I see when I download the code there is no json file and in the above repo I don’t see where he has put the flare.json file, so not sure how it is supposed to wo…

How are you downloading and unzipping your tarball? Apparently there are some issues with different zip software: [image] Use of download code ? Community Help Thanks Cobus, The file/folder you mention does not show in the Download Code .tgz file for the Parallel Sets S…

the json file doesn’t not come with a .json extension [image] do you see the same files?

[image] radames: the json file doesn’t not come with a .json extension … and if that annoys you, be sure to add your voice to [image] What's your method to compress FileAttachements? Site Feedback When exporting a notebook that contains a FileAttachment, the files a…

Yes, I do, and correct there is no json extension.

Oh weird, yes if I download using the Download Code button and use unarchiver to unzip the files do not show. If I use yarn add then the files are downlaoded but with no extension.

Embedding in react, issue with fileattachments/babel

Help

aaronkyle November 19, 2020, 6:09am 8

How are you downloading and unzipping your tarball? Apparently there are some issues with different zip software:

Topic		Replies	Views
embedding a notebook --> import.meta Help	3	1184	September 19, 2020
how do i embed the notebook in react Help	6	1678	May 27, 2021
Gatsby static blog template with content from observable Help	9	1904	November 26, 2021
Embed chart in a React App Help	9	169	January 22, 2026
File attachments! Announcements	50	8961	September 2, 2021

Embedding in react, issue with fileattachments/babel

Related topics