We were working on a site that built a Javascript asset meant to be loaded from an external site to embed some reusable logic. Think of it like a little widget to display data without any programming needed.
When we switched this site from using Laravel Mix to Vite, this integration stopped working. The first thing we realized is that Vite was compiling Javascript modules, so the calling sites needed to add type="module" to the script tags in order to work properly.
That was a simple change, but it introduced a new challenge. When scripts are loaded with type="module", browsers now enforce CORS rules.
For historical reasons, browsers chose not to enforce CORS for regular script tags, but since module syntax was added later by modern browsers, the decision was made that it was okay to enforce CORS for JS modules loaded via script tag.
Mystery solved! But how do we fix that? Stay tuned for tomorrow's tip.
Here to help,
Joel
P.S. We pride ourselves on being able to figure out even the weirdest problems. If you could use some help on a particularly thorny problem, we'd love to check it out.