react-transition-group "-enter(-active)" doesn't work with Preact X

[kimkanu]

react-transition-group is partially not working with Preact X.

I've created a Preact project with preact-cli by preact create typescript test (--yarn) (with typescript template), installed preact@next and upgraded other packages:

$ yarn add preact@next
$ yarn upgrade
$ yarn remove preact-router
$ yarn add react-router react-router-dom @types/react-router @types/react-router-dom
$ yarn add react-transition-group @types/react-transition-group

After replacing preact-router by react-router(-dom), I've changed some codes accordingly.

app.tsx:

import { Component, h } from "preact";
import { BrowserRouter as Router, Route, Switch } from "react-router-dom";
import { CSSTransition, TransitionGroup } from "react-transition-group";

import Home from "../routes/home";
import Profile from "../routes/profile";
import Header from "./header";

if ((module as any).hot) {
    // tslint:disable-next-line:no-var-requires
    require("preact/debug");
}

export default class App extends Component {
    public currentUrl?: string;

    public render() {
        return (
            <div id="app">
                <Router>
                    <Header />
                    <Route
                        render={({ location }) => {
                            return (
                                <TransitionGroup>
                                    <CSSTransition
                                        timeout={6000}
                                        classNames="page"
                                        key={location.key}
                                    >
                                        <Switch location={location}>
                                            <Route
                                                exact
                                                path="/"
                                                component={Home as any}
                                            />
                                            <Route
                                                exact
                                                path="/profile/"
                                                component={
                                                    (() => (
                                                        <Profile user="me" />
                                                    )) as any
                                                }
                                            />
                                            <Route
                                                path="/profile/:user"
                                                component={
                                                    (({ match }: any) => (
                                                        <Profile
                                                            user={
                                                                match.params
                                                                    .user
                                                            }
                                                        />
                                                    )) as any
                                                }
                                            />
                                        </Switch>
                                    </CSSTransition>
                                </TransitionGroup>
                            );
                        }}
                    />
                </Router>
            </div>
        );
    }
}

Then -exit(-active) works while -enter(-active) doesn't.

Is there anything I'm missing?

[JoviDeCroock]

It does not seem so that the relevant component exits, Does this happen on React?

[kimkanu]

I expect there should be -enter(-active) classes when a component is entering.

React version: https://github.com/kimkanu/preact-transition--react (https://kimkanu.github.io/preact-transition--react/) Preact version: https://github.com/kimkanu/preact-transition--preact (https://kimkanu.github.io/preact-transition--preact/)

In the React version, the fade and translate effects occur while entering. However, they don't appear in the Preact version. Weirdly exit animations occur in both examples.

[marvinhagemeister]

Thanks for the two repos :tada: They're awesome and help a lot in narrowing the issue down. So far I was able to step through the source of react-transition-group and it fails to apply the enter-* classes. This happens because findDOMNode() returns null and not the expected DOM node. The entering classes are set inside the componentDidMount lifecycle hook. In Preact speak we're not setting _dom and c.base correctly there. Will need to investigate further.

[marvinhagemeister]

Okay, I think I have a good understanding of what's happening here. The problem is that componentDidMount is called before the DOM has been updated completely. It's a difficult problem and I have the feeling that this is not just a small fix, but a more involving issue. Not sure if that would make it into the initial X release.

[mlshv]

Hi! Any updates on this?

[MiLaDTechS]

try removing switch, it works i removed the StrictMode to get rid of the warning about findDOMNode() and also removed Switch and now its working