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

[lnahrf]

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!

[inokawa]

Hi @tk-ni ,
could you try to add onError prop to WebView? It would give some logs about the error.
https://github.com/inokawa/react-native-react-bridge#my-webview-displays-a-blank-page

[lnahrf]

Sorry, I did not see that FAQ.
onError, onRenderError, onHttpError gives us nothing, they won't trigger.
Do you want me to create a demoApp fork with the issue?

[inokawa]

It is reproduced in my environment.
This would fix the problem I think.

import React from 'react'

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

[lnahrf]

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)}
/>

[lnahrf]

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