Bundler removed critical side-effect code in react-transition-group

[yume-chan]

Do you want to request a feature or report a bug?

Bug

What is the current behaviour?

Transitions in react-transition-group only works in dev mode, but not in prod mode.

Checking the output file, some side-effect code in react-transition-group has been removed by the bundler:

Original code:

https://github.com/reactjs/react-transition-group/blob/399f26998a5cf2449798a02c755e5808e9b39ddd/src/CSSTransition.js#L185-L204

addClass(node, type, phase) {
  let className = this.getClassNames(type)[`${phase}ClassName`];
  const { doneClassName } = this.getClassNames('enter');

  if (type === 'appear' && phase === 'done' && doneClassName) {
    className += ` ${doneClassName}`;
  }

  // This is to force a repaint,
  // which is necessary in order to transition styles when adding a class name.
  if (phase === 'active') {
    /* eslint-disable no-unused-expressions */
    node && node.scrollTop;
  }

  if (className) {
    this.appliedClasses[type][phase] = className
    addClass(node, className)
  }
}

Output code (bundle.00407.js) (unminified by prettier, annotated by me):

n.addClass = function (e, t, n) {
  // let className = this.getClassNames(type)[`${phase}ClassName`];
  var r = this.getClassNames(t)[n + "ClassName"], 

    // const { doneClassName } = this.getClassNames('enter');
    o = this.getClassNames("enter").doneClassName; 

  // if (type === 'appear' && phase === 'done' && doneClassName) { className += ` ${doneClassName}`; }
  "appear" === t && "done" === n && o && (r += " " + o), 

  // 
  // Where is `if (phase === 'active') { node && node.scrollTop; }` ???
  //

    // if (className) {
    r &&

      // this.appliedClasses[type][phase] = className
      ((this.appliedClasses[t][n] = r),

      // (inlined) addClass(node, className)
      (function (e, t) {
        e &&
          t &&
          t.split(" ").forEach(function (t) {
            return (
              (r = t),
              void ((n = e).classList
                ? n.classList.add(r)
                : (function (e, t) {
                    return e.classList
                      ? !!t && e.classList.contains(t)
                      : -1 !==
                          (
                            " " +
                            (e.className.baseVal || e.className) +
                            " "
                          ).indexOf(" " + t + " ");
                  })(n, r) ||
                  ("string" == typeof n.className
                    ? (n.className = n.className + " " + r)
                    : n.setAttribute(
                        "class",
                        ((n.className && n.className.baseVal) || "") + " " + r
                      )))
            );
            var n, r;
          });
      })(e, r));
};

If the current behaviour is a bug, please provide the steps to reproduce.

1. npx preact-cli create simple transition-repro
2. cd transition-repro
3. npm i react-transition-group
4. add some transition to style.css

   .fade-appear {
     opacity: 0;
   }
   
   .fade-appear-active {
     opacity: 1;
     transition: opacity 5000ms ease-in-out;
   }
   

5. Add a CSSTransition component to index.js

   import { CSSTransition } from 'react-transition-group';
   import './style';
   
   export default function App() {
     return (
       <CSSTransition in appear timeout={5000} classNames="fade">
         <div>
           <h1>Hello, World!</h1>
         </div>
       </CSSTransition>
     );
   }
   

6. npm run build

I created a repository containing all files produced by above steps: https://github.com/yume-chan/preact-transition-repro

What is the expected behaviour?

The transition work in both dev and prod mode.

If this is a feature request, what is motivation or use case for changing the behaviour?

N/A

Please mention other relevant information.

#505

Please paste the results of preact info here.

> npx preact info

Environment Info:
  System:
    OS: Windows 10 10.0.17763
    CPU: (4) x64 Intel(R) Core(TM) i5-3470 CPU @ 3.20GHz
  Binaries:
    Node: 14.14.0 - C:\Program Files\nodejs\node.EXE
    Yarn: 1.22.10 - ~\AppData\Roaming\npm\yarn.CMD
    npm: 6.14.8 - C:\Program Files\nodejs\npm.CMD
  Browsers:
    Edge: Spartan (44.17763.1.0)
  npmPackages:
    preact: ^10.1.0 => 10.5.11
    preact-cli: ^3.0.0 => 3.0.5
    preact-render-to-string: ^5.1.2 => 5.1.12