React = require("react") is not consistently transpiled inside function

[KoraySAP]

Describe the bug

React might be a protected keyword when declared inside a function ? Below code when transpiled is referencing either React1 or React, should be only one of those two, probably React.

Input code

(() => {
    const React = require("react");
    module.exports = USidePanel = {
        view(state, actions) {
            return (
                <AppConfig geometry={Something.compact}/>
            );
        },
    };
})();

Config

No response

Playground link (or link to the minimal reproduction)

https://play.swc.rs/?version=1.3.100&code=H4sIAAAAAAAAA1WOTQ6CMBCF95xiwqpNCB4AITFewEg8QFNGbAJtHQZ%2FQnp3W3Qh3%2BrNmzcvI4SEuoElg4h2dmI4o9IMNRDeZ0MockpGLqs1M7puHrDEl3fEU4xdWtPhSVkc4vDtSTwMPsXEirGAeG5itfxbJwh5JgtiYyb2B%2B%2BPzl5NDz26EZne9dImcTO2L7UbfawMu2Zz%2BXswEYpVhioLUsjqA62nLPnlAAAA&config=H4sIAAAAAAAAA21QsU7EMAzd7yuijKiiEwysoBMMsCPEYKUu6pHEke1KV079d5LqLrQ6slh%2B78X2e6edyc8exNkHc1qa3CpDlJ44rMAMj4JP2A8R98SPHkT2A%2FpOsqgHL3gWzk0dA%2FyFmmmLcmcrnIAFeTtapqhwLFKdEorjIWn9UUZJIZVHXIHdFCEM7iUkYv2HRkcMSixn7upATyR4Ob%2BieFTkCP4ZfUKu9pq2XS%2Bw34hpSeENAm5DOG%2BwgbrR48pp25p3Go2DaCShG%2FrJWEchUDyIbUpO96VA6EoZc6lZ5lhKPH%2FqCyPKg9NX6q6dePiZtjkn0GKunPtR0YW5vbEV%2BNwmNe%2FmXxLxurAoAgAA

SWC Info output

Operating System:
Platform: darwin
Arch: x64
Machine Type: x86_64
Version: Darwin Kernel Version 23.4.0: Wed Feb 21 21:44:31 PST 2024; root:xnu-10063.101.15~2/RELEASE_X86_64
CPU: (12 cores)
Models: Intel(R) Core(TM) i7-9750H CPU @ 2.60GHz

Binaries:
    Node: 20.11.0
    npm: 10.2.4
    Yarn: N/A
    pnpm: N/A

Relevant Packages:
    @swc/core: 1.4.2
    @swc/helpers: 0.5.6
    @swc/types: 0.1.5
    typescript: 5.4.3

SWC Config:
    output: N/A
    .swcrc path: N/A

Next.js info:
    output: N/A

Expected behavior

(function() {
    var React = require("react");
    module.exports = USidePanel = {
        view: function view(state, actions) {
            return /*#__PURE__*/ React.createElement(AppConfig, {
                geometry: Something.compact
            });
        }
    };
})();

Actual behavior

(function() {
    var React1 = require("react");
    module.exports = USidePanel = {
        view: function view(state, actions) {
            return /*#__PURE__*/ React.createElement(AppConfig, {
                geometry: Something.compact
            });
        }
    };
})();

Version

1.4.2

Additional context

No response

[magic-akari]

This issue is about variable analysis in the scope.
Currently, SWC converts JSX to top-level React references.

Finding the nearest React reference from the current position of JSX and using it, as done in Babel, is challenging to implement in SWC.

By the way, if you make the following changes to the code, you will get the correct result.

+const React = require("react");
 
 (() => {
-    const React = require("react");
     module.exports = USidePanel = {
         view(state, actions) {
             return (
                 <AppConfig geometry={Something.compact}/>
             );
         },
     };
 })();