🏠 back to Observable

Embedding in react, issue with fileattachments/babel

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, where I replaced ‘new URL("./files…’ with ‘require("./files…’ which has worked for me before, however I’m still getting this error:

My notebook is viewable here https://observablehq.com/d/1aff5f3ccb61927a

I’d be grateful for any help. This is a workflow I intend on using a lot! Thanks

1 Like

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

and see Mike’s example here https://github.com/observablehq/react-zoomable-sunburst

you could also use their react example using rollup to bundle it

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.


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"]]);

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:
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 work… I could download manually, but if I follow the instructions in this how to embed notebook, the json file does copy over… strange.

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

1 Like

the json file doesn’t not come with a .json extension

do you see the same files?

1 Like

… and if that annoys you, be sure to add your voice to


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.

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.

Ok, if I am now getting this example to work,

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.

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.

did you rename the source files? I’m not sure if it should contain the .json on the require call

./files/e65374209781891f37dea1e7a6e1c5e020a3009b8aedf113b4c80942018887a1176ad4945cf14444603ff91d3da371b3b0d72419fa8d2ee0f6e815732475d5de .json

Yes, I tried with and without the .json.

Yes, you’re onto something. That does seem to be the case. I need to figure out why.

ow, I guess the require trick stills works, but now you have to return the module .default

  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 ?

1 Like

By the way, d3-require automatically appends “.js” if the URL contains no extension.

1 Like

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.