Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Error on next.js with project with app folder #951

Closed
CarlosBalladares opened this issue May 4, 2023 · 12 comments
Closed

Error on next.js with project with app folder #951

CarlosBalladares opened this issue May 4, 2023 · 12 comments

Comments

@CarlosBalladares
Copy link

Do you want to request a feature or report a bug?
This issue is a bug report

What is the current behavior?
On nextjs new app folder routing that uses server components, the toast causes an error.

If the current behavior is a bug, please provide the steps to reproduce and if possible a minimal demo of the problem. Your bug will get fixed much faster if we can run your code and it doesn't have dependencies other than React. Paste the link to your CodeSandbox (https://codesandbox.io/s/new) example below:

Create a nextjs project with app directory in a page.tsx with "use client" render the toast container. There is an error thrown by nextjs.

Error: Hydration failed because the initial UI does not match what was rendered on the server.

Warning: Expected server HTML to contain a matching <div> in <div>.

See more info here: https://nextjs.org/docs/messages/react-hydration-error


Error: There was an error while hydrating. Because the error happened outside of a Suspense boundary, the entire root will switch to client rendering.

What is the expected behavior?
Compatibility with the nextjs app folder or some option to prevent client rendering the root
Which versions of React, and which browser / OS are affected by this issue? Did this work in previous versions of React?
React 18, MS edge, Windows, Nextjs 13 with app folder
@CarlosBalladares
Copy link
Author

CarlosBalladares commented May 4, 2023 •
edited
Loading

downgrading to v8.0.0 from 9.1.2 seems to resolve the issue

@CarlosBalladares
Copy link
Author

Another way to get rid of the error
dynamic import

import dynamic from 'next/dynamic';

const ToastContainer = dynamic(() => import('react-toastify').then((module) => module.ToastContainer), {
  ssr: false,
});

const Page =()=><ToastContainer/>

or with the "use client" but don't import it directly rather import it in an import.

"use client";
import Toastify from "./Toastify";
const Page =()=><ToastContainer/>

//./Toastify.js

import { ToastContainer } from "react-toastify";

export default function Toastify() {
  return <ToastContainer />;
}

@sheldon-welinga
Copy link

With RSC becoming the common talk in React ecosystem, I think the best solution is for maintainers to add "use client" at the top of each client-side file as advised in React and Next Docs so library users don't have to do this on their end

@fkhadra fkhadra mentioned this issue May 14, 2023
Merged
@fkhadra
Copy link
Owner

fkhadra commented May 14, 2023

Hey @CarlosBalladares it should work out of the box now with the latest release.

@fkhadra fkhadra closed this as completed May 14, 2023
@CarlosBalladares
Copy link
Author

Thanks for resolving this .

@JunkyDeLuxe
Copy link

JunkyDeLuxe commented Jun 1, 2023 •
edited
Loading

Hello guys, can we have a more complete example in order to make it works ?
I am using also nextjs app directory and I can find a way to load the ToastContainer from react-toastify

@Stan-l-e-y
Copy link

Stan-l-e-y commented Jun 2, 2023 •
edited
Loading

Unfortunately, I am still receiving this error. I'm on the latest toastify release and I've tried @CarlosBalladares's methods.

@JunkyDeLuxe
Copy link

JunkyDeLuxe commented Jun 2, 2023 •
edited
Loading

Ok it's working prefectly now (on next13.4, with app directory), and latest stable release of react-toastify library
First of all, create a TaoasterProvider like so:

'use client';

import { Slide, ToastContainer } from 'react-toastify';

interface ToastProviderProps {
	children: React.ReactNode;
}

export default function ToastProvider({ children }: ToastProviderProps) {
	return (
		<>
			{children}
			<ToastContainer transition={Slide} />
		</>
	);
}

Now, in your main layout.tsx file where you are declaring your root component:

export default async function Root({ children, params }: { children: React.ReactNode; params: { lang: string } }) {
	return (
		<html lang={params.lang}>
			<body>
				<ToastProvider>
                                          <Header />
					<Suspense>
						<main>{children}</main>
					</Suspense>
                                          <Footer />
				</ToastProvider>
			</body>
		</html>
	);
}

Now, anywhere in a client component, you can use react-toaster metods like toast()

@Stan-l-e-y
Copy link

Ok it's working prefectly now (on next13.4, with app directory), and latest stable release of react-toastify library First of all, create a TaoasterProvider like so:

'use client';

import { Slide, ToastContainer } from 'react-toastify';

interface ToastProviderProps {
	children: React.ReactNode;
}

export default function ToastProvider({ children }: ToastProviderProps) {
	return (
		<>
			{children}
			<ToastContainer transition={Slide} />
		</>
	);
}

Now, in your main layout.tsx file where you are declaring your root component:

