Override react-is@19.0.0 for recharts compatibility (#4857)

See https://github.com/recharts/recharts/issues/4558 for details.

pyproject.toml

@@ -1,6 +1,6 @@
 [tool.poetry]
 name = "reflex"
-version = "0.7.1a2"
+version = "0.7.2dev1"
 description = "Web apps in pure Python."
 license = "Apache-2.0"
 authors = [

reflex/.templates/jinja/web/package.json.jinja2

@@ -15,7 +15,13 @@
   "devDependencies": {
     {% for package, version in dev_dependencies.items() %}
     "{{ package }}": "{{ version }}"{% if not loop.last %},{% endif %}
-    
+
+    {% endfor %}
+  },
+  "overrides": {
+    {% for package, version in overrides.items() %}
+    "{{ package }}": "{{ version }}"{% if not loop.last %},{% endif %}
+
     {% endfor %}
   }
 }

reflex/.templates/jinja/web/utils/context.js.jinja2

@@ -78,9 +78,9 @@ export function UploadFilesProvider({ children }) {
     return newFilesById
   })
   return (
-    <UploadFilesContext.Provider value={[filesById, setFilesById]}>
+    <UploadFilesContext value={[filesById, setFilesById]}>
       {children}
-    </UploadFilesContext.Provider>
+    </UploadFilesContext>
   )
 }
 
@@ -92,9 +92,9 @@ export function EventLoopProvider({ children }) {
     clientStorage,
   )
   return (
-    <EventLoopContext.Provider value={[addEvents, connectErrors]}>
+    <EventLoopContext value={[addEvents, connectErrors]}>
       {children}
-    </EventLoopContext.Provider>
+    </EventLoopContext>
   )
 }
 
@@ -112,13 +112,13 @@ export function StateProvider({ children }) {
 
   return (
     {% for state_name in initial_state %}
-    <StateContexts.{{state_name|var_name}}.Provider value={ {{state_name|var_name}} }>
+    <StateContexts.{{state_name|var_name}} value={ {{state_name|var_name}} }>
     {% endfor %}
-      <DispatchContext.Provider value={dispatchers}>
+      <DispatchContext value={dispatchers}>
         {children}
-      </DispatchContext.Provider>
+      </DispatchContext>
     {% for state_name in initial_state|reverse %}
-    </StateContexts.{{state_name|var_name}}.Provider>
+    </StateContexts.{{state_name|var_name}}>
     {% endfor %}
   )
 }

reflex/.templates/web/components/reflex/radix_themes_color_mode_provider.js

@@ -36,17 +36,17 @@ export default function RadixThemesColorModeProvider({ children }) {
     const allowedModes = ["light", "dark", "system"];
     if (!allowedModes.includes(mode)) {
       console.error(
-        `Invalid color mode "${mode}". Defaulting to "${defaultColorMode}".`
+        `Invalid color mode "${mode}". Defaulting to "${defaultColorMode}".`,
       );
       mode = defaultColorMode;
     }
     setTheme(mode);
   };
   return (
-    <ColorModeContext.Provider
+    <ColorModeContext
       value={{ rawColorMode, resolvedColorMode, toggleColorMode, setColorMode }}
     >
       {children}
-    </ColorModeContext.Provider>
+    </ColorModeContext>
   );
 }

reflex/components/core/auto_scroll.py

@@ -11,7 +11,9 @@ from reflex.vars.base import Var, get_unique_variable_name
 class AutoScroll(Div):
     """A div that automatically scrolls to the bottom when new content is added."""
 
-    _memoization_mode = MemoizationMode(disposition=MemoizationDisposition.ALWAYS)
+    _memoization_mode = MemoizationMode(
+        disposition=MemoizationDisposition.ALWAYS, recursive=False
+    )
 
     @classmethod
     def create(cls, *children, **props):
@@ -44,7 +46,6 @@ class AutoScroll(Div):
         """
         ref_name = self.get_ref()
         return [
-            "const containerRef = useRef(null);",
             "const wasNearBottom = useRef(false);",
             "const hadScrollbar = useRef(false);",
             f"""
@@ -85,6 +86,8 @@ useEffect(() => {{
     const container = {ref_name}.current;
     if (!container) return;
 
+    scrollToBottomIfNeeded();
+
     // Create ResizeObserver to detect height changes
     const resizeObserver = new ResizeObserver(() => {{
         scrollToBottomIfNeeded();

reflex/constants/installer.py

@@ -195,3 +195,7 @@ class PackageJson(SimpleNamespace):
         "postcss": "8.5.1",
         "postcss-import": "16.1.0",
     }
+    OVERRIDES = {
+        # This should always match the `react` version in DEPENDENCIES for recharts compatibility.
+        "react-is": "19.0.0"
+    }

reflex/utils/prerequisites.py

@@ -846,6 +846,7 @@ def _compile_package_json():
         },
         dependencies=constants.PackageJson.DEPENDENCIES,
         dev_dependencies=constants.PackageJson.DEV_DEPENDENCIES,
+        overrides=constants.PackageJson.OVERRIDES,
     )