Интеграция приложения React в приложение Wicket/wro4j

Дано:

  1. Простое reactjs-приложение с 3 компонентами, основанное на <div id="reactRoot"></div> и добавляющее глобальную js-функцию:
export default class SelectPanel extends Component {

  constructor( props ){
    super( props )
    window.showLayerSelection = this.loadData
  }

  loadData = () => { doSomeStuff() }
}
  1. Задачи Gradle для запуска npm run-script build и копирования ресурсов в jar-файл
  2. Создайте файл wro.xml, например:
<groups ...>
    <group name="layer-selection">
        <js>classpath:webapp/layer-selection/2.5399c7c7.chunk.js</js>
        <js>classpath:webapp/layer-selection/main.1ea18d69.chunk.js</js>
        <js>classpath:webapp/layer-selection/runtime-main.989054bd.js</js>
    </group>
</groups>
  1. Включите группу в рендер головы:
    @Override
    public void renderHead(final IHeaderResponse response) {
        super.renderHead(response);
        response.render(JavaScriptHeaderItem.forUrl(getApplication().buildWro4JUrl("layer-selection.js")));
    }
  1. добавьте тег <div id="reactRoot"></div> на html-страницу.

Результат:

Когда я открываю страницу, я вижу <script type="text/javascript" src="/somapp/wro/@appVersion@/layer-selection.js"></script> в исходном коде страницы, и этот файл включает в себя 3 файла js из вышеупомянутого wro.xml:

!function(e){function r(r){for(var n,l,i=r[0],a=r[1],f=r[2],p=0,s=[];p<i.length;p++)l=...

(this["webpackJsonplayer-selection"]=this["webpackJsonplayer-selection"]||[]).push([[2],[function(e,t,n){"use s....

(this["webpackJsonplayer-selection"]=this["webpackJsonplayer-selection"]||[]).push([[0],{11:function(e,t,a)...

Проблема в том, что компонент React не отображается, функция showLayerSelection не определена, и я получаю

Минимизированная ошибка React # 200; посетите https://reactjs.org/docs/error-decoder.html?invariant =200

что соответствует

Целевой контейнер не является элементом DOM.

Любые идеи о том, как заставить его работать? Может проблема в упаковке wro4j?

ТИА


person injecteer    schedule 11.03.2020    source источник