From 1b6abb8b59fc60210fc5b6fb3bb2375a6d1ab132 Mon Sep 17 00:00:00 2001
From: William Grant <willmgrant@gmail.com>
Date: Wed, 15 May 2024 11:40:01 +1000
Subject: [PATCH] feat: restrict importing useMount from react-use directly

it causes app start crashes
---
 .eslintrc.js                                       | 14 ++++++++++++++
 .../message-item/ExpirableReadableMessage.tsx      |  3 ++-
 2 files changed, 16 insertions(+), 1 deletion(-)

diff --git a/.eslintrc.js b/.eslintrc.js
index 071d62c0e..9da3b3656 100644
--- a/.eslintrc.js
+++ b/.eslintrc.js
@@ -122,6 +122,20 @@ module.exports = {
         ignoreRegExpLiterals: true,
       },
     ],
+    'no-restricted-imports': [
+      'error',
+      {
+        paths: [
+          // There is an issue with the current version of react-use where it requires an arbitrary 'Locale' package on the window object which causes random app crashes on startup in some cases
+          {
+            name: 'react-use',
+            importNames: ['useMount'],
+            message:
+              "Don't import it from 'react-use' directly. Please use a default import from 'react-use/lib/useMount' instead.",
+          },
+        ],
+      },
+    ],
   },
   overrides: [
     {
diff --git a/ts/components/conversation/message/message-item/ExpirableReadableMessage.tsx b/ts/components/conversation/message/message-item/ExpirableReadableMessage.tsx
index 2eeab699b..cf92e9474 100644
--- a/ts/components/conversation/message/message-item/ExpirableReadableMessage.tsx
+++ b/ts/components/conversation/message/message-item/ExpirableReadableMessage.tsx
@@ -1,6 +1,7 @@
 import { useCallback, useState } from 'react';
 import { useDispatch } from 'react-redux';
-import { useInterval, useMount } from 'react-use';
+import { useInterval } from 'react-use';
+import useMount from 'react-use/lib/useMount';
 import styled from 'styled-components';
 import { useIsDetailMessageView } from '../../../../contexts/isDetailViewContext';
 import { Data } from '../../../../data/data';