[Bug]: Rspack 1.7 issue: this binding in async arrow functions not working as expected #12669
Description
System Info
System:
OS: macOS 15.7.1
CPU: (10) arm64 Apple M1 Pro
Memory: 91.58 MB / 32.00 GB
Shell: 5.9 - /bin/zsh
Binaries:
Node: 20.18.3 - /<path>/.nvm/versions/node/v20.18.3/bin/node
Yarn: 1.22.22 - /<path>/.nvm/versions/node/v20.18.3/bin/yarn
npm: 10.8.2 - /<path>/.nvm/versions/node/v20.18.3/bin/npm
pnpm: 10.24.0 - /<path>/.nvm/versions/node/v20.18.3/bin/pnpm
Browsers:
Chrome: 143.0.7499.170
Edge: 143.0.3650.80
Firefox: 145.0
Safari: 26.2
Details
Rspack 1.7 Regression: this Binding in Async Arrow Functions
Summary
Rspack 1.7 seems to have a regression where nested closures inside async arrow functions lose access to the class instance when targeting older browsers or with SWC config forceAllTransforms: true, causing runtime TypeError in production code that worked correctly in 1.6.8.
This is likely related to SWC: swc-project/swc#11423
Error
TypeError: Cannot read properties of undefined (reading 'state')
Minimal Reproduction
import React, { Component } from "react";
class MyComponent extends Component<{}, { value: string }> {
state = { value: "test" };
fetchData = async () => {
// Nested closure accessing this.state
const getValue = () => this.state.value;
// ✓ Works in Rspack 1.6.8
// ✗ Fails in Rspack 1.7.1 with: Cannot read properties of undefined (reading 'state')
console.log(getValue());
};
}Generated Code Comparison
Rspack 1.6.8 (Working):
(0, _define_property._)(_this1, "fetchData", function () {
return (0, _async_to_generator._)(function () {
var getValue;
return (0, _ts_generator.__generator)(this, function (_state) {
getValue = function () {
return _this1.state.value; // ✓ Correct: uses _this1
};
// ...
});
})();
});Rspack 1.7.1 (Broken):
(0, _define_property._)(_this, "fetchData", function () {
return (0, _async_to_generator._)(function () {
var _this, getValue; // ← Shadowing variable introduced
return (0, _ts_generator.__generator)(this, function (_state) {
_this = this; // ← Assignment where this is undefined
getValue = function () {
return _this.state.value; // ✗ Wrong: uses shadowed _this
};
// ...
});
})();
});Reproduce link
https://github.com/ruanyl/rspack-1.7.1-this-context-issue
Reproduce Steps
See description in https://github.com/ruanyl/rspack-1.7.1-this-context-issue