Having an issue trying to upgrade my stack to React 19

[dep]

There is an error coming back from my build, saying:

Error: A React Element from an older version of React was rendered. This is not supported. It can happen if:
- Multiple copies of the "react" package is used.
- A library pre-bundled an old copy of "react" or "react/jsx-runtime".
- A compiler tries to "inline" JSX instead of using the runtime.

The above error occurred in the <TitanToastProvider> component.

When I open the TitanToastProvider I see my very simple wrapper for notistack 3.0.2:

import { ReactNode } from "react";
import { SnackbarProvider } from "notistack";

function TitanToastProvider({ children }: { children: ReactNode }) {
  return (
    <SnackbarProvider
      maxSnack={3}
      autoHideDuration={5000}
    >
      {children}
    </SnackbarProvider>
  );
}

export { TitanToastProvider };

Commenting out the TitanToastProvider from my app causes it to render just fine. Is there a React 19 compatibility issue that is known?

Expected Behavior

React 19 compat

Current Behavior

Errors

Tech	Version
Notistack	v3.0.2
React	v19

[FelixDeliotte]

Have the same issue
the same version as above

[lizuzsusil]

This is how I achieved custom template

Using the following packages

"next": "15.4.5",
"notistack": "^3.0.2",
"react": "19.1.0",
"react-dom": "19.1.0",

using forwardRef as React 19 is backwards compatible.

//SnackbarTemplate.tsx

import {forwardRef, useCallback} from "react";
import {CustomContentProps, SnackbarContent, useSnackbar} from "notistack";
import Typography from "@mui/material/Typography";
import Card from "@mui/material/Card";
import CardActions from "@mui/material/CardActions";

const variantConfig = {
    success: {
        bg: "#e6f7ed",
        color: "#1a7f37",
    },
    warning: {
        bg: "#fff8e1",
        color: "#b26a00",
    },
//add other variant config
};

const SnackbarTemplate = forwardRef<HTMLDivElement, CustomContentProps>(
    ({id, variant, ...props}, ref) => {
        const {closeSnackbar} = useSnackbar();
        const config = variant && variantConfig[variant as keyof typeof variantConfig];

        const handleDismiss = useCallback(() => {
            closeSnackbar(id);
        }, [id, closeSnackbar]);

        if (!config) return null;

        return (
            <SnackbarContent ref={ref} role="alert">
                <Card sx={{
                    backgroundColor: config.bg,
                    color: config.color,
                    display: "flex",
                    alignItems: "center",
                    p: 1,
                    borderRadius: 2,
                    boxShadow: 2,
                    minWidth: 250,
                }}>
                    <CardActions>
                        <div onClick={handleDismiss}>X</div>
                        <Typography variant="body2">
                            {props.message}
                        </Typography>
                    </CardActions>
                </Card>
            </SnackbarContent>
        );
    }
);

SnackbarTemplate.displayName = "SnackbarTemplate";

export default SnackbarTemplate;

//SnackbarProvider.tsx


import React from "react";
import {
    SnackbarProvider as NotiStackProvider,
} from "notistack";
import SnackbarTemplate from "@/components/SnackbarTemplate";

export const SnackbarProvider: React.FC<
    React.PropsWithChildren<{ maxSnack?: number; autoHideDuration?: number }>
> = ({children, maxSnack = 3, autoHideDuration = 3500}) => {
    return (
        <NotiStackProvider
            maxSnack={maxSnack}
            autoHideDuration={autoHideDuration}
            preventDuplicate
            anchorOrigin={{vertical: "top", horizontal: "right"}}
            Components={{
                success: SnackbarTemplate,
                warning: SnackbarTemplate,
                error: SnackbarTemplate,
                info: SnackbarTemplate,
                //add custom variant if needed,
               // Refer to the documentation  [](https://notistack.com/features/customization) for adding custom variant and Variant Overrides
            }}
        >
            {children}
        </NotiStackProvider>
    );
};

Now importing it to App.tsx or Layout.tsx (NextJs)

//App.tsx or Layout.tsx

'use client';

import {ReactNode} from "react";
import {SnackbarProvider} from "@/providers/SnackbarProvider";

interface AppProps {
    children?: ReactNode;
}

function App(props: AppProps) {
    const {children} = props;

    return (
            <SnackbarProvider>
                {children}
            </SnackbarProvider>
    );
}

export default App;

Now I used it with a custom react hook

//useToast.tsx


import {type OptionsObject, useSnackbar} from "notistack";

export function useToast() {
    const {enqueueSnackbar} = useSnackbar();

    return {
        showSuccess: (message: string, options?: OptionsObject) => enqueueSnackbar(message, {
            ...options,
            variant: "success"
        }),
        showWarning: (message: string, options?: OptionsObject) => enqueueSnackbar(message, {
            ...options,
            variant: "warning"
        }),
        showError: (message: string, options?: OptionsObject) => enqueueSnackbar(message, {
            ...options,
            variant: "error"
        }),
        showInfo: (message: string, options?: OptionsObject) => enqueueSnackbar(message, {...options, variant: "info"}),
    };
}

Usage In Page

import React from "react";
import { Button, Stack } from "@mui/material";
import {useToast} from "@/lib/hooks/useToast";

const Home = () => {
    const {showWarning, showSuccess} = useToast();

    const handleSuccess = () => {
        showSuccess("Show Success", {//pass options if needed});
    };

    const handleWarning = () => {
        showWarning("Show Warning");
    };

  return (
    <Stack spacing={2} direction="row">
      <Button variant="contained" color="success" onClick={handleSuccess}>
        Show Success
      </Button>
      <Button variant="contained" color="warning" onClick={handleWarning}>
        Show Warning
      </Button>
    </Stack>
  );
};

export default Home;