2b:null 2c:["$","title",null,{"children":"Embed a notebook in a React app | Observable | Observable"}] 31:T5ef,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) {32:[{"id":"7faa92bdb9b9a8511ac23dd8ce58af0c9ec38601219ef2b91d6286ff831c0f8996cb633fabc0b8bed7a2d692f279c95ca0ee9e57be478bc9056869541c5b39c4","href":"https://static.observableusercontent.com/files/7faa92bdb9b9a8511ac23dd8ce58af0c9ec38601219ef2b91d6286ff831c0f8996cb633fabc0b8bed7a2d692f279c95ca0ee9e57be478bc9056869541c5b39c4","name":"image@3.png","type":"image/png","lastModified":1572544191076.288,"size":884231},{"id":"3ff7409d68c72bd528e31ec024ac3d631b2c1175587871c56564291f7050ca26b9137aa1b4395930089399a5bedd057c8664e77ae3cd338d938cc108f90e7e82","href":"https://static.observableusercontent.com/files/3ff7409d68c72bd528e31ec024ac3d631b2c1175587871c56564291f7050ca26b9137aa1b4395930089399a5bedd057c8664e77ae3cd338d938cc108f90e7e82","name":"image@2.png","type":"image/png","lastModified":1572544177519.788,"size":338017},{"id":"122ffbb3a402dea45b93d0ee2d5d5664afbad5edc69cc7c75f1d468f1c3cbbfd5c3d4ec0858c0c7d92a7f2351686dc316d6f7474bfe2938211d0b1397bb701f7","href":"https://static.observableusercontent.com/files/122ffbb3a402dea45b93d0ee2d5d5664afbad5edc69cc7c75f1d468f1c3cbbfd5c3d4ec0858c0c7d92a7f2351686dc316d6f7474bfe2938211d0b1397bb701f7","name":"image@1.png","type":"image/png","lastModified":1572544162340.005,"size":61013},{"id":"4c5f999a48a054137e0d373691170343067271dca83fd701c3becab4a23f5807ee560f17a3c05a55068ce70f6afa8f45497f6e6b9d8a49770758c5a6c909410a","href":"https://static.observableusercontent.com/files/4c5f999a48a054137e0d373691170343067271dca83fd701c3becab4a23f5807ee560f17a3c05a55068ce70f6afa8f45497f6e6b9d8a49770758c5a6c909410a","name":"image.png","type":"image/png","lastModified":1572544148435.172,"size":145132},{"id":"52c3c50bad2639343f101f1047b8706952afeca1d4a11fa5767337ba77435e9679b202d4baff229724f25da4ab4a3c2e703d0d0819af9ff0de8d3d24c2801d28","href":"https://static.observableusercontent.com/files/52c3c50bad2639343f101f1047b8706952afeca1d4a11fa5767337ba77435e9679b202d4baff229724f25da4ab4a3c2e703d0d0819af9ff0de8d3d24c2801d28","name":"download_code.png","type":"image/png","lastModified":1644353148844.244,"size":99737},{"id":"87fcfbf749e8dee3c9fda9cfbb0a4bc75be57f699e5056ff899fc6641c93af8b7a08993b370dff2a46e1e2ea6a68cfa7b41733b9aa07c531d2e350fec6ed86dd","href":"https://static.observableusercontent.com/files/87fcfbf749e8dee3c9fda9cfbb0a4bc75be57f699e5056ff899fc6641c93af8b7a08993b370dff2a46e1e2ea6a68cfa7b41733b9aa07c531d2e350fec6ed86dd","name":"embed2.mov","type":"video/quicktime","lastModified":1671226179208.053,"size":900432},{"id":"d7ce7862eb2d56677c5af08178dd371adc810ce7316448b1e192fe7247c81a7c75d9ec336d554316cd06e731c204c5470838de1078dc8f06cd11b6317c70c2ae","href":"https://static.observableusercontent.com/files/d7ce7862eb2d56677c5af08178dd371adc810ce7316448b1e192fe7247c81a7c75d9ec336d554316cd06e731c204c5470838de1078dc8f06cd11b6317c70c2ae","name":"embed.mov","type":"video/quicktime","lastModified":1671226179208.053,"size":2198985},{"id":"d754d438bc02806b3a5368a37e7b3ccb160166f6300e15299115253d8299eb2733f49ae9c872019076087a0855b2abea15d2c176d21decba10d7a6a751ab31e9","href":"https://static.observableusercontent.com/files/d754d438bc02806b3a5368a37e7b3ccb160166f6300e15299115253d8299eb2733f49ae9c872019076087a0855b2abea15d2c176d21decba10d7a6a751ab31e9","name":"reactScreen.png","type":"image/png","lastModified":1671226179208.053,"size":152653},{"id":"18ffdd06a9c932456e10722920aa145718d4c55098ca26b7e56b995349b4eff2a283b4c2bc9f0b2339c50d3f60e2fbeee191ca848dbe38e59ebbd218d483df54","href":"https://static.observableusercontent.com/files/18ffdd06a9c932456e10722920aa145718d4c55098ca26b7e56b995349b4eff2a283b4c2bc9f0b2339c50d3f60e2fbeee191ca848dbe38e59ebbd218d483df54","name":"Screen Shot 2022-12-14 at 9.24.55 PM.png","type":"image/png","lastModified":1671226179208.053,"size":26872}] 2f:{"id":"361e9520c577183b","slug":"how-to-embed-a-notebook-in-a-react-app","title":"Embed a notebook in a React app","thumbnail":"153bc1aff97a2078121c03035b2c2c48c1258f5b8978ad640c92b0e8903f2334","access_level":"unlisted","create_time":"$D2018-05-22T21:17:55.766Z","update_time":"$D2022-12-16T21:29:39.208Z","view_time":null,"first_public_time":"$D2018-05-29T21:31:29.352Z","fork":false,"stars":133,"starred":false,"owner":{"type":"team","id":"f35c755083683fe5","login":"observablehq","name":"Observable","avatar_url":"https://avatars-next.observableusercontent.com/424c6c1f7794371c9915a160519bdfb34cf34e50069fcd6def38a1a04d4e9702","tier":"enterprise_2024"},"version":479,"publish_version":null,"role":null,"authored":false,"authors":[],"members":[{"type":"group","id":"c4990be612f2da51","login":"8788045797a2fd14","name":"Product Education","avatar_url":null,"tier":"public","role":"editor"},{"type":"team","id":"f35c755083683fe5","login":"observablehq","name":"Observable","avatar_url":"https://avatars-next.observableusercontent.com/424c6c1f7794371c9915a160519bdfb34cf34e50069fcd6def38a1a04d4e9702","tier":"enterprise_2024","role":"editor"}],"comments":[{"id":"4b755898dfa76808","reply_to_id":null,"content":"$31","create_time":"$D2021-02-07T19:13:54.312Z","update_time":null,"resolved":false,"user":{"type":"individual","id":"c6e84137b8a39d94","login":"linard-y","name":"","avatar_url":"https://avatars-next.observableusercontent.com/0ce44546efae24745b35d9327acbc99a3f3fdaeac3595375f92848f133b06ded","tier":null}},{"id":"16c6a65adb51850e","reply_to_id":"4b755898dfa76808","content":"I'm having the same issue, did you find an answer for it? Thanks in advance.","create_time":"$D2021-04-15T20:10:03.658Z","update_time":null,"resolved":false,"user":{"type":"individual","id":"4bafb57c0a6af449","login":"theccalderon","name":"Cesar Calderon Muro","avatar_url":"https://avatars-next.observableusercontent.com/0e5afcd4916f6993424522dc0e8469a6580b2a978bc53411f266edcc018f7f94","tier":null}},{"id":"8a86fafedb0b51ca","reply_to_id":"4b755898dfa76808","content":"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","create_time":"$D2021-05-25T11:47:56.435Z","update_time":null,"resolved":false,"user":{"type":"individual","id":"c56456aa2dc44ecb","login":"adam-nielsen","name":"Adam Nielsen","avatar_url":"https://avatars-next.observableusercontent.com/23d144c2ac417088fedf665d787d8b089aba12bf81146c2e38e007760c24d5de","tier":null}}],"custom_thumbnail":true,"trashed":false,"subscribed":null,"forks":65,"collection":{"id":"ea752d8349ed8254","slug":"embedding-notebooks","title":"Embedding Notebooks","owner":{"id":"f35c755083683fe5","login":"observablehq","name":"Observable"}},"type":"notebook","body":{"title":"Embed a notebook in a React app","cells":[{"id":0,"value":"# Embed a notebook in a React app\n\nSquinting at them from a certain distance, Observable notebooks and [React apps](https://reactjs.org/tutorial/tutorial.html) can look like close cousins: both are functional, reactive ways of writing UIs in JavaScript. Let’s see if we can get them to play nicely together, by embedding and controlling a notebook from React.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":478,"value":"embedDocsNote = note(htl.html`Note: You should read the Introduction to Embedding notebook before continuing.`)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":477,"value":"Here we have a sample bar chart from the [Plot](https://observablehq.com/@observablehq/plot?collection=@observablehq/plot) snippets in the [cell menu](https://observablehq.com/@observablehq/adding-cells?collection=@observablehq/notebook-fundamentals#cell-558). ","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":476,"value":"myBarChart = Plot.plot({\n marks: [\n Plot.barY(alphabet, {x: \"letter\", y: \"frequency\", sort: {x: \"y\", reverse: true}}),\n Plot.ruleY([0])\n ]\n})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":475,"value":"Notice that I've named this cell so that it can be used for embeds. (Only named cells can be embedded.)","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":108,"value":"md`Now, let's start a brand new React app with [create-react-app](https://github.com/facebook/create-react-app). Open a terminal and run the following commands:\n\n\\`\\`\\`bash\n> npx create-react-app pretty-animation\n\n... (installation flies by) ...\n\n> cd pretty-animation\n> yarn start\n\\`\\`\\``","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":156,"value":"Your browser quietly opens a new tab to [http://localhost:3000/](http://localhost:3000/), and the React start page appears:","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":471,"value":"

\n \n

The React screen appears at http://localhost:3000.

\n","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":163,"value":"To now embed our bar chart into a React app, we will open up the embed pane for that cell and copy the instructions. ","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":469,"value":"

","pinned":false,"hidden":false,"mode":"html","author":"$undefined","summary":"$undefined"},{"id":468,"value":"md`Now take the code you just copied and run it in a terminal. The example below should be similar:\n\n\\`\\`\\`bash\n> yarn add @observablehq/runtime@5\nyarn add \"https://api.observablehq.com/d/2ea21d94adf9f376@475.tgz?v=3\"\n\\`\\`\\``","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":467,"value":"note(htl.html`Note: Use the code you copied from the Embed pane.`)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":466,"value":"Next we'll need the React code to create this component. You can also find this from the embed pane for the cell. ","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":465,"value":"

","pinned":false,"hidden":false,"mode":"html","author":"$undefined","summary":"$undefined"},{"id":215,"value":"md`Now we take the copied code and paste it into a new file for our React app. We'll call it *BarChart.js*. It should look like this:\n\n\\`\\`\\`js\nimport React, {useRef, useEffect} from \"react\";\nimport {Runtime, Inspector} from \"@observablehq/runtime\";\nimport notebook from \"2ea21d94adf9f376\";\n\nfunction Notebook() {\n const myBarChartRef = useRef();\n\n useEffect(() => {\n const runtime = new Runtime();\n runtime.module(notebook, name => {\n if (name === \"myBarChart\") return new Inspector(myBarChartRef.current);\n });\n return () => runtime.dispose();\n }, []);\n\n return (\n <>\n

Credit: Embed a notebook in a React app by Observable

\n \n );\n}\n\nexport default Notebook;\n\\`\\`\\`\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":232,"value":"The last step is to add our new component to the *Index.js* file, to have it render on localhost:3000.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":462,"value":"md`\n\n\\`\\`\\`js\nimport React from 'react';\nimport ReactDOM from 'react-dom/client';\nimport './index.css';\nimport Notebook from './BarChart';\n\nconst root = ReactDOM.createRoot(document.getElementById('root'));\nroot.render(\n \n \n \n);\n\n\n\\`\\`\\`\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":461,"value":"Now when you go to localhost:3000, you should see this:","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":460,"value":"

\n \n

The chart appears at http://localhost:3000.

\n","pinned":false,"hidden":false,"mode":"html","author":"$undefined","summary":"$undefined"},{"id":459,"value":"Now you've learned how to embed an Observable cell within a React app. Again, if you haven’t already, check out our [introduction to downloading and embedding notebooks](/@observablehq/downloading-and-embedding-notebooks). That tutorial will provide more details how embeds work and what you can do with them. \n\nFor more examples of using Observable with React apps, including passing data, check out our [examples in Github](https://github.com/observablehq/examples). ","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":458,"value":"---","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":457,"value":"// 2022.06: Fabian Iwand's suggested improvement for Note:\nnote = {\n const scope = DOM.uid(\"note\").id;\n const style = document.head.appendChild(htl.html``","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"}],"files":"$W32","stdlib":"1","titling":"auto"}} 30:"$2f:body"