Fix "Deprecated findDOMNode" warning in StrictMode

Closes #4577
marmelab · Jun 28, 2021 · 258e56f · 258e56f
1 parent 2db9ad5
commit 258e56f
Show file tree

Hide file tree

Showing 7 changed files with 50 additions and 33 deletions.
diff --git a/examples/simple/src/index.tsx b/examples/simple/src/index.tsx
@@ -16,31 +16,33 @@ import users from './users';
 import tags from './tags';
 
 render(
-    <Admin
-        authProvider={authProvider}
-        dataProvider={dataProvider}
-        i18nProvider={i18nProvider}
-        title="Example Admin"
-        layout={Layout}
-        customRoutes={[
-            <RouteWithoutLayout
-                exact
-                path="/custom"
-                component={props => <CustomRouteNoLayout {...props} />}
-            />,
-            <Route
-                exact
-                path="/custom2"
-                component={props => <CustomRouteLayout {...props} />}
-            />,
-        ]}
-    >
-        {permissions => [
-            <Resource name="posts" {...posts} />,
-            <Resource name="comments" {...comments} />,
-            permissions ? <Resource name="users" {...users} /> : null,
-            <Resource name="tags" {...tags} />,
-        ]}
-    </Admin>,
+    <React.StrictMode>
+        <Admin
+            authProvider={authProvider}
+            dataProvider={dataProvider}
+            i18nProvider={i18nProvider}
+            title="Example Admin"
+            layout={Layout}
+            customRoutes={[
+                <RouteWithoutLayout
+                    exact
+                    path="/custom"
+                    component={props => <CustomRouteNoLayout {...props} />}
+                />,
+                <Route
+                    exact
+                    path="/custom2"
+                    component={props => <CustomRouteLayout {...props} />}
+                />,
+            ]}
+        >
+            {permissions => [
+                <Resource name="posts" {...posts} />,
+                <Resource name="comments" {...comments} />,
+                permissions ? <Resource name="users" {...users} /> : null,
+                <Resource name="tags" {...tags} />,
+            ]}
+        </Admin>
+    </React.StrictMode>,
     document.getElementById('root')
 );
diff --git a/examples/simple/vite.config.js b/examples/simple/vite.config.js
@@ -35,4 +35,5 @@ export default {
     server: {
         port: 8080,
     },
+    define: { 'process.env': {} },
 };
diff --git a/packages/ra-ui-materialui/src/auth/Login.tsx b/packages/ra-ui-materialui/src/auth/Login.tsx
@@ -10,14 +10,15 @@ import React, {
 import PropTypes from 'prop-types';
 import classnames from 'classnames';
 import { Card, Avatar, Theme } from '@material-ui/core';
-import { createMuiTheme, makeStyles } from '@material-ui/core/styles';
+import { makeStyles } from '@material-ui/core/styles';
 import { ThemeProvider } from '@material-ui/styles';
 import LockIcon from '@material-ui/icons/Lock';
 import { StaticContext } from 'react-router';
 import { useHistory } from 'react-router-dom';
 import { useCheckAuth, TitleComponent } from 'ra-core';
 
 import defaultTheme from '../defaultTheme';
+import { createMuiTheme } from '../layout';
 import DefaultNotification from '../layout/Notification';
 import DefaultLoginForm from './LoginForm';
 

diff --git a/packages/ra-ui-materialui/src/layout/Layout.tsx b/packages/ra-ui-materialui/src/layout/Layout.tsx
@@ -13,11 +13,7 @@ import PropTypes from 'prop-types';
 import { connect } from 'react-redux';
 import classnames from 'classnames';
 import { RouteComponentProps, withRouter } from 'react-router-dom';
-import {
-    createMuiTheme,
-    withStyles,
-    createStyles,
-} from '@material-ui/core/styles';
+import { withStyles, createStyles } from '@material-ui/core/styles';
 import { ThemeProvider } from '@material-ui/styles';
 import { ThemeOptions } from '@material-ui/core';
 import { ComponentPropType, CoreLayoutProps } from 'ra-core';
@@ -30,6 +26,7 @@ import DefaultNotification from './Notification';
 import DefaultError from './Error';
 import defaultTheme from '../defaultTheme';
 import SkipNavigationButton from '../button/SkipNavigationButton';
+import { createMuiTheme } from './createMuiTheme';
 
 const styles = theme =>
     createStyles({

diff --git a/packages/ra-ui-materialui/src/layout/LoadingPage.tsx b/packages/ra-ui-materialui/src/layout/LoadingPage.tsx
@@ -1,7 +1,8 @@
 import * as React from 'react';
 import PropTypes from 'prop-types';
 import { ThemeProvider } from '@material-ui/styles';
-import { createMuiTheme } from '@material-ui/core/styles';
+
+import { createMuiTheme } from './createMuiTheme';
 import Loading from './Loading';
 
 const LoadingPage = ({ theme, ...props }) => (

diff --git a/packages/ra-ui-materialui/src/layout/createMuiTheme.ts b/packages/ra-ui-materialui/src/layout/createMuiTheme.ts
@@ -0,0 +1,14 @@
+import {
+    createMuiTheme as createLegacyModeTheme,
+    unstable_createMuiStrictModeTheme as createStrictModeTheme,
+} from '@material-ui/core/styles';
+
+/**
+ * Alternative to MUI's createMuiTheme that doesn't log findDomNode warnings in StrictMode
+ *
+ * @see https://github.com/mui-org/material-ui/issues/13394
+ */
+export const createMuiTheme =
+    process.env.NODE_END === 'production'
+        ? createLegacyModeTheme
+        : createStrictModeTheme;
diff --git a/packages/ra-ui-materialui/src/layout/index.ts b/packages/ra-ui-materialui/src/layout/index.ts
@@ -21,6 +21,7 @@ import Title, { TitleProps, TitlePropType } from './Title';
 import TitleForRecord from './TitleForRecord';
 import TopToolbar from './TopToolbar';
 import UserMenu, { UserMenuProps } from './UserMenu';
+export * from './createMuiTheme';
 
 export {
     AppBar,