Опера дошла до форума Observablehq. Вот некоторые идеи для решения проблемы на случай, если вам понадобится помощь во встраивании записной книжки Observablehq в приложение React.
https://talk.observablehq.com/t/zoomable-sunburst-d3-chart-with-react/3686/22
В итоге, записная книжка Observablehq используйте современный синтаксис import.meta
. create-react-app
связывает и преобразует ваш код с помощью webpack / babel, в настоящее время он не поддерживает этот синтаксис. Вы можете извлечь, отредактировать и добавить плагин webpack / babel для поддержки import.meta
.
Следующие два решения - как избежать import.meta
Скачать и отредактировать исходный код записной книжки, чтобы ваша папка src/
, используя абсолютный путь, а не относительный путь. Майк Босток сделал рабочую демонстрацию https://github.com/observablehq/react-zoomable-sunburst
Загрузите исходный код записной книжки в свою папку src/
и отредактируйте cost fileAttachments
new URL
ссылки на require
. Загрузчики Webpack скопируют и свяжут исправленный файл
Например, измените:
const fileAttachments = new Map([["FILE_NAME.csv", new URL("./files/HASH", import.meta.url)]]);
на
const fileAttachments = new Map([["FILE_NAME.csv", require("./files/HASH")]]);
Это работает, только если у вас установлен webpack
файловый загрузчик в вашем приложении.