Transition on mount with appear={true} doesn't seem to work on nextjs

[maiieul]

Steps to reproduce:

1. Install next : npx create-next-app@latest --typescript
2. Install tailwind as written in the docs.
3. install headlessUI: npm i @headlessui/react

My package.json:

{
  "name": "headless-transition-appear-nextjs-test",
  "version": "0.1.0",
  "private": true,
  "scripts": {
    "dev": "next dev",
    "build": "next build",
    "start": "next start",
    "lint": "next lint"
  },
  "dependencies": {
    "@headlessui/react": "^1.7.4",
    "@types/node": "18.11.9",
    "@types/react": "18.0.25",
    "@types/react-dom": "18.0.8",
    "next": "13.0.3",
    "react": "18.2.0",
    "react-dom": "18.2.0",
    "typescript": "4.8.4"
  },
  "devDependencies": {
    "autoprefixer": "^10.4.13",
    "postcss": "^8.4.19",
    "tailwindcss": "^3.2.4"
  }
}

Repro

You can find a codesandbox repro here. I just removed non relevant markup from next's template. As you can see, the transition doesn't work on first render. But if you go to the /example page and then come back, you'll see it work.

Edit:

Seems like SSR potentially has something to do with this.

Using dynamic imports as explained in stackoverflow, I am able to make it work (sometimes) with npm run dev on first page load with hard reloads. But after I npm run build && npm run start, it doesn't work anymore. Maybe there are race conditions.

Workaround:

What I did to workaround this issue was simply to set isShowing to true in a useEffect hook:

  const [isShowing, setIsShowing] = useState(false);

  useEffect(() => {
      setIsShowing(true);
  }, []);