setToast: Toast is never displayed

[Throvn]

Bug report 🐞

Version & Environment

• Version of browser: Firefox 109 but also tested in Chrome, Mac
• Version of geist-ui/core: ^2.3.8

Expected Behaviour

The behavior I expect is that when I execute the following snippet, a toast will show up somewhere on the webpage:

import './App.css';
import { Button, useToasts } from '@geist-ui/core';

function App() {
  const { setToast } = useToasts()

  return (
    <Button onClick={() => setToast({ text: "Hello" })}>
      Hello</Button>
  );
}
export default App;

Actual results (or Errors)

Nothing is happening at all. When I check the inspector, the DOM is never modified. No errors are thrown either. I tried to produce a minimal reproducable example. For me Toasts do not get displayed at all. Not even in a fresh cra project.

[dogdogbrother]

I also encountered this problem, in nextjs.

[Throvn]

After further investigation, I noticed that the updateToasts() inside of use-toasts.tsx does not call the callback when using the bundled esm npm version.

[Throvn]

After migrating to Next.js, toasts are working flawlessly! (For me, at least) So this has to be some underlying issue, unfortunately I could not figure out how to solve it for client side react.

@dogdogbrother did you set up a new next.js project or did you migrate a CRA project?

[rayli09]

having the same issue here. toasts won't show up in nextjs

[rayli09]

I have a new nextjs project, and the toasts are not showing up

[rayli09]

@Throvn could you provide any hints on how to resolve it?

[Throvn]

After I migrated from my CRA project, Toasts suddenly started to work. When I dug into the code I couldn't PinPoint the bug to something specific. However, if you are working on an open source project I could take a look at your code/config and try to spot potential differences.

Honestly, I think the bug is introduced in a compilation step, but this is just a gut feeling. Are you using typescript?

[Sid110307]

I still have this problem in Next.js 13