Добавить HTML с шаблоном шаблона на страницу Docusaurus (React)

Question

Мне нужно добавить пользовательский HTML, содержащий шаблонный скрипт, на сайт Docusaurus (построенный на React), но у сайта нет файлов.html - только файлы.js, которые затем компилируются для создания статического сайта. В частности, мне нужно добавить файл.html, который имеет <script type="text/template"></script> блок, что означает, что я не могу просто отобразить его с React/JSX, как обычные элементы HTML.

Вот моя попытка сделать это до сих пор, в результате чего на странице отображается буквальная строка с содержимым моего <script type="text/template"></script> блок:

Footer.js

const React = require('react');

// for instantsearch
const fs = require('fs'); //Filesystem  
const resultsTemplate = fs.readFileSync(`${process.cwd()}/static/resultsTemplate.html`,"utf-8");

class Footer extends React.Component {
  ...
  render () {
    return (
      <footer className='nav-footer' id='footer'>
        ...

        {resultsTemplate}

      </footer>
    );
  }
}

module.exports = Footer;

Если я не использую fs и просто установить

const resultsTemplate = require(`${process.cwd()}/static/resultsTemplate.html`);

Я получаю следующую ошибку при запуске npm start:

(function (exports, require, module, __filename, __dirname) { <script type="text/template" id="results-template">
                                                              ^

SyntaxError: Unexpected token <

Вот почему я использую fs,

Это resultsTemplate.html, который я хочу ввести в нижний колонтитул:

<script type="text/template" id="results-template">
  <div class="ais-result">
    {{#hierarchy.lvl0}}
    <div class="ais-lvl0">
      {{{_highlightResult.hierarchy.lvl0.value}}}
    </div>
    {{/hierarchy.lvl0}}

    <div class="ais-lvl1">
      {{#hierarchy.lvl1}} 
        {{{_highlightResult.hierarchy.lvl1.value}}} 
            {{/hierarchy.lvl1}} 
        {{#hierarchy.lvl2}} > 
     ...
    </div>
    <div class="ais-content">
        {{{#content}}} 
            {{{_highlightResult.content.value}}} 
        {{{/content}}}
    </div>
  </div>
</script>

Наконец, вот функция, которая должна заполнять шаблон правильными значениями (взяты из Алголии):

  mainSearch.addWidget(
    instantsearch.widgets.hits({
      container: '#search-hits',
      templates: {
        empty: 'No results',
        item: $('#results-template').html()
      },
      hitsPerPage: 10
    })
  );

Для большего контекста я пытаюсь реализовать эту функцию на моем сайте: https://jsfiddle.net/965a4w3o/4/

Answer 1

В итоге я нашел собственное решение, во многом благодаря принятому на этот вопрос ответу Джанниса Далласа: добавьте необработанный HTML с