export default async function Root({ children, params }: { children: React.ReactNode; params: { lang: string } }) {
	return (
		<html lang={params.lang}>
			<body>
				<ToastProvider>
                                          <Header />
					<Suspense>
						<main>{children}</main>
					</Suspense>
                                          <Footer />
				</ToastProvider>
			</body>
		</html>
	);
}

Now, anywhere in a client component, you can use react-toaster metods like toast()

This worked for me thanks. I was still getting the error with this solution, what I was doing differently was wrapping the ToastProvider outside the body tag. Once I put it in, the error went away, hope this could help someone in the future

@sheldon-welinga
Copy link

Ok it's working prefectly now (on next13.4, with app directory), and latest stable release of react-toastify library First of all, create a TaoasterProvider like so:

'use client';

import { Slide, ToastContainer } from 'react-toastify';

interface ToastProviderProps {
	children: React.ReactNode;
}

export default function ToastProvider({ children }: ToastProviderProps) {
	return (
		<>
			{children}
			<ToastContainer transition={Slide} />
		</>
	);
}

Now, in your main layout.tsx file where you are declaring your root component:

export default async function Root({ children, params }: { children: React.ReactNode; params: { lang: string } }) {
	return (
		<html lang={params.lang}>
			<body>
				<ToastProvider>
                                          <Header />
					<Suspense>
						<main>{children}</main>
					</Suspense>
                                          <Footer />
				</ToastProvider>
			</body>
		</html>
	);
}

Now, anywhere in a client component, you can use react-toaster metods like toast()

You don't need to add "use client" with the latest release unless your app is tied to other client components

