React JavaScript modules not running in strict mode

🐛 bug report

Preflight Checklist

• I have read the Contributing Guidelines for this project.
• I agree to follow the Code of Conduct that this project
  adheres to.
• I have searched the issue tracker for an issue that matches the one I want
  to file, without success.

Description of the problem

JavaScript files (ie: JavaScript modules) created in a React.js Sandbox don't run their JavaScript code in strict mode as they should be.

How has this issue affected you? What are you trying to accomplish?

This issue has caused bugs and issues within programs that users who are familiar with modules wouldn't expect to see. It causes the JavaScript code within the module to behave unexpectedly as it's being run in sloppy mode instead of strict mode. There are a number of different things that change when strict mode is applied to code, so having the module run in sloppy modes when it should be running in strict mode causes head-scratching and unusual bugs.

I found this issue when answering this StackOverflow question about certain JavaScript behaviour.

To Reproduce

1. Create a React.js sandbox.
2. In a new file (eg: Test.js) add some JavaScript code that would fail or behave differently in sloppy mode vs strict mode, eg:

// Test.js
(function() {console.log(this)}).call(undefined);

3. Import this new file in index.js, import "./Test.js" so that the code within it will run.
4. When ran, view the console. You'll see that window is logged, but undefined should have been logged as the module should be run in strict mode. Instead, it is running in sloppy mode and so we get window.

Link to sandbox: link

Analysis:

I did some of my own digging. The bug seems to be caused by some code within refresh-transpiler.ts on line number 189. What happens is that when the module is transpiled, a "use strict"; directive is added to the top of the source code (which is fine and expected), but then the linked piece of code wraps the transpiled code in a try {} block. This then causes the "use strict"; not to take effect as it's not at the top of the source code anymore, and use strict doesn't apply to regular code blocks {}.

Your Environment

Start at packages/app/src/sandbox/eval/transpilers/react-refresh/refresh-transpiler.ts around line 189 and reproduce the issue with the linked React sandbox or Test.js example. Trace how the transpiled module is wrapped and verify that strict-mode behavior is retained, then rerun the console example to confirm that undefined is logged.