Importing a component into the entry React component causes dismount of the whole tree

Hi @inokawa ! First of all wanted to say thank you for this awesome library! It’s quite cool, and very niche and I love it. I encountered one issue tho, maybe it’s a bug, maybe it’s intentional, either way I wanted to ask if you could provide a solution.

Your library works great when my React entry file is a single component, for example:

const Root = () => {
    return <div>Hello</div>
}

export default renderWebView(<Root />)

But the moment I try to import another React component, let’s call it Test.js, the result I get in the RN WebView is a blank page (I assume React dismounts the whole component tree due to some kind of error, although no error listeners on the WebView trigger).

How to replicate: Use the demo app, create another react component called Test.js

const Test = () => {
    return <div>Test</div>
}

Try to import and render Test in our Root entry component like so:

import Test from './Test'
const Root = () => {
    return <div>
        Hello
        <Test />
    </div>
}

export default renderWebView(<Root />)

The result is an empty WebView in RN, without any error! Could you try and think of a solution? I was thinking maybe I should wrap my Test export in renderWebView, but I’m not sure that is the right approach. I appreciate any input on this!

[tk-ni]

@inokawa It works! The issue was the React import indeed. I cleared metro’s cache and build cache and rebuilt. Thanks!

[tk-ni]

Still an empty screen in my env.

//Test.js
import React from 'react';
const Test = () => {
  return <div>Im test</div>;
};
export default Test;

//index.js
import React from 'react';
import {webViewRender} from 'react-native-react-bridge/lib/web';
import Test from './Test';

const Root = () => {
  return (
    <div>
      Hello
      <Test />
    </div>
  );
};

export default webViewRender(<Root />);

The webview onLoad triggers, but still no errors.

//WebView in App.js
<WebView
  ref={ref}
  source={{html: webApp}}
  onMessage={onMessage}
  onError={ev => {
    const {nativeEvent} = ev;
    console.warn('onError: ', ev, nativeEvent);
  }}
  onHttpError={ev => console.warn('onHttpError: ', ev)}
  renderError={errorDomain => console.warn('renderError: ', errorDomain)}
  onLoad={ev => console.log('onLoad:', ev)}
  onLoadingError={ev => console.warn('onLoadingError:', ev)}
  onRenderProcessGone={ev => console.warn('onRenderProcessGone', ev)}
/>