thoomasbro added a commit to MTES-MCT/monitorenv that referenced this issue Jun 9, 2023
@thoomasbro
[Snyk] Upgrade react-toastify from 9.0.7 to 9.1.3 (#585)
6dbf37b 
<p>This PR was automatically created by Snyk using the credentials of a
real user.</p><br /><h3>Snyk has created this PR to upgrade
react-toastify from 9.0.7 to 9.1.3.</h3>

:information_source: Keep your dependencies up-to-date. This makes it
easier to fix existing vulnerabilities and to more quickly identify and
fix newly disclosed vulnerabilities when they affect your project.
<hr/>

- The recommended version is **6 versions** ahead of your current
version.
- The recommended version was released **25 days ago**, on 2023-05-14.


<details>
<summary><b>Release notes</b></summary>
<br/>
  <details>
    <summary>Package name: <b>react-toastify</b></summary>
    <ul>
      <li>
<b>9.1.3</b> - <a
href="https://snyk.io/redirect/github/fkhadra/react-toastify/releases/tag/v9.1.3">2023-05-14</a></br><h1>Release
note</h1>
<ul>
<li>Add support for RSC (next app router): <a class="issue-link
js-issue-link" data-error-text="Failed to load title"
data-id="1695199612" data-permission-text="Title is private"
data-url="fkhadra/react-toastify#951"
data-hovercard-type="issue"
data-hovercard-url="/fkhadra/react-toastify/issues/951/hovercard"
href="https://snyk.io/redirect/github/fkhadra/react-toastify/issues/951">#951</a></li>
<li>Partially address <code>Toast is undefined || Uncaught TypeError:
Cannot read properties of undefined (reading 'content')</code> <a
class="issue-link js-issue-link" data-error-text="Failed to load title"
data-id="1412605274" data-permission-text="Title is private"
data-url="fkhadra/react-toastify#858"
data-hovercard-type="issue"
data-hovercard-url="/fkhadra/react-toastify/issues/858/hovercard"
href="https://snyk.io/redirect/github/fkhadra/react-toastify/issues/858">#858</a>
<a class="issue-link js-issue-link" data-error-text="Failed to load
title" data-id="1696250675" data-permission-text="Title is private"
data-url="fkhadra/react-toastify#952"
data-hovercard-type="issue"
data-hovercard-url="/fkhadra/react-toastify/issues/952/hovercard"
href="https://snyk.io/redirect/github/fkhadra/react-toastify/issues/952">#952</a></li>
<li>Bump dependencies</li>
</ul>
      </li>
      <li>
<b>9.1.2</b> - <a
href="https://snyk.io/redirect/github/fkhadra/react-toastify/releases/tag/v9.1.2">2023-03-21</a></br><h1>Release
notes</h1>
<p>Mainly bug fixes as I'm working on the next major release.</p>
<h2><g-emoji class="g-emoji" alias="spider"
fallback-src="https://github.githubassets.com/images/icons/emoji/unicode/1f577.png">🕷</g-emoji>Bugfixes</h2>
<ul>
<li>fix resetting options <a class="issue-link js-issue-link"
data-error-text="Failed to load title" data-id="1605117353"
data-permission-text="Title is private"
data-url="fkhadra/react-toastify#921"
data-hovercard-type="issue"
data-hovercard-url="/fkhadra/react-toastify/issues/921/hovercard"
href="https://snyk.io/redirect/github/fkhadra/react-toastify/issues/921">#921</a>
<a class="issue-link js-issue-link" data-error-text="Failed to load
title" data-id="1605073557" data-permission-text="Title is private"
data-url="fkhadra/react-toastify#920"
data-hovercard-type="issue"
data-hovercard-url="/fkhadra/react-toastify/issues/920/hovercard"
href="https://snyk.io/redirect/github/fkhadra/react-toastify/issues/920">#920</a></li>
<li>fix autoClose on update <a class="issue-link js-issue-link"
data-error-text="Failed to load title" data-id="1593223965"
data-permission-text="Title is private"
data-url="fkhadra/react-toastify#918"
data-hovercard-type="issue"
data-hovercard-url="/fkhadra/react-toastify/issues/918/hovercard"
href="https://snyk.io/redirect/github/fkhadra/react-toastify/issues/918">#918</a></li>
<li>fix invalid CSS translate <a class="issue-link js-issue-link"
data-error-text="Failed to load title" data-id="1619151175"
data-permission-text="Title is private"
data-url="fkhadra/react-toastify#925"
data-hovercard-type="issue"
data-hovercard-url="/fkhadra/react-toastify/issues/925/hovercard"
href="https://snyk.io/redirect/github/fkhadra/react-toastify/issues/925">#925</a></li>
</ul>
      </li>
      <li>
        <b>9.1.2-rsc</b> - 2023-05-14
      </li>
      <li>
<b>9.1.1</b> - <a
href="https://snyk.io/redirect/github/fkhadra/react-toastify/releases/tag/v9.1.1">2022-11-02</a></br><p>9.1.1</p>
      </li>
      <li>
<b>9.1.0</b> - <a
href="https://snyk.io/redirect/github/fkhadra/react-toastify/releases/tag/v9.1.0">2022-11-01</a></br><h1>Release
notes</h1>
<h2><g-emoji class="g-emoji" alias="rocket"
fallback-src="https://github.githubassets.com/images/icons/emoji/unicode/1f680.png">🚀</g-emoji>
Features</h2>
<ul>
<li><code>toast.promise</code> let you type <code>data</code> for each
state. This is useful when rendering something based on the
response.</li>
</ul>
<p>For example:</p>
<div class="highlight highlight-source-tsx notranslate position-relative
overflow-auto" data-snippet-clipboard-copy-content="interface Success {
  username: string
}

interface Error {
  err: string
}

toast.promise&lt;Success,Error&gt;(myPromise, {
  success: {
    render({ data }) {
      return data.username;
    }
  },
  error: {
    render({ data }) {
      return data.err;
    }
  }
})
"><pre><span class="pl-k">interface</span> <span
class="pl-smi">Success</span> <span class="pl-kos">{</span>
<span class="pl-c1">username</span>: <span class="pl-smi">string</span>
<span class="pl-kos">}</span>

<span class="pl-k">interface</span> <span class="pl-smi">Error</span>
<span class="pl-kos">{</span>
  <span class="pl-c1">err</span>: <span class="pl-smi">string</span>
<span class="pl-kos">}</span>

<span class="pl-s1">toast</span><span class="pl-kos">.</span><span
class="pl-en">promise</span><span class="pl-kos">&lt;</span><span
class="pl-smi">Success</span><span class="pl-kos">,</span><span
class="pl-smi">Error</span><span class="pl-kos">&gt;</span><span
class="pl-kos">(</span><span class="pl-s1">myPromise</span><span
class="pl-kos">,</span> <span class="pl-kos">{</span>
  <span class="pl-c1">success</span>: <span class="pl-kos">{</span>
<span class="pl-en">render</span><span class="pl-kos">(</span><span
class="pl-kos">{</span> data <span class="pl-kos">}</span><span
class="pl-kos">)</span> <span class="pl-kos">{</span>
<span class="pl-k">return</span> <span class="pl-s1">data</span><span
class="pl-kos">.</span><span class="pl-c1">username</span><span
class="pl-kos">;</span>
    <span class="pl-kos">}</span>
  <span class="pl-kos">}</span><span class="pl-kos">,</span>
  <span class="pl-c1">error</span>: <span class="pl-kos">{</span>
<span class="pl-en">render</span><span class="pl-kos">(</span><span
class="pl-kos">{</span> data <span class="pl-kos">}</span><span
class="pl-kos">)</span> <span class="pl-kos">{</span>
<span class="pl-k">return</span> <span class="pl-s1">data</span><span
class="pl-kos">.</span><span class="pl-c1">err</span><span
class="pl-kos">;</span>
    <span class="pl-kos">}</span>
  <span class="pl-kos">}</span>
<span class="pl-kos">}</span><span class="pl-kos">)</span></pre></div>
<ul>
<li><code>toast.update</code> accepts a generic as well to specify the
data type</li>
</ul>
<div class="highlight highlight-source-tsx notranslate position-relative
overflow-auto" data-snippet-clipboard-copy-content="interface TData {
  username: string
}

toast.update&lt;TData&gt;(id, {
  data: payload,
  render({ data }) {
    return `hello ${data.username}`
  }
})"><pre><span class="pl-k">interface</span> <span
class="pl-smi">TData</span> <span class="pl-kos">{</span>
<span class="pl-c1">username</span>: <span class="pl-smi">string</span>
<span class="pl-kos">}</span>

<span class="pl-s1">toast</span><span class="pl-kos">.</span><span
class="pl-en">update</span><span class="pl-kos">&lt;</span><span
class="pl-smi">TData</span><span class="pl-kos">&gt;</span><span
class="pl-kos">(</span><span class="pl-s1">id</span><span
class="pl-kos">,</span> <span class="pl-kos">{</span>
<span class="pl-c1">data</span>: <span class="pl-s1">payload</span><span
class="pl-kos">,</span>
<span class="pl-en">render</span><span class="pl-kos">(</span><span
class="pl-kos">{</span> data <span class="pl-kos">}</span><span
class="pl-kos">)</span> <span class="pl-kos">{</span>
<span class="pl-k">return</span> <span class="pl-s">`hello <span
class="pl-s1"><span class="pl-kos">${</span><span
class="pl-s1">data</span><span class="pl-kos">.</span><span
class="pl-c1">username</span><span
class="pl-kos">}</span></span>`</span>
  <span class="pl-kos">}</span>
<span class="pl-kos">}</span><span class="pl-kos">)</span></pre></div>
<h2><g-emoji class="g-emoji" alias="spider"
fallback-src="https://github.githubassets.com/images/icons/emoji/unicode/1f577.png">🕷</g-emoji>
Bugfixes</h2>
<ul>
<li>fix progress countdown stops on mobile <a class="issue-link
js-issue-link" data-error-text="Failed to load title"
data-id="831649103" data-permission-text="Title is private"
data-url="fkhadra/react-toastify#580"
data-hovercard-type="issue"
data-hovercard-url="/fkhadra/react-toastify/issues/580/hovercard"
href="https://snyk.io/redirect/github/fkhadra/react-toastify/issues/580">#580</a></li>
<li>prevent clash with ios native gesture <a class="issue-link
js-issue-link" data-error-text="Failed to load title"
data-id="511805272" data-permission-text="Title is private"
data-url="fkhadra/react-toastify#397"
data-hovercard-type="issue"
data-hovercard-url="/fkhadra/react-toastify/issues/397/hovercard"
href="https://snyk.io/redirect/github/fkhadra/react-toastify/issues/397">#397</a></li>
<li>fix toast when a word is too long <a class="issue-link
js-issue-link" data-error-text="Failed to load title"
data-id="1425266300" data-permission-text="Title is private"
data-url="fkhadra/react-toastify#864"
data-hovercard-type="pull_request"
data-hovercard-url="/fkhadra/react-toastify/pull/864/hovercard"
href="https://snyk.io/redirect/github/fkhadra/react-toastify/pull/864">#864</a></li>
<li>fix missing types declarations in exports <a class="issue-link
js-issue-link" data-error-text="Failed to load title"
data-id="1384747418" data-permission-text="Title is private"
data-url="fkhadra/react-toastify#843"
data-hovercard-type="issue"
data-hovercard-url="/fkhadra/react-toastify/issues/843/hovercard"
href="https://snyk.io/redirect/github/fkhadra/react-toastify/issues/843">#843</a></li>
<li>fix <code>toast.done</code> not dismissing toast <a
class="issue-link js-issue-link" data-error-text="Failed to load title"
data-id="1403104391" data-permission-text="Title is private"
data-url="fkhadra/react-toastify#853"
data-hovercard-type="issue"
data-hovercard-url="/fkhadra/react-toastify/issues/853/hovercard"
href="https://snyk.io/redirect/github/fkhadra/react-toastify/issues/853">#853</a></li>
<li>fix cursor when close on click is false <a class="issue-link
js-issue-link" data-error-text="Failed to load title"
data-id="1374976459" data-permission-text="Title is private"
data-url="fkhadra/react-toastify#839"
data-hovercard-type="issue"
data-hovercard-url="/fkhadra/react-toastify/issues/839/hovercard"
href="https://snyk.io/redirect/github/fkhadra/react-toastify/issues/839">#839</a></li>
</ul>
<h2><g-emoji class="g-emoji" alias="rotating_light"
fallback-src="https://github.githubassets.com/images/icons/emoji/unicode/1f6a8.png">🚨</g-emoji>
Deprecated API</h2>
<p>Added deprecation notice for the API below. They will be removed in
the next major release</p>
<table>
<thead>
<tr>
<th>API</th>
<th>Why</th>
<th>Alternative</th>
</tr>
</thead>
<tbody>
<tr>
<td><code>onClick</code></td>
<td>Not used that much, it's increasing the API surface for nothing</td>
<td>Can easily be implemented in userland. Just render a react component
and attach the handler to it. <code>toast(&lt;div
onClick={doSomething}&gt;hello&lt;/div&gt;)</code></td>
</tr>
<tr>
<td><code>onOpen</code></td>
<td>Does not play well with <code>useEffect</code> behavior in react18
(runs twice in dev mode) see <a class="issue-link js-issue-link"
data-error-text="Failed to load title" data-id="1205306489"
data-permission-text="Title is private"
data-url="fkhadra/react-toastify#741"
data-hovercard-type="issue"
data-hovercard-url="/fkhadra/react-toastify/issues/741/hovercard"
href="https://snyk.io/redirect/github/fkhadra/react-toastify/issues/741">#741</a></td>
<td>A better approach is to use <code>toast.onChange</code> see <a
href="https://fkhadra.github.io/react-toastify/listen-for-changes/"
rel="nofollow">https://fkhadra.github.io/react-toastify/listen-for-changes/</a></td>
</tr>
<tr>
<td><code>onClose</code></td>
<td>Does not play well with <code>useEffect</code> behavior in react18
(runs twice in dev mode) see <a class="issue-link js-issue-link"
data-error-text="Failed to load title" data-id="1205306489"
data-permission-text="Title is private"
data-url="fkhadra/react-toastify#741"
data-hovercard-type="issue"
data-hovercard-url="/fkhadra/react-toastify/issues/741/hovercard"
href="https://snyk.io/redirect/github/fkhadra/react-toastify/issues/741">#741</a></td>
<td>A better approach is to use <code>toast.onChange</code> see <a
href="https://fkhadra.github.io/react-toastify/listen-for-changes/"
rel="nofollow">https://fkhadra.github.io/react-toastify/listen-for-changes/</a></td>
</tr>
<tr>
<td><code>toast.POSITION</code></td>
<td>Reduce bundle size :)</td>
<td>Thanks to typescript, we now have autocomplete</td>
</tr>
<tr>
<td><code>toast.TYPE</code></td>
<td>Reduce bundle size :)</td>
<td>Thanks to typescript, we now have autocomplete</td>
</tr>
</tbody>
</table>
<h2><g-emoji class="g-emoji" alias="gear"
fallback-src="https://github.githubassets.com/images/icons/emoji/unicode/2699.png">⚙️</g-emoji>
Chore</h2>
<ul>
<li>bump dependencies</li>
<li>refactor internal</li>
</ul>
      </li>
      <li>
