Study: D3 in React about fire-elect HOT 4 OPEN

this could be an option

https://observablehq.com/@observablehq/how-to-embed-a-notebook-in-a-react-app

from fire-elect.

Really cool! We can develop interactive charts in Observable and embed them into react

from fire-elect.

Tried to add a notebook to react app, kept seeing the following error even if I added @babel/plugin-syntax-import-meta:
./node_modules/@observablehq/downloading-and-embedding-notebooks/[email protected] SyntaxError: ~/pretty-animation/node_modules/@observablehq/downloading-and-embedding-notebooks/[email protected]: Support for the experimental syntax 'importMeta' isn't currently enabled (4:206): ... Add @babel/plugin-syntax-import-meta (https://git.io/vbKK6) to the 'plugins' section of your Babel config to enable parsing.

What I tried:

1. adding a babel property into package.json:
   "babel": { "plugins": [ "@babel/plugin-syntax-import-meta" ] },

2. using react-app-rewired:
   (https://medium.com/manato/introduce-babel-new-plugins-to-create-react-app-ea55f56c3811)
   And putting this in .babelrc
   "plugins": [ "@babel/plugin-syntax-import-meta" ]

When I intentionally misspell the plugin name, the complain becomes Error: Cannot find module 'babel-plugin-plugin-syntax-import-meta'

Current suspicion is it has to do with babel 7 (https://babeljs.io/docs/en/config-files#6x-vs-7x-babelrc-loading). The blog post over in observable was back in May 2018, while babel 7 was released in August 2018.

from fire-elect.

have the same problem when trying to embed a notebook into react

from fire-elect.