Динамический импорт модуля в компонент для сайта gatsby js

Question

Я создаю сайт gatsby, где каждая страница генерируется из шаблона, но каждая страница требует отдельного импорта модуля.

В частности, каждая страница содержит блокнот observablehq , и они экспортируются из наблюдаемых в виде модулей.См. здесь .

Страницы динамически генерируются из файла json, например:

[
    {   "path": "page1",
        "modulename": "gatsby-test"
    },
    {   
        "path": "page2",
        "modulename": "gatsby-test-2"
    }
]

Это делается с помощью createPages в gatsby-node.js.

Я уже yarn add редактировал каждый блокнот проекта, например, yarn add https://api.observablehq.com/@robinl/gatsby-test.tgz.

Я пытаюсь написать компонент, который принимает имя модуля в качестве свойства, а затем загружает нужныемодуль из содержимого this.props.

Схема моего компонента выглядит следующим образом:

class ImportedNotebook extends Component {

    componentDidMount() {
        var promise = import(this.props.modulename).then(function(themodule) {
            // do stuff here
        })   
    }

    render() {
        return (<div>blah</div>);
    }
}

Это не работает - я получаю ошибку Unhandled Rejection (Error): Cannot find module 'gatsby-test-2' при посещении страницы на локальном хосте с использованием команды разработки gatsby.

Однако, если я заменим this.props.modulename на "gatsby-test-2", он будет работать нормально.

Есть ли способ динамической загрузки модулей из переменной?Или, возможно, другой подход, который был бы более подходящим для решения этой проблемы?

Answer 1

Я все больше убеждаюсь, что это невозможно сделать с помощью этого подхода.По сути, это потому, что веб-пакет требует явного импорта.Если вы попытаетесь сделать это «динамическим», он не сможет узнать, какой код связывать.

Вместо этого я пришел к следующему решению: - Разработать компонент, который принимает в качестве входных данных notebook, импортированный изнаблюдаемый модуль - иметь минимальную отдельную страницу для каждой записной книжки, которая импортирует записную книжку, а затем передает ее моему компоненту

Для каждой страницы код выглядит следующим образом:

import React from "react"
import notebook from "gatsby-test-2"
import ObservablePage from "../components/obs_page"

export default ({ data }) => (
    ObservablePage(notebook)
)