<b>9.0.8</b> - <a
href="https://snyk.io/redirect/github/fkhadra/react-toastify/releases/tag/v9.0.8">2022-08-07</a></br><h1>Release
notes</h1>
<h2><g-emoji class="g-emoji" alias="lady_beetle"
fallback-src="https://github.githubassets.com/images/icons/emoji/unicode/1f41e.png">🐞</g-emoji>Bugfixes</h2>
<ul>
<li>fix draggable in strict mode <a class="issue-link js-issue-link"
data-error-text="Failed to load title" data-id="1228656148"
data-permission-text="Title is private"
data-url="fkhadra/react-toastify#752"
data-hovercard-type="issue"
data-hovercard-url="/fkhadra/react-toastify/issues/752/hovercard"
href="https://snyk.io/redirect/github/fkhadra/react-toastify/issues/752">#752</a></li>
<li>fix sass import <a class="issue-link js-issue-link"
data-error-text="Failed to load title" data-id="1255286931"
data-permission-text="Title is private"
data-url="fkhadra/react-toastify#771"
data-hovercard-type="issue"
data-hovercard-url="/fkhadra/react-toastify/issues/771/hovercard"
href="https://snyk.io/redirect/github/fkhadra/react-toastify/issues/771">#771</a></li>
<li>fix progress bar overflow for WebKit browser(safari, ios...) <a
class="issue-link js-issue-link" data-error-text="Failed to load title"
data-id="1299896074" data-permission-text="Title is private"
data-url="fkhadra/react-toastify#791"
data-hovercard-type="issue"
data-hovercard-url="/fkhadra/react-toastify/issues/791/hovercard"
href="https://snyk.io/redirect/github/fkhadra/react-toastify/issues/791">#791</a></li>
<li>fix dismissed toasts while the container is unmounted still appear
when the container is mounted <a class="issue-link js-issue-link"
data-error-text="Failed to load title" data-id="1327813083"
data-permission-text="Title is private"
data-url="fkhadra/react-toastify#811"
data-hovercard-type="issue"
data-hovercard-url="/fkhadra/react-toastify/issues/811/hovercard"
href="https://snyk.io/redirect/github/fkhadra/react-toastify/issues/811">#811</a></li>
<li>fix AutoClose doesn't work on update <a class="issue-link
js-issue-link" data-error-text="Failed to load title"
data-id="1326132465" data-permission-text="Title is private"
data-url="fkhadra/react-toastify#810"
data-hovercard-type="issue"
data-hovercard-url="/fkhadra/react-toastify/issues/810/hovercard"
href="https://snyk.io/redirect/github/fkhadra/react-toastify/issues/810">#810</a>
<a class="issue-link js-issue-link" data-error-text="Failed to load
title" data-id="1282846074" data-permission-text="Title is private"
data-url="fkhadra/react-toastify#782"
data-hovercard-type="issue"
data-hovercard-url="/fkhadra/react-toastify/issues/782/hovercard"
href="https://snyk.io/redirect/github/fkhadra/react-toastify/issues/782">#782</a>
<a class="issue-link js-issue-link" data-error-text="Failed to load
title" data-id="1156837912" data-permission-text="Title is private"
data-url="fkhadra/react-toastify#720"
data-hovercard-type="issue"
data-hovercard-url="/fkhadra/react-toastify/issues/720/hovercard"
href="https://snyk.io/redirect/github/fkhadra/react-toastify/issues/720">#720</a></li>
</ul>
<h2>Chore</h2>
<ul>
<li>master branch renamed to main <g-emoji class="g-emoji"
alias="sparkling_heart"
fallback-src="https://github.githubassets.com/images/icons/emoji/unicode/1f496.png">💖</g-emoji></li>
</ul>
      </li>
      <li>
