showNotification not working when called directly from useEffect

[mlarcher]

What package has an issue

@mantine/notifications

Describe the bug

when calling showNotification() from within a useEffect to trigger a notification according to some conditions, we get an error and no notification is shown :

Warning: A component is changing an uncontrolled input to be controlled. This is likely caused by the value changing from undefined to a defined value, which should not happen. Decide between using a controlled or uncontrolled input element for the lifetime of the component. More info: https://reactjs.org/link/controlled-components
    at input
    at div
    at eval (webpack-internal:///./node_modules/@mantine/core/esm/components/Box/Box.js:42:18)
    at commitMutationEffectsOnFiber (webpack-internal:///./node_modules/react-dom/cjs/react-dom.development.js:24186:9)
    at div
    at eval (webpack-internal:///./node_modules/@mantine/core/esm/components/Box/Box.js:42:18)
    at commitMutationEffectsOnFiber (webpack-internal:///./node_modules/react-dom/cjs/react-dom.development.js:24186:9)
    at commitMutationEffectsOnFiber (webpack-internal:///./node_modules/react-dom/cjs/react-dom.development.js:24186:9)
    at div
    at form
    at FormWithLoader (webpack-internal:///./components/FormWithLoader.js:66:30)
    at div
    at eval (webpack-internal:///./node_modules/@mantine/core/esm/components/Box/Box.js:42:18)
    at commitMutationEffectsOnFiber (webpack-internal:///./node_modules/react-dom/cjs/react-dom.development.js:24186:9)
    at main
    at div
    at div
    at eval (webpack-internal:///./node_modules/@mantine/core/esm/components/Box/Box.js:42:18)
    at commitMutationEffectsOnFiber (webpack-internal:///./node_modules/react-dom/cjs/react-dom.development.js:24186:9)
    at Layout (webpack-internal:///./components/Layout.js:13:29)
    at TalentLayout (webpack-internal:///./components/UnidentifiedLayout.js:19:26)
    at Login (webpack-internal:///./pages/login.js:188:69)
    at AuthProvider (webpack-internal:///./components/AuthProvider.js:20:26)
    at RunModeFront (webpack-internal:///./components/RunModeFront.js:11:26)
    at NotificationsProvider (webpack-internal:///./node_modules/@mantine/notifications/esm/NotificationsProvider/NotificationsProvider.js:67:5)
    at Fe (webpack-internal:///./node_modules/styled-components/dist/styled-components.browser.esm.js:31:17360)
    at MantineProvider (webpack-internal:///./node_modules/@mantine/core/node_modules/@mantine/styles/esm/theme/MantineProvider.js:66:3)
    at ApolloProvider (webpack-internal:///./node_modules/@apollo/client/react/context/ApolloProvider.js:12:21)
    at ErrorBoundary (webpack-internal:///./components/ErrorBoundary.js:113:9)
    at App (webpack-internal:///./pages/_app.js:92:27)
    at commitMutationEffectsOnFiber (webpack-internal:///./node_modules/react-dom/cjs/react-dom.development.js:24186:9)
    at ReactDevOverlay (webpack-internal:///./node_modules/next/dist/compiled/@next/react-dev-overlay/client.js:8:23179)
    at Container (webpack-internal:///./node_modules/next/dist/client/index.js:323:9)
    at AppContainer (webpack-internal:///./node_modules/next/dist/client/index.js:825:26)
    at Root (webpack-internal:///./node_modules/next/dist/client/index.js:949:27)

calling code:

useEffect(() => {
    if (targetPath) {
      showNotification({
        title: 'Default notification',
        message: 'Hey there, your code is awesome! 🤥',
        styles: (theme) => ({
          root: {
            backgroundColor: theme.colors.blue[6],
            borderColor: theme.colors.blue[6],

            '&::before': { backgroundColor: theme.white },
          },

          title: { color: theme.white },
          description: { color: theme.white },
          closeButton: {
            color: theme.white,
            '&:hover': { backgroundColor: theme.colors.blue[7] },
          },
        }),
      });
    }
  }, [targetPath]);

a simple timeout is enough to make it work, i.e.

  useEffect(() => {
    if (targetPath) {
      setTimeout(
        () =>
          showNotification({
            title: 'Default notification',
            message: 'Hey there, your code is awesome! 🤥',
            styles: (theme) => ({
              root: {
                backgroundColor: theme.colors.blue[6],
                borderColor: theme.colors.blue[6],

                '&::before': { backgroundColor: theme.white },
              },

              title: { color: theme.white },
              description: { color: theme.white },
              closeButton: {
                color: theme.white,
                '&:hover': { backgroundColor: theme.colors.blue[7] },
              },
            }),
          }),
        1,
      );
    }
  }, [targetPath]);

In which browser did the problem occur

chrome

If possible, please include a link to a codesandbox with the reproduced problem

No response

Do you know how to fix the issue

No response

Are you willing to participate in fixing this issue and create a pull request with the fix

No response

Possible fix

No response

[mlarcher]

actually, the error message still appears when using timeout, but the notification shows anyhow

[rtivital]

The error message is not related to notification. To show notification on application mount with current implementation, you need to set timeout.

[mlarcher]

thanks for the quick reply 👍 Maybe that should be stated somewhere in the docs then

[mlarcher]

Actually, the error comes from declaring an empty object as initialProps instead of empty values for all fields. I assume v5.0 has it covered as per https://github.com/mantinedev/mantine/issues/1623 but it's worth mentioning

[wes337]

@mlarcher, Instead of using a timeout inside a useEffect, try using useLayoutEffect

[mlarcher]

@wes337 sounded like a good idea, but unfortunately it does not work

[rtivital]

Fixed in 5.1.3