Transition is not working in latest Next and React?

[gearintellix]

What package within Headless UI are you using?

@headlessui/react along with next.js, typescript, and tailwindcss

What version of that package are you using?

v1.5.0

What browser are you using?

Edge build with Chromium

Reproduction URL

Repository: https://github.com/gearintellix/web-nextjs-example

$ npm i
$ npm run dev

Go to page http://localhost:3000/test

---

Or create from scratch following step:

$ npx create-next-app@latest --ts --use-npm test
$ cd test
$ npm install -D tailwindcss postcss autoprefixer
$ npx tailwindcss init -p

Update file /tailwind.config.js

module.exports = {
  content: [
    "./pages/**/*.{js,ts,jsx,tsx}",
    "./components/**/*.{js,ts,jsx,tsx}",
  ],
  theme: {
    extend: {},
  },
  plugins: [],
}

Append this into file /styles/global.css

@tailwind base;
@tailwind components;
@tailwind utilities;

Last, pick example code from HeadlessUI where contains transition (eg. https://headlessui.dev/react/dialog)

Then run it

$ npm run dev

Describe your issue

In my case, dialog doesn't appear (I guess it because transition issue)

---

UPDATE:

It's only happen when using latest react and next

    "next": "12.1.4",
    "react": "18.0.0",
    "react-dom": "18.0.0"

after I downgrade the next and react version into this:

    "next": "^12.1.0",
    "react": "17.0.2",
    "react-dom": "17.0.2"

It's will working fine

[FelixTellmann]

just came across exactly the same issue, also ended up downgrading to 17.0.2

[okletzmayr]

duplicate of #681 and #1298.

From #1298:

As far as I can tell the biggest issue is the Transition component, all others seem to work as expected.
Going to close this as a duplicate of #681, but will be working on a fix for this. For now as a workaround, you should be able to remove StrictMode.

[gearintellix]

@okletzmayr I see, thank you for clarification

I'll close this issue, just focus to #681 instead