<b>9.0.7</b> - <a
href="https://snyk.io/redirect/github/fkhadra/react-toastify/releases/tag/v9.0.7">2022-07-19</a></br><h1>Release
note</h1>
<h2>Bugfix</h2>
<ul>
<li>fix memory leak when multiple containers are used <a
class="issue-link js-issue-link" data-error-text="Failed to load title"
data-id="1259604572" data-permission-text="Title is private"
data-url="fkhadra/react-toastify#772"
data-hovercard-type="issue"
data-hovercard-url="/fkhadra/react-toastify/issues/772/hovercard"
href="https://snyk.io/redirect/github/fkhadra/react-toastify/issues/772">#772</a>,
thanks to <a class="user-mention notranslate" data-hovercard-type="user"
data-hovercard-url="/users/roblotter/hovercard"
data-octo-click="hovercard-link-click"
data-octo-dimensions="link_type:self"
href="https://snyk.io/redirect/github/roblotter">@ roblotter</a></li>
</ul>
<h2>Chore</h2>
<ul>
<li>build artifacts are no longer minified. This was causing issues with
some bundlers like vitejs <a class="issue-link js-issue-link"
data-error-text="Failed to load title" data-id="1307006946"
data-permission-text="Title is private"
data-url="fkhadra/react-toastify#797"
data-hovercard-type="issue"
data-hovercard-url="/fkhadra/react-toastify/issues/797/hovercard"
href="https://snyk.io/redirect/github/fkhadra/react-toastify/issues/797">#797</a></li>
</ul>
      </li>
    </ul>
