embedding a notebook --> import.meta

[radames]

Hi @tau, I guess this topic was covered here before, particularly using webpack and create-react-app .

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 here is my hack

how do i embed the notebook in react

hi @mespsar, could you share more which problem have you encountered? Looking at your notebook now, I guess it might be related to the the FileAttachment and import.meta.url, specially if you’re using create-react-app which uses webpack. One quick hack is to edit the downloaded notebook, if you’ve followed the instructions you did yarn add https://api.observablehq.com/d/84fe095e25ec38a2.tgz?v=3 then you’ll have your notebook at node_modules/84fe095e25ec38a2/84fe095e25ec38a2@3060.js edit and…

they all rely on download and edit the source code of your notebook

maybe you can code a custom loader to fix import.meta I’m not familiar with parceljs