Vanilla JS evaluate breaks browser execution order when script with async/defer is used

jpoehnelt commented 3 years ago

Description of the problem

l am trying to use Google Maps in codesandbox with the Vanilla JS template. This is unique in that the historic way to load the library was through a script tag similar to the following:

<script
  async
  src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&callback=initMap"
></script>

The issue is that the app.js (loaded in HTML head without defer or async attributes on the script tag) is not actually available and now asynchronous. This leads to a predictable error since initMap is not defined when it should be.

This works locally with the same files.

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

This blocks me from using codesandbox for the hundreds of samples with this pattern. Not all users are interested in dynamically loading the Google Maps API via JavaScript.

To Reproduce

See attached sandbox.

Link to sandbox: link

Your Environment

Software	Name/Version
Сodesandbox
Browser
Operating System

jpoehnelt commented 3 years ago

Working example using node template without functioning HMR https://codesandbox.io/s/naughty-haibt-rdesl?file=/sandbox.config.json

DeMoorJasper commented 3 years ago

This is a pretty complicated issue to resolve as sandpack is entirely browser based and transpiles and evaluates the code asynchronous

Loosely related to #5723 as we can probably load these scripts after we've done all the transpilation, hacky solution is maybe adding that script tag in your JS entry after it's ready?

github-actions[bot] commented 3 years ago

This issue has automatically been marked stale because there has been no activity in a while. It will automatically be closed in 2 weeks. If this issue should not be closed please leave a comment, or use the no-stale label

codesandbox / codesandbox-client