🐛 Répare le hot reload

package.json

@@ -193,7 +193,7 @@
 		"prettier": "^1.19.1",
 		"ramda-fantasy": "^0.8.0",
 		"raw-loader": "^0.5.1",
-		"react-hot-loader": "^4.12.15",
+		"react-hot-loader": "^4.12.21",
 		"serve": "^11.1.0",
 		"serve-handler": "^6.1.1",
 		"sinon": "^4.5.0",

source/Provider.tsx

@@ -64,7 +64,6 @@ export default function Provider({
 	onStoreCreated,
 	children
 }: ProviderProps) {
-	const { language } = useTranslation().i18n as { language: AvailableLangs }
 	const history = useMemo(
 		() =>
 			createBrowserHistory({
@@ -90,7 +89,10 @@ export default function Provider({
 		)
 	)
 
-	const store = createStore(reducers, initialStore, storeEnhancer)
+	// Hack: useMemo is used to persist the store across hot reloads.
+	const store = useMemo(() => {
+		return createStore(reducers, initialStore, storeEnhancer)
+	}, [])
 	onStoreCreated?.(store)
 
 	// Remove loader

source/sites/mon-entreprise.fr/App.tsx

@@ -13,7 +13,7 @@ import { useTranslation } from 'react-i18next'
 import { useSelector } from 'react-redux'
 import { Route, Switch } from 'react-router-dom'
 import createSentryMiddleware from 'redux-sentry-middleware'
-import rulesFr, { Rules } from 'Rules'
+import { Rules } from 'Rules'
 import {
 	configSituationSelector,
 	situationSelector
@@ -84,14 +84,10 @@ type RootProps = {
 	rules: Rules
 }
 
-function Root({ basename, rules }: RootProps) {
+export default function Root({ basename, rules }: RootProps) {
 	const { language } = useTranslation().i18n
-	// Hot reload rules
-	if (process.env.NODE_ENV !== 'production' && language === 'fr') {
-		rules = rulesFr
-	}
-
 	const paths = constructLocalizedSitePath(language as AvailableLangs)
+
 	return (
 		<Provider
 			basename={basename}
@@ -182,12 +178,3 @@ const App = () => {
 		</div>
 	)
 }
-
-let ExportedApp = Root
-
-if (process.env.NODE_ENV !== 'production') {
-	const { hot } = require('react-hot-loader')
-	ExportedApp = hot(module)(Root)
-}
-
-export default ExportedApp

source/sites/mon-entreprise.fr/entry.en.tsx

@@ -1,4 +1,5 @@
 import 'core-js/stable'
+import 'react-hot-loader'
 import { translateRules } from 'Engine'
 import React from 'react'
 import { render } from 'react-dom'
@@ -12,11 +13,17 @@ import App from './App'
 i18next.addResourceBundle('en', 'translation', translations)
 i18next.changeLanguage('en')
 
-let anchor = document.querySelector('#js')
-render(
+let Root = () => (
 	<App
 		basename="infrance"
 		rules={translateRules('en', ruleTranslations, rules)}
-	/>,
-	anchor
+	/>
 )
+
+if (process.env.NODE_ENV !== 'production') {
+	const { hot } = require('react-hot-loader/root')
+	Root = hot(Root)
+}
+
+const anchor = document.querySelector('#js')
+render(<Root />, anchor)

source/sites/mon-entreprise.fr/entry.fr.tsx

@@ -1,4 +1,5 @@
 import 'core-js/stable'
+import 'react-hot-loader'
 import React from 'react'
 import { render } from 'react-dom'
 import 'regenerator-runtime/runtime'
@@ -8,5 +9,12 @@ import i18next from '../../i18n'
 
 i18next.changeLanguage('fr')
 
-let anchor = document.querySelector('#js')
-render(<App basename="mon-entreprise" rules={rules} />, anchor)
+let Root = () => <App basename="mon-entreprise" rules={rules} />
+
+if (process.env.NODE_ENV !== 'production') {
+	const { hot } = require('react-hot-loader/root')
+	Root = hot(Root)
+}
+
+const anchor = document.querySelector('#js')
+render(<Root />, anchor)

yarn.lock

@@ -9674,10 +9674,10 @@ react-helmet@^6.0.0:
     react-fast-compare "^2.0.4"
     react-side-effect "^2.1.0"
 
-react-hot-loader@^4.12.15:
-  version "4.12.20"
-  resolved "https://registry.yarnpkg.com/react-hot-loader/-/react-hot-loader-4.12.20.tgz#c2c42362a7578e5c30357a5ff7afa680aa0bef8a"
-  integrity sha512-lPlv1HVizi0lsi+UFACBJaydtRYILWkfHAC/lyCs6ZlAxlOZRQIfYHDqiGaRvL/GF7zyti+Qn9XpnDAUvdFA4A==
+react-hot-loader@^4.12.21:
+  version "4.12.21"
+  resolved "https://registry.yarnpkg.com/react-hot-loader/-/react-hot-loader-4.12.21.tgz#332e830801fb33024b5a147d6b13417f491eb975"
+  integrity sha512-Ynxa6ROfWUeKWsTHxsrL2KMzujxJVPjs385lmB2t5cHUxdoRPGind9F00tOkdc1l5WBleOF4XEAMILY1KPIIDA==
   dependencies:
     fast-levenshtein "^2.0.6"
     global "^4.3.0"