how do i embed the notebook in react

Community Help
2

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 replace the line related to FileAtachments

  const fileAttachments = new Map([["Terminal_1_1st_Aug.csv", new URL("./files/624eff0ddb0053eaac7843157607c51fa2ec90a0637be46099091c2abd02dfce8a004711402a07a363fc0c59f575965754a438a3752f8f32beaf50e26df1b88a", import.meta.url)]]);

  const fileAttachments = new Map([["Terminal_1_1st_Aug.csv", require("./files/624eff0ddb0053eaac7843157607c51fa2ec90a0637be46099091c2abd02dfce8a004711402a07a363fc0c59f575965754a438a3752f8f32beaf50e26df1b88a")]]);

the idea is to replace the not supported import.meta.url with require('./') then webpack loaders will take care to copy and link the corrected file attachment.

1 Like