Inject a React app to another website using react-native-webview

Question

Background: I'm using Expo to develop a React Native app. The purpose is to inject a React app (built code) to run as part of another website using react-native-webview.

Environment: iOS (iPhone 15 Pro simulator)

What I have done so far:

• I could inject some simple JS code like alert('something') and it worked perfectly.
• I could inject a div with some text to the website.

What does not work:

rootElement.innerHTML = renderToString(<div>Hello 123</div>); // does not work
root = createRoot(rootElement); // also does not work

Whenever I injected some react-dom method to the webview, it stopped working (including other alerts added above these lines).

I did try to wrap the problematic code with try catch in order to log the error message but it doesn't work either. It seems to me that whenever react-dom module is bundled into the build, the code stopped working.

My question:

Have you ever run into this situation? How did you solve this? I'll spend some more time to check why it's not working but before going too deep into this, I hope to receive some answers from the community. Thanks!

Answer 1

Actually I could figure it out. Webpack made a separate vendor build (including npm modules) and I didn't include that into the injected code.

I just realized that after comparing the 2 builds: with vs. without having react-dom's methods added.