from <a
href="https://snyk.io/redirect/github/fkhadra/react-toastify/releases">react-toastify
GitHub release notes</a>
  </details>
</details>


<details>
  <summary><b>Commit messages</b></summary>
  </br>
  <details>
    <summary>Package name: <b>react-toastify</b></summary>
    <ul>
<li><a
href="https://snyk.io/redirect/github/fkhadra/react-toastify/commit/94a36ff04e1cc8de6b2aa588e207a47ba1188d39">94a36ff</a>
9.1.3</li>
<li><a
href="https://snyk.io/redirect/github/fkhadra/react-toastify/commit/f0e64cc4da0db8385401a47e11eb96c016682f7d">f0e64cc</a>
partial fix #858 #952</li>
<li><a
href="https://snyk.io/redirect/github/fkhadra/react-toastify/commit/74b320ad627d42fed5f6646477daede117db69d2">74b320a</a>
add use client to generated output</li>
<li><a
href="https://snyk.io/redirect/github/fkhadra/react-toastify/commit/0edd49a250248343263b917db3dbc26bd2c2d2b3">0edd49a</a>
bump deps</li>
<li><a
href="https://snyk.io/redirect/github/fkhadra/react-toastify/commit/bbe05c78e430fa0075a297fcf7201c6b8774bf23">bbe05c7</a>
output type first</li>
<li><a
href="https://snyk.io/redirect/github/fkhadra/react-toastify/commit/277deee6a3fc6b709e3a81971adfa2040cf24942">277deee</a>
Update CONTRIBUTING.md</li>
<li><a
href="https://snyk.io/redirect/github/fkhadra/react-toastify/commit/378afe67ea67a08673a1539c20eae358febc39cb">378afe6</a>
Move &#x60;types&#x60; condition to the front of the
&#x60;addons/use-notification-center&#x60; entry</li>
<li><a
href="https://snyk.io/redirect/github/fkhadra/react-toastify/commit/97d9afc48c6e2ef0f6240842700251b8b6e64cd9">97d9afc</a>
update copyright year</li>
<li><a
href="https://snyk.io/redirect/github/fkhadra/react-toastify/commit/321a3455ab74a84a6719335db601e72ecc16c2b0">321a345</a>
9.1.2</li>
<li><a
href="https://snyk.io/redirect/github/fkhadra/react-toastify/commit/12cbc6984d83f1f2c08bdb773442da9c1f0f645d">12cbc69</a>
(chore): change type prop to optional</li>
<li><a
href="https://snyk.io/redirect/github/fkhadra/react-toastify/commit/100044d8e4677ca524a4966afbca3265e53c67bb">100044d</a>
fix invalid translate #925</li>
<li><a
href="https://snyk.io/redirect/github/fkhadra/react-toastify/commit/fb7126ab64c06a7b7dac043f9e30dffd7278c432">fb7126a</a>
fix autoClose doesn&#x27;t work on update #918</li>
<li><a
href="https://snyk.io/redirect/github/fkhadra/react-toastify/commit/11888ce7e5a62743434de216c2be3a68bb7ba8a1">11888ce</a>
fix resetting options #921 #920</li>
<li><a
href="https://snyk.io/redirect/github/fkhadra/react-toastify/commit/eca19e9066c92a9ab102532f85e04aebd9a1e0c7">eca19e9</a>
chore: bump dependencies</li>
<li><a
href="https://snyk.io/redirect/github/fkhadra/react-toastify/commit/eb407af221242df2e39742d5acd0f7a4e7f77872">eb407af</a>
9.1.1</li>
<li><a
href="https://snyk.io/redirect/github/fkhadra/react-toastify/commit/80bf024d2f72fe6ac55a437ae334f3e8393ec59f">80bf024</a>
fix style not applied properly #870</li>
<li><a
href="https://snyk.io/redirect/github/fkhadra/react-toastify/commit/e5074908afaafe78ce609562cfffbd5990897de6">e507490</a>
9.1.0</li>
<li><a
href="https://snyk.io/redirect/github/fkhadra/react-toastify/commit/e8cac357c0ceaf45436d10bc83c71a8ba6225410">e8cac35</a>
allow to specify TData for update</li>
<li><a
href="https://snyk.io/redirect/github/fkhadra/react-toastify/commit/f33823df3342057b60b513aefa0473f07729de3f">f33823d</a>
clean a bit</li>
<li><a
href="https://snyk.io/redirect/github/fkhadra/react-toastify/commit/80fab3c163a9140477d6c4452819da041f58c648">80fab3c</a>
deprecate onClick</li>
<li><a
href="https://snyk.io/redirect/github/fkhadra/react-toastify/commit/3afe7efcb3c8bba8776934ee1ba193d4b1b1ce3b">3afe7ef</a>
remove isNil util</li>
<li><a
href="https://snyk.io/redirect/github/fkhadra/react-toastify/commit/54e397af872ff69476098b4ddd17897c499b53d1">54e397a</a>
remove excessive validation</li>
<li><a
href="https://snyk.io/redirect/github/fkhadra/react-toastify/commit/4952d948ec8647a705ec905074c51e2559f4f77f">4952d94</a>
Revert &quot;alias requestAnimationFrame&quot;</li>
<li><a
href="https://snyk.io/redirect/github/fkhadra/react-toastify/commit/498c1694b9fb0fa74686cdd75f3c02e8b571b426">498c169</a>
shorten declaration</li>
    </ul>

<a
href="https://snyk.io/redirect/github/fkhadra/react-toastify/compare/307e78bdd92151709bfc16de1cfcee91e54dab92...94a36ff04e1cc8de6b2aa588e207a47ba1188d39">Compare</a>
  </details>
</details>
<hr/>

**Note:** *You are seeing this because you or someone else with access
to this repository has authorized Snyk to open upgrade PRs.*

For more information: <img
src="https://api.segment.io/v1/pixel/track?data=eyJ3cml0ZUtleSI6InJyWmxZcEdHY2RyTHZsb0lYd0dUcVg4WkFRTnNCOUEwIiwiYW5vbnltb3VzSWQiOiIxZGI1ZDdkMS1lZDMyLTRiMDUtODRjMC0zOGE1NjRhNzcyNjkiLCJldmVudCI6IlBSIHZpZXdlZCIsInByb3BlcnRpZXMiOnsicHJJZCI6IjFkYjVkN2QxLWVkMzItNGIwNS04NGMwLTM4YTU2NGE3NzI2OSJ9fQ=="
width="0" height="0"/>

🧐 [View latest project
report](https://app.snyk.io/org/mtes-mct/project/afb3e19a-88e3-4a0e-9409-d0f9cfdc75b5?utm_source&#x3D;github&amp;utm_medium&#x3D;referral&amp;page&#x3D;upgrade-pr)

🛠 [Adjust upgrade PR
settings](https://app.snyk.io/org/mtes-mct/project/afb3e19a-88e3-4a0e-9409-d0f9cfdc75b5/settings/integration?utm_source&#x3D;github&amp;utm_medium&#x3D;referral&amp;page&#x3D;upgrade-pr)

🔕 [Ignore this dependency or unsubscribe from future upgrade
PRs](https://app.snyk.io/org/mtes-mct/project/afb3e19a-88e3-4a0e-9409-d0f9cfdc75b5/settings/integration?pkg&#x3D;react-toastify&amp;utm_source&#x3D;github&amp;utm_medium&#x3D;referral&amp;page&#x3D;upgrade-pr#auto-dep-upgrades)

<!---
(snyk:metadata:{"prId":"1db5d7d1-ed32-4b05-84c0-38a564a77269","prPublicId":"1db5d7d1-ed32-4b05-84c0-38a564a77269","dependencies":[{"name":"react-toastify","from":"9.0.7","to":"9.1.3"}],"packageManager":"npm","type":"auto","projectUrl":"https://app.snyk.io/org/mtes-mct/project/afb3e19a-88e3-4a0e-9409-d0f9cfdc75b5?utm_source=github&utm_medium=referral&page=upgrade-pr","projectPublicId":"afb3e19a-88e3-4a0e-9409-d0f9cfdc75b5","env":"prod","prType":"upgrade","vulns":[],"issuesToFix":[],"upgrade":[],"upgradeInfo":{"versionsDiff":6,"publishedDate":"2023-05-14T18:56:17.373Z"},"templateVariants":[],"hasFixes":false,"isMajorUpgrade":false,"isBreakingChange":false,"priorityScoreList":[]})
--->
@PPaivank
Copy link

PPaivank commented Oct 24, 2023 •
edited
Loading

Ok it's working prefectly now (on next13.4, with app directory), and latest stable release of react-toastify library First of all, create a TaoasterProvider like so:

'use client';

import { Slide, ToastContainer } from 'react-toastify';

interface ToastProviderProps {
	children: React.ReactNode;
}

export default function ToastProvider({ children }: ToastProviderProps) {
	return (
		<>
			{children}
			<ToastContainer transition={Slide} />
		</>
	);
}

Now, in your main layout.tsx file where you are declaring your root component:

export default async function Root({ children, params }: { children: React.ReactNode; params: { lang: string } }) {
	return (
		<html lang={params.lang}>
			<body>
				<ToastProvider>
                                          <Header />
					<Suspense>
						<main>{children}</main>
					</Suspense>
                                          <Footer />
				</ToastProvider>
			</body>
		</html>
	);
}

Now, anywhere in a client component, you can use react-toaster metods like toast()

This worked for me thanks. I was still getting the error with this solution, what I was doing differently was wrapping the ToastProvider outside the body tag. Once I put it in, the error went away, hope this could help someone in the future

putting the ToastContainer tag inside the body tag fixed it for me, thank you!!!!

@claide
Copy link

claide commented Mar 5, 2024

Hi, I am currently facing this issue where I added a ToastProvider inside the root layout same with as the suggestions above but, toast won't appear. It only appears when I add a toast container inside the page where I call the showToast function.

I am working on multiple layouts but only one root layout which is basically inside the /src/app directory.

versions
"next": "14.0.1",
"react-toastify": "^10.0.4",

@tobistudio tobistudio mentioned this issue Jul 17, 2024
Merged
This was referenced Jul 28, 2024
Open
Open
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
None yet
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests
7 participants
@fkhadra @JunkyDeLuxe @claide @CarlosBalladares @sheldon-welinga @Stan-l-e-y @PPaivank