[Accordion] Close animation flickering when the component is imported from an external component library

[lucasriondel]

Bug report

Current Behavior

The accordion component flickers when closed, but only when it's built with vite in an external component library. I've tried using the same code locally in my project, and it works. I just do not understand what changes and I hope you guys can provide some help.

The behavior seems exactly like https://github.com/radix-ui/primitives/issues/1074.

https://github.com/user-attachments/assets/0da225a9-c38b-4540-b4dd-f9b080f2e385

Expected behavior

It should not flicker.

Reproducible example

https://github.com/lucasriondel/radix-ui-accordion-flicker-issue/tree/main

Run the following commands to set it up :

git clone https://github.com/lucasriondel/radix-ui-accordion-flicker-issue/tree/main
npm create vite@latest react-playground -- --template react
cd radix-ui-accordion-flicker-issue && pnpm i && pnpm build && pnpm link --dir ../react-playground && cd ..
cd react-playground && pnpm i 

Then, replace your App.jsx file with this:

import { Filters } from "accordion-flicker-issue-with-external-library";
import "accordion-flicker-issue-with-external-library/dist/style.css";

function App() {
  return <Filters />;
}

export default App;

And finally run the dev server:

pnpm dev

Then navigate to http://localhost:5173/ to see the component in action.

Suggested solution

Additional context

I am trying to build an external component library for my projects and I've came across this issue and it feels like a vite or radix issue.

Your environment

Software	Name(s)	Version
Radix Package(s)	@radix-ui/react-accordion	^1.1.2
React	n/a	^18.2.0
Browser	Arc	1.52.0 (51895)
Assistive tech
Node	n/a	v18.17.0
npm/yarn	pnpm	9.5.0
Operating System	macOS	14.5 (23F79)

[rasgo-cc]

Came here a few days ago with the same issue but just found the reason for this so leaving it here for future reference: You are probably using different versions of react and/or react-dom in you app. Make sure you use the versions installed in the node_modules of your app.

In my case I'm using NextJs so I had to edit the webpack config like so:

next.config.mjs

import path from "path";

/** @type {import('next').NextConfig} */
const nextConfig = {
  reactStrictMode: true,
  output: "export",
  webpack: (config, {}) => {
    config.resolve.alias["react"] = path.resolve("./node_modules/react");
    config.resolve.alias["react-dom"] = path.resolve(
      "./node_modules/react-dom"
    );
    return config;
  },
};

export default nextConfig;

I already had react but not react-dom, so adding it did the trick.

[luasenvy]

in my case removing the important: true option from the tailwind.config.ts file. I hope this helps others facing a similar problem.