codesandbox / codesandbox-client

An online IDE for rapid web development

https://codesandbox.io

Other

13.04k stars 2.27k forks source link

can't use top-level await in projects where you set es2020 or something #8435

Open karl-police opened 5 months ago

karl-police commented 5 months ago

🐛 bug report

Preflight Checklist

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

Description of the problem

I can't use await

e.g. if you open the Browser console you can do something pointless like await console.log("HI") and it won't throw an error. On Codesandbox you can't.

Similar to https://github.com/codesandbox/codesandbox-client/issues/8433 except that it's for top-level await.

To Reproduce

https://codesandbox.io/p/sandbox/hungry-forest-forked-3ssrkq?file=%2Fsrc%2Findex.ts

https://codesandbox.io/p/sandbox/codesandbox-github-async-await-issue-7hpwm8

CompuIves commented 5 months ago

Thanks for the report! Yes, this issue is a bit more tricky to solve. When we run a project, we transpile all code and run our own require function for "bundling" the code. We transpile to commonjs, and top level await only works in ESM context. To run ESM directly, we need to rebuild the bundler from the ground up (perhaps based on service worker? I would do it that way). Transpiling top-level await is possible, by turning them into generators and having a custom runtime that executes the code and runs yield, but there currently does not exist a transpiler plugin for that.

So this one is harder to solve right now. I would recommend converting to a devbox in the meantime to circumvent this issue.

stephenhebert commented 3 months ago

It seems like transpiling the sandbox code defeats the integrity of the sandbox. ESM is well supported by modern browsers, and if compatibility with older browsers is not needed by the sandbox, it would be nice to be able to take advantage of ESM.

I love this product and I want it to succeed. I just heard about non-enterprise support for private repos, and signed up for a pro account to try it with my team. I've just spent several hours struggling to set up a starter template to suit our tech stack. Unfortunately, this issue makes codesandbox unusable for our use case.