React is not defined when making change

### Description

Ok so this is a bit hard for me to describe as I am not quite sure what is causing this. It might not even be RHL fault but its my only starting point right now. We have a lerna monorepo using yarn workspaces. Right now I have all of my dev dependencies declared in the root of the monorepo package.json. So all of the dev dependencies are hoisted. Its own package.json looks like this:

```json
{
"name": "@whatever/mypackage",
"version": "1.0.0",
"scripts": {
"build": "webpack",
"watch": "webpack --watch",
"start": "webpack-dev-server --hot --inline"
},
"dependencies": {
"@whatever/ui-library": "*",
"react": "^16.8.6",
"react-dom": "^16.8.6",
"@emotion/core": "10.0.10"
}
}
```
The root package.json for the mono repo is as follows:

```json
{
"name": "root",
"private": true,
"scripts": {
"start": "lerna run start --stream",
"storybook": "lerna run storybook --stream",
"build": "lerna run build --stream",
"watch": "lerna run watch --parallel --stream",
},
"workspaces": [
"packages/**"
],
"dependencies": {
"react-router-dom": "4.3.1"
},
"devDependencies": {
"@babel/cli": "^7.4.3",
"@babel/core": "^7.4.3",
"@babel/node": "^7.2.2",
"@babel/plugin-proposal-class-properties": "^7.4.4",
"@babel/plugin-proposal-decorators": "^7.4.4",
"@babel/preset-env": "^7.4.3",
"@babel/preset-react": "^7.0.0",
"@babel/preset-typescript": "^7.3.3",
"@hot-loader/react-dom": "^16.8.6",
"@types/node": "^11.13.0",
"@types/react": "^16.8.13",
"@types/react-dom": "^16.8.4",
"@types/react-router-dom": "^4.3.3",
"@types/storybook__addon-info": "^4.1.1",
"@types/storybook__addon-knobs": "^4.0.5",
"@types/storybook__react": "^4.0.1",
"@types/styled-components": "^4.1.14",
"@types/webfontloader": "^1.6.29",
"babel-loader": "^8.0.5",
"dts-bundle-webpack": "^1.0.2",
"html-webpack-plugin": "^3.2.0",
"lerna": "^3.13.1",
"react-docgen-typescript-loader": "^3.1.0",
"react-hot-loader": "4.8.4",
"ts-loader": "^5.3.3",
"typescript": "^3.4.3",
"webpack": "^4.30.0",
"webpack-cli": "^3.2.3",
"webpack-dev-server": "^3.3.1"
}
}
```

My index.tsx:

```tsx
import * as React from 'react';
import * as ReactDOM from 'react-dom';
import { App } from './App';

ReactDOM.render(
,
document.getElementById('root')
);
```

My App.tsx

```tsx
import { hot } from 'react-hot-loader/root';
import * as React from 'react';
import { Route } from 'react-router-dom';
import { DEFAULT_THEME, Provider } from '@whatever/ui-library';
import { BasePage } from './pages/BasePage/BasePage';

export const App: React.FunctionComponent<{}> = hot(() => {
const theme = DEFAULT_THEME;

return (



);
});
```

BasePage:

```tsx
import * as React from 'react';
import { useProductsFetch, IProductPageResponse, IProductPageRoute } from '../../utils/hooks';
import { Route } from 'react-router-dom';
import { StartPage } from '../StartPage/StartPage';
import { InformationPage } from '../InformationPage/InformationPage';
import { RouteProvider } from '../../contexts/RouteContext';

const getPageComponent = (pageType: string, id: string) => {
return {
['InformationPage']: ,
['StandardProductStartPage']: ,
}[pageType]
}

export const BasePage: React.FunctionComponent = () => {
const location = window.location.pathname;
const routes: { loading: boolean, data: IProductPageResponse } = useProductsFetch(location);

return routes.loading ?

const routeNest = (routes: IProductPageRoute[]) => {
return routes.map(r => {
r.children ? routeNest(r.children) : getPageComponent(r.pageType, r.id)} />
})
}
```

webpackconfig:

```js
const HtmlWebpackPlugin = require('html-webpack-plugin');
const path = require('path');

module.exports = {
entry: ['./src/index.tsx'],
output: {
filename: 'bundle.js',
path: path.resolve(__dirname, 'dist'),
publicPath: '/'
},
devServer: {
publicPath: '/',
contentBase: './dist',
hot: true,
historyApiFallback: {
index: '/'
}
},
mode: 'development',
resolve: {
extensions: ['.tsx', '.ts', '.js'],
// Support hooks with react hot-loader
alias: {
'react-dom': '@hot-loader/react-dom'
}
},
module: {
rules: [
{
test: /\.(ts|tsx)$/,
exclude: '/node_modules/',
use: [
{
loader: 'babel-loader',
options: {
presets: [require.resolve('@babel/preset-react'), require.resolve('@babel/preset-typescript')],
plugins: [
['emotion'],
['@babel/plugin-proposal-decorators', { legacy: true }],
['@babel/plugin-proposal-class-properties', { loose: true }],
'react-hot-loader/babel'
]
}
}
]
}
]
},
plugins: [
new HtmlWebpackPlugin({
title: 'My Page',
template: 'assets/template.html',
favicon: 'assets/favicon.png',
filename: 'index.html'
})
]
};

```

### Expected behavior

Hot reload should work fine

### Actual behavior

When I first boot up the app there are no problems. But on the very first save I get hot update was not succesfful:


### Environment

React Hot Loader version: "4.8.4"
"@hot-loader/react-dom": "^16.8.6",
node

Run these commands in the project folder and fill in their results:

1. `node -v`: 10.15.3
2. `npm -v`: 6.4.1

Then, specify:

1. Operating system: Windows 10
2. Browser and version: Chrome stable

### Reproducible Demo

Don't really know how to make a HRL with monorepo in a sandbox. But Im very willing to try any other way of reproducin this. The repo Im working on is private so I can't share that.