# Embedding in react, issue with fileattachments/babel **URL:** \ **Category:** Help\ **Created:** [November 18, 2020, 4:25pm UTC](https://talk.observablehq.com/t/embedding-in-react-issue-with-fileattachments-babel/4169 "2020-11-18T16:25:27Z")\ **Posts on this page:** 20\ **Page:** 1
**Author:** ![mbrownshoes](https://yyz2.discourse-cdn.com/flex030/user_avatar/talk.observablehq.com/mbrownshoes/32/423_2.png) [@mbrownshoes](https://talk.observablehq.com/u/mbrownshoes)\ **Post date:** [November 18, 2020, 4:25pm UTC](https://talk.observablehq.com/t/embedding-in-react-issue-with-fileattachments-babel/4169/1 "2020-11-18T16:25:27Z")
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 attachments to work with Babel, add @babel/plugin-syntax-import-meta to the 'plugins' section of your Babel config` I also followed the hack given here: [how do i embed the notebook in react](https://talk.observablehq.com/t/how-do-i-embed-the-notebook-in-react/3648), where I replaced ‘new URL("./files…’ with ‘require("./files…’ which has worked for me before, however I’m still getting this error: ![Screen Shot 2020-11-18 at 8.16.43 AM](https://canada1.discourse-cdn.com/flex030/uploads/observablehq/original/2X/a/a5c81a68eef1fb7eff38fde1cc8480c055461ff6.png) My notebook is viewable here [https://observablehq.com/d/1aff5f3ccb61927a](https://observablehq.com/d/1aff5f3ccb61927a) I’d be grateful for any help. This is a workflow I intend on using a lot! Thanks ---
**Author:** ![mbrownshoes](https://yyz2.discourse-cdn.com/flex030/user_avatar/talk.observablehq.com/mbrownshoes/32/423_2.png) [@mbrownshoes](https://talk.observablehq.com/u/mbrownshoes)\ **Post date:** [November 18, 2020, 4:34pm UTC](https://talk.observablehq.com/t/embedding-in-react-issue-with-fileattachments-babel/4169/2 "2020-11-18T16:34:38Z")
Ok, it seems I also forgot to remove `import.meta.url`, as described in [how do i embed the notebook in react](https://talk.observablehq.com/t/how-do-i-embed-the-notebook-in-react/3648). 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? ---
**Author:** ![radames](https://yyz2.discourse-cdn.com/flex030/user_avatar/talk.observablehq.com/radames/32/1699_2.png) [@radames](https://talk.observablehq.com/u/radames)\ **Post date:** [November 18, 2020, 6:49pm UTC](https://talk.observablehq.com/t/embedding-in-react-issue-with-fileattachments-babel/4169/3 "2020-11-18T18:49:37Z")
hi @mbrownshoes if you’re using `create-react-app` you might want to look at this thread > [@Zoomable Sunburst d3 chart with react](https://talk.observablehq.com/t/zoomable-sunburst-d3-chart-with-react/3686/15): > > 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, and you can’t add the necessary Babel plugin to support it without ejecting. So, the easiest thing to do is to edit the file attachments map to use an absolute path rather than a relative path, avoiding import.meta. I imagine create-react-app will support import.meta at some point in the future, and this’ll be easier. and see Mike’s example here [GitHub - observablehq/react-zoomable-sunburst: create-react-app + observablehq](https://github.com/observablehq/react-zoomable-sunburst) you could also use their react example using rollup to bundle it > > > //github.com/observablehq/examples/tree/main/react-file-attachment > This Rollup configuration supports file attachments, whereas many React environments (like the one you get from `create-react-app` ) stumble on file attachments’ use of import.meta. ---
**Author:** ![mbrownshoes](https://yyz2.discourse-cdn.com/flex030/user_avatar/talk.observablehq.com/mbrownshoes/32/423_2.png) [@mbrownshoes](https://talk.observablehq.com/u/mbrownshoes)\ **Post date:** [November 18, 2020, 10:59pm UTC](https://talk.observablehq.com/t/embedding-in-react-issue-with-fileattachments-babel/4169/4 "2020-11-18T22:59:50Z")
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"]]);` ---
**Author:** ![radames](https://yyz2.discourse-cdn.com/flex030/user_avatar/talk.observablehq.com/radames/32/1699_2.png) [@radames](https://talk.observablehq.com/u/radames)\ **Post date:** [November 18, 2020, 11:44pm UTC](https://talk.observablehq.com/t/embedding-in-react-issue-with-fileattachments-babel/4169/6 "2020-11-18T23:44:34Z")
> [@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/` ? ---
**Author:** ![mbrownshoes](https://yyz2.discourse-cdn.com/flex030/user_avatar/talk.observablehq.com/mbrownshoes/32/423_2.png) [@mbrownshoes](https://talk.observablehq.com/u/mbrownshoes)\ **Post date:** [November 19, 2020, 3:11am UTC](https://talk.observablehq.com/t/embedding-in-react-issue-with-fileattachments-babel/4169/7 "2020-11-19T03:11:55Z")
I put the notebook code here: src/@d3/zoomable-sunburst as described in: [https://github.com/observablehq/react-zoomable-sunburst](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 work… I could download manually, but if I follow the instructions in this [how to embed notebook](https://observablehq.com/@observablehq/how-to-embed-a-notebook-in-a-react-app), the json file does copy over… strange. ---
**Author:** ![aaronkyle](https://yyz2.discourse-cdn.com/flex030/user_avatar/talk.observablehq.com/aaronkyle/32/8106_2.png) [@aaronkyle](https://talk.observablehq.com/u/aaronkyle)\ **Post date:** [November 19, 2020, 6:09am UTC](https://talk.observablehq.com/t/embedding-in-react-issue-with-fileattachments-babel/4169/8 "2020-11-19T06:09:23Z")
How are you downloading and unzipping your tarball? Apparently there are some issues with different zip software: > [@Use of download code ?](https://talk.observablehq.com/t/use-of-download-code/3556/11): > > Thanks Cobus, The file/folder you mention does not show in the Download Code .tgz file for the Parallel Sets Sankey… I have attached an image showing what came in the .tgz. [parallel-sets-tgz] ---
**Author:** ![radames](https://yyz2.discourse-cdn.com/flex030/user_avatar/talk.observablehq.com/radames/32/1699_2.png) [@radames](https://talk.observablehq.com/u/radames)\ **Post date:** [November 19, 2020, 6:26am UTC](https://talk.observablehq.com/t/embedding-in-react-issue-with-fileattachments-babel/4169/9 "2020-11-19T06:26:55Z")
the json file doesn’t not come with a .json extension ![image](https://canada1.discourse-cdn.com/flex030/uploads/observablehq/original/2X/1/1ecc08e54aafd95b3d8a7defa7de1737f362f227.png) do you see the same files? ---
**Author:** ![mootari](https://yyz2.discourse-cdn.com/flex030/user_avatar/talk.observablehq.com/mootari/32/581_2.png) [@mootari](https://talk.observablehq.com/u/mootari)\ **Post date:** [November 19, 2020, 12:05pm UTC](https://talk.observablehq.com/t/embedding-in-react-issue-with-fileattachments-babel/4169/10 "2020-11-19T12:05:19Z")
> [@radames](#): > > the json file doesn’t not come with a .json extension … and if that annoys you, be sure to add your voice to > [@What's your method to compress FileAttachements?](https://talk.observablehq.com/t/whats-your-method-to-compress-fileattachements/3094): > > When exporting a notebook that contains a FileAttachment, the files are presented as “blobs” with no indication of their mime-type in the filename. Some (random(?)) servers do not take a hint that they can transfer them with gzip, and a CSV file that should need 150kB to transfer might need 1.2MB. Slow as hell. I fixed this locally by adding a .htaccess in the files/ directory with \ SetOutputFilter DEFLATE \ I’m not sure this is the best way to proceed. Also… ---
**Author:** ![mbrownshoes](https://yyz2.discourse-cdn.com/flex030/user_avatar/talk.observablehq.com/mbrownshoes/32/423_2.png) [@mbrownshoes](https://talk.observablehq.com/u/mbrownshoes)\ **Post date:** [November 19, 2020, 4:03pm UTC](https://talk.observablehq.com/t/embedding-in-react-issue-with-fileattachments-babel/4169/11 "2020-11-19T16:03:50Z")
Yes, I do, and correct there is no json extension. ---
**Author:** ![mbrownshoes](https://yyz2.discourse-cdn.com/flex030/user_avatar/talk.observablehq.com/mbrownshoes/32/423_2.png) [@mbrownshoes](https://talk.observablehq.com/u/mbrownshoes)\ **Post date:** [November 19, 2020, 4:17pm UTC](https://talk.observablehq.com/t/embedding-in-react-issue-with-fileattachments-babel/4169/12 "2020-11-19T16:17:19Z")
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. ---
**Author:** ![mbrownshoes](https://yyz2.discourse-cdn.com/flex030/user_avatar/talk.observablehq.com/mbrownshoes/32/423_2.png) [@mbrownshoes](https://talk.observablehq.com/u/mbrownshoes)\ **Post date:** [November 19, 2020, 4:21pm UTC](https://talk.observablehq.com/t/embedding-in-react-issue-with-fileattachments-babel/4169/13 "2020-11-19T16:21:06Z")
If I change the extension to .json and the update the code to ` const fileAttachments = new Map([["flare-2.json",require("./files/e65374209781891f37dea1e7a6e1c5e020a3009b8aedf113b4c80942018887a1176ad4945cf14444603ff91d3da371b3b0d72419fa8d2ee0f6e815732475d5de.json")]])` I still see a RuntimeError: Unexpected token \< in JSON at position 0 When I open the file, it looks fine. ---
**Author:** ![mbrownshoes](https://yyz2.discourse-cdn.com/flex030/user_avatar/talk.observablehq.com/mbrownshoes/32/423_2.png) [@mbrownshoes](https://talk.observablehq.com/u/mbrownshoes)\ **Post date:** [November 19, 2020, 4:36pm UTC](https://talk.observablehq.com/t/embedding-in-react-issue-with-fileattachments-babel/4169/14 "2020-11-19T16:36:55Z")
Ok, if I am now getting this example to work, > **[observablehq/react-zoomable-sunburst](https://github.com/observablehq/react-zoomable-sunburst)** > > create-react-app + observablehq. Contribute to observablehq/react-zoomable-sunburst development by creating an account on GitHub. but good grief that seems complicated (manually moving so many files around). The require work around you mentioned in a previous post @radames no longer seems to work for me. Too bad, it was less work as I didn’t have to move the json files to public. ---
**Author:** ![mootari](https://yyz2.discourse-cdn.com/flex030/user_avatar/talk.observablehq.com/mootari/32/581_2.png) [@mootari](https://talk.observablehq.com/u/mootari)\ **Post date:** [November 19, 2020, 5:39pm UTC](https://talk.observablehq.com/t/embedding-in-react-issue-with-fileattachments-babel/4169/15 "2020-11-19T17:39:41Z")
> [@mbrownshoes](#): > > I still see a > RuntimeError: Unexpected token \< in JSON at position 0 I’d recommend to inspect the network request. It’s possible that you actually receive the HTML of an error page, hence the “\<” at position 0. ---
**Author:** ![radames](https://yyz2.discourse-cdn.com/flex030/user_avatar/talk.observablehq.com/radames/32/1699_2.png) [@radames](https://talk.observablehq.com/u/radames)\ **Post date:** [November 19, 2020, 6:32pm UTC](https://talk.observablehq.com/t/embedding-in-react-issue-with-fileattachments-babel/4169/16 "2020-11-19T18:32:32Z")
did you rename the source files? I’m not sure if it should contain the **.json** on the require call > [@mbrownshoes](#): > > const fileAttachments = new Map([[“flare-2.json”,require(“./files/e65374209781891f37dea1e7a6e1c5e020a3009b8aedf113b4c80942018887a1176ad4945cf14444603ff91d3da371b3b0d72419fa8d2ee0f6e815732475d5de.json”)]]) ./files/e65374209781891f37dea1e7a6e1c5e020a3009b8aedf113b4c80942018887a1176ad4945cf14444603ff91d3da371b3b0d72419fa8d2ee0f6e815732475d5de **.json** ---
**Author:** ![mbrownshoes](https://yyz2.discourse-cdn.com/flex030/user_avatar/talk.observablehq.com/mbrownshoes/32/423_2.png) [@mbrownshoes](https://talk.observablehq.com/u/mbrownshoes)\ **Post date:** [November 19, 2020, 9:52pm UTC](https://talk.observablehq.com/t/embedding-in-react-issue-with-fileattachments-babel/4169/17 "2020-11-19T21:52:49Z")
Yes, I tried with and without the .json. ---
**Author:** ![mbrownshoes](https://yyz2.discourse-cdn.com/flex030/user_avatar/talk.observablehq.com/mbrownshoes/32/423_2.png) [@mbrownshoes](https://talk.observablehq.com/u/mbrownshoes)\ **Post date:** [November 19, 2020, 9:53pm UTC](https://talk.observablehq.com/t/embedding-in-react-issue-with-fileattachments-babel/4169/18 "2020-11-19T21:53:19Z")
Yes, you’re onto something. That does seem to be the case. I need to figure out why. ---
**Author:** ![radames](https://yyz2.discourse-cdn.com/flex030/user_avatar/talk.observablehq.com/radames/32/1699_2.png) [@radames](https://talk.observablehq.com/u/radames)\ **Post date:** [November 20, 2020, 2:50am UTC](https://talk.observablehq.com/t/embedding-in-react-issue-with-fileattachments-babel/4169/19 "2020-11-20T02:50:37Z")
ow, I guess the require trick stills works, but now you have to return the module **.default** ```auto const fileAttachments = new Map([["flare-2.json", require("./files/e65374209781891f37dea1e7a6e1c5e020a3009b8aedf113b4c80942018887a1176ad4945cf14444603ff91d3da371b3b0d72419fa8d2ee0f6e815732475d5de").default]]); ``` and if you download and decompress the tar source to your **./src/** you also have to remove the **runtime.js** from the folder. yes, few less steps. Maybe the overall solution is use a different bundler ? > **[observablehq/examples](https://github.com/observablehq/examples/tree/main/react-file-attachment)** > > Examples of using Observable in a variety of environments - observablehq/examples ---
**Author:** ![mootari](https://yyz2.discourse-cdn.com/flex030/user_avatar/talk.observablehq.com/mootari/32/581_2.png) [@mootari](https://talk.observablehq.com/u/mootari)\ **Post date:** [November 20, 2020, 8:35am UTC](https://talk.observablehq.com/t/embedding-in-react-issue-with-fileattachments-babel/4169/20 "2020-11-20T08:35:31Z")
By the way, d3-require automatically appends “.js” if the URL contains no extension. ---
**Author:** ![mbrownshoes](https://yyz2.discourse-cdn.com/flex030/user_avatar/talk.observablehq.com/mbrownshoes/32/423_2.png) [@mbrownshoes](https://talk.observablehq.com/u/mbrownshoes)\ **Post date:** [November 20, 2020, 4:39pm UTC](https://talk.observablehq.com/t/embedding-in-react-issue-with-fileattachments-babel/4169/21 "2020-11-20T16:39:38Z")
Thanks for letting me know it’s still possible with require. Yeah, the whole ‘bundler’ thing is foreign to me. I would like to automate these steps so every time I want to download an updated version of the notebook it’s easy. [Next page](https://talk.observablehq.com/t/embedding-in-react-issue-with-fileattachments-babel/4169.md?page=2)