-
-
Notifications
You must be signed in to change notification settings - Fork 782
Closed
Labels
bugSomething isn't workingSomething isn't workingteamThe issue/pr is created by the member of Rspack.The issue/pr is created by the member of Rspack.
Description
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
- pnpm install
- pnpm run build. Running with Rspack and the result from the generated code of
useInViewis not correct - pnpm run build:w. Running with Webpack and the result is expected
Reactions are currently unavailable
Metadata
Metadata
Assignees
Labels
bugSomething isn't workingSomething isn't workingteamThe issue/pr is created by the member of Rspack.The issue/pr is created by the member of Rspack.