Observable

Notebooks can be embedded and customized anywhere on the web (or off it).

Embedding Notebooks

Hi Jeremy!
I have a compilation error at this point. Is this tutorial still functional and up to date or do I have a configuration problem somewhere?
Here is the error message:

./node_modules/@observablehq/how-to-embed-a-notebook-in-a-react-app/361e9520c577183b@440.js 4:203
Module parse failed: Unexpected token (4:203)
File was processed with these loaders:
 * ./node_modules/react-scripts/node_modules/babel-loader/lib/index.js
You may need an additional loader to handle the result of these loaders.
| export default function define(runtime, observer) {
|   const main = runtime.module();
>   const fileAttachments = new Map([["image.png", new URL("./files/4c5f999a48a054137e0d373691170343067271dca83fd701c3becab4a23f5807ee560f17a3c05a55068ce70f6afa8f45497f6e6b9d8a49770758c5a6c909410a", import.meta.url)], ["image@1.png", new URL("./files/122ffbb3a402dea45b93d0ee2d5d5664afbad5edc69cc7c75f1d468f1c3cbbfd5c3d4ec0858c0c7d92a7f2351686dc316d6f7474bfe2938211d0b1397bb701f7", import.meta.url)], ["image@2.png", new URL("./files/3ff7409d68c72bd528e31ec024ac3d631b2c1175587871c56564291f7050ca26b9137aa1b4395930089399a5bedd057c8664e77ae3cd338d938cc108f90e7e82", import.meta.url)], ["image@3.png", new URL("./files/7faa92bdb9b9a8511ac23dd8ce58af0c9ec38601219ef2b91d6286ff831c0f8996cb633fabc0b8bed7a2d692f279c95ca0ee9e57be478bc9056869541c5b39c4", import.meta.url)]]);
|   main.builtin("FileAttachment", runtime.fileAttachments(name => fileAttachments.get(name)));
|   main.variable(observer()).define(["md"], function (md) {

I'm having the same issue, did you find an answer for it? Thanks in advance.

Cesar Calderon Muro

I had the same issue.  Not a great introduction to Observable when the "getting started" demo doesn't work!  I did some digging and found a discussion about the issue here: https://talk.observablehq.com/t/embedding-a-notebook-import-meta/3899

Adam Nielsen

Jeremy Ashkenas

image.png

image@1.png

image@2.png

image@3.png

download_code.png

embed2.mov

embed.mov

reactScreen.png

Screen Shot 2022-12-14 at 9.24.55 PM.png

screenShot20221214At92455Pm

Embed a notebook in a React app