1

Given:

  1. Simple reactjs-app with 3 components, based on <div id="reactRoot"></div> and adding a global js-function:
export default class SelectPanel extends Component {

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

  loadData = () => { doSomeStuff() }
}
  1. Gradle tasks to run npm run-script build and copy resources into jar-file
  2. Generate a wro.xml file like:
<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. Include the group into head rendering:
    @Override
    public void renderHead(final IHeaderResponse response) {
        super.renderHead(response);
        response.render(JavaScriptHeaderItem.forUrl(getApplication().buildWro4JUrl("layer-selection.js")));
    }
  1. add the <div id="reactRoot"></div> tag into the html-page.

Result:

When I open the page, I can see the <script type="text/javascript" src="/somapp/wro/@appVersion@/layer-selection.js"></script> in the page's source code, and that file includes 3 js files from abovementioned 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)...

The problem is, that no React component is rendered, the function showLayerSelection is not defined and I'm getting

Minified React error #200; visit https://reactjs.org/docs/error-decoder.html?invariant=200

that corresponds to

Target container is not a DOM element.

Any ideas on how to make it run? Can the problem be in wro4j packaging?

TIA

4

0 回答 0