Skip to content

Runtime generation failed causing code is eliminated by accident #3903

@h-a-n-a

Description

@h-a-n-a

System Info

Not related

Details

Rspack results show that the code will be eliminated after optimization.minimize turned on, which causes React.useEffect never triggers.

function useInView({ threshold, delay, trackVisibility, rootMargin, root, triggerOnce, skip, initialInView, fallbackInView, onChange } = {}) {
   // ...
    /*#__PURE__*/ (react__WEBPACK_IMPORTED_MODULE_0__namespace_cache || (react__WEBPACK_IMPORTED_MODULE_0__namespace_cache = __webpack_require__.t(react__WEBPACK_IMPORTED_MODULE_0_, 2))).useEffect(()=>{
        if (skip || !ref) return;
        let unobserve;
        unobserve = observe(ref, (inView, entry)=>{
            setState({
                inView,
                entry
            });
            if (callback.current) callback.current(inView, entry);
            if (entry.isIntersecting && triggerOnce && unobserve) {
                unobserve();
                unobserve = void 0;
            }
        }, {
            root,
            rootMargin,
            threshold,
            // @ts-ignore
            trackVisibility,
            // @ts-ignore
            delay
        }, fallbackInView);
        return ()=>{
            if (unobserve) unobserve();
        };
    }, // We break the rule here, because we aren't including the actual `threshold` variable
    // eslint-disable-next-line react-hooks/exhaustive-deps
    [
        // If the threshold is an array, convert it to a string, so it won't change between renders.
        // eslint-disable-next-line react-hooks/exhaustive-deps
        Array.isArray(threshold) ? threshold.toString() : threshold,
        ref,
        root,
        rootMargin,
        triggerOnce,
        skip,
        trackVisibility,
        fallbackInView,
        delay
    ]);
    // ...
}

The expected behavior is how webpack handles the code:

function useInView({
  threshold,
  delay,
  trackVisibility,
  rootMargin,
  root,
  triggerOnce,
  skip,
  initialInView,
  fallbackInView,
  onChange
} = {}) {
// ...
  react.useEffect(
    () => {
      if (skip || !ref)
        return;
      let unobserve;
      unobserve = observe(
        ref,
        (inView, entry) => {
          setState({
            inView,
            entry
          });
          if (callback.current)
            callback.current(inView, entry);
          if (entry.isIntersecting && triggerOnce && unobserve) {
            unobserve();
            unobserve = void 0;
          }
        },
        {
          root,
          rootMargin,
          threshold,
          // @ts-ignore
          trackVisibility,
          // @ts-ignore
          delay
        },
        fallbackInView
      );
      return () => {
        if (unobserve) {
          unobserve();
        }
      };
    },
    // We break the rule here, because we aren't including the actual `threshold` variable
    // eslint-disable-next-line react-hooks/exhaustive-deps
    [
      // If the threshold is an array, convert it to a string, so it won't change between renders.
      // eslint-disable-next-line react-hooks/exhaustive-deps
      Array.isArray(threshold) ? threshold.toString() : threshold,
      ref,
      root,
      rootMargin,
      triggerOnce,
      skip,
      trackVisibility,
      fallbackInView,
      delay
    ]
  );
// ...

Reproduce link

https://github.com/h-a-n-a/issue_0804_rspack_runtime_generation

Reproduce Steps

  1. pnpm install
  2. pnpm run build. Running with Rspack and the result from the generated code of useInView is not correct
  3. pnpm run build:w. Running with Webpack and the result is expected

Metadata

Metadata

Assignees

Labels

bugSomething isn't workingteamThe issue/pr is created by the member of Rspack.

Type

No type

Projects

No projects

Milestone

No milestone

Relationships

None yet

Development

No branches or pull requests

Issue actions