embedding a notebook --> import.meta

[tau]

Hi

I am currently trying to build some sort of portfolio / personal website and want to embed my notebooks. I followed the instructions from this notebook, but i am not using create-react-app. Instead i wanted to try parcel + react.

If I try to import one of my notebooks e.g.

import parametricSurfaces from '@timhau/parametric-surfaces';

i get an error:

Uncaught SyntaxError: Cannot use 'import.meta' outside a module

which i can obviously fix by adding a type="module" attribute to my script tag. But as this is not supported in older browsers i am looking for an alternative.

Can it be resolved with a webpack / create-react-app setup or is there another work around?

Thanks in advance
Tim

[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

[tau]

thanks @radames :),
i think i will switch to webpack and sorry for the duplication.

[radames]

Cool that works for you!