Ошибка разбора HTML с кодом реагирования в DOM - PullRequest
Новая
       8

Ошибка разбора HTML с кодом реагирования в DOM

0 голосов
/ 04 января 2019

Мы создали внутренний загрузчик Webpack для манипулирования / внедрения некоторого общего HTML-кода в index.html другого проекта.

Ниже приведен пример HTML-шаблона React - 

let source = `<html>
  <body>
     <div id="root">
        <%- reactServerSideRender %>
     <div>
  </body>
</html>`;

Ниже приведен код с использованием Cheerio. 

import * as $ from 'cheerio';
console.log('After cheerio', source);
let $source = $.load(source);
console.log('After cheerio', $source);

Ожидаемый результат - 

<html>
  <body>
     <div id="root">
        <%- reactServerSideRender %>
     <div>
  </body>
</html>

Фактический результат 

<html>
  <body>
     <div id="root">
        <%- reactserversiderender="" %="">
        </%->
     <div>
  </body>
</html>

Любая помощь или предложения о том, как решить эту проблему?

Обновление 1/7/19: мне удалось отследить проблему до https://github.com/cheeriojs/dom-serializer/blob/master/index.js#L82

Для моего кода выше он распознается как TAG (я записал ниже значения из переменной elem. 

element type      - tag
element attribute - { reactserversiderender: '', '%': '' }
element name      - %-

Эта проблема была связана с тем, что модуль htmlparser2, используемый cheerio, неправильно анализировал html.

РЕШЕНИЕ: я смог решить проблему после использования модуля parse5 (Cheerio также планирует сделать parse5 по умолчанию для проекта, но он еще не выпущен). Ниже приведены дополнительные строки кода, которые я должен был добавить, чтобы он работал. 

const document = parse5.parse(source);
const str = parse5.serialize(document);
const $source = $.load(str);
...