Bug:

[Ramsy12]

I have used one react component, in another one, via Dependency-injection. This causes the Hook to not work, because there are 2 React instances loaded. What can I do?

React version:
"react": "^16.13.1",
"react-dom": "^16.13.1",

Steps To Reproduce

1. Write 2 Components as Libraries. Once exports a MountApp-function, and the other a GetInstance-funciton.
2. In the main html include both libraries and write something like:

	<script type="text/javascript">
		(function () {
			App2.MountApp({
				rootElement: document.getElementById("IrrigationReportPerField"),
				dependency: App2  // Here it is the dependency injection.
			});
	</script>

3. In the App2 you have something like this:

import React, { useState } from 'react';

function App() {
	const [lala, setLala] = useState({});    // Here it fails!
	return <div>{whatever}</div>;
}

export default App;

import React from 'react';
import App from './App';

function GetInstance() {
return (
		<React.StrictMode>
			<App />
		</React.StrictMode>
	);
}

4. In the App1 you have

import React from 'react';

function App({ App2}) {
	const myTableContainer = App2.GetInstance();

	return <div>{myTableContainer}</div>;
}

export default App;

import React from 'react';
import ReactDOM from 'react-dom';
import App from './App';

function MountApp({ rootElement, App2}) {
	ReactDOM.render(
		<React.StrictMode>
			<App App2={App2} />
		</React.StrictMode>,
		rootElement
	);
}

export { MountApp };

The current behavior

Error sending me to https://reactjs.org/docs/error-decoder.html/?invariant=321 - which is correct. There are two instances loaded.

The expected behavior

I would like a way to use one App from the other, just like any external package.

[eps1lon]

You can check out #13991 to explore possible solutions.