Embedding in react, issue with fileattachments/babel

[mbrownshoes]

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

[mbrownshoes]

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?

[radames]

hi @mbrownshoes if you’re using create-react-app you might want to look at this thread

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, 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

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.

[mbrownshoes]

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

[radames]

@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/ ?

[mbrownshoes]

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

[aaronkyle]

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

Use of download code ?

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]

[radames]

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

do you see the same files?

[mootari]

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

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 <IfModule mod_deflate.c> SetOutputFilter DEFLATE </IfModule> I’m not sure this is the best way to proceed. Also…

[mbrownshoes]

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

[mbrownshoes]

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.

[mbrownshoes]

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.

[mbrownshoes]

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

observablehq/react-zoomable-sunburst

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.

[mootari]

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

[radames]

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

[mbrownshoes]

Yes, I tried with and without the .json.

[mbrownshoes]

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

[radames]

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 ?

observablehq/examples

[mootari]

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

[mbrownshoes]

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.