Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Why can't this script be loaded dynamically using the following methods? #3

Open
evolross opened this issue Aug 14, 2024 · 3 comments
Open

Why can't this script be loaded dynamically using the following methods? #3

evolross opened this issue Aug 14, 2024 · 3 comments

Comments

@evolross
Copy link

evolross commented Aug 14, 2024 •
edited
Loading

I'm battling with this now, trying to get Twitch's https://embed.twitch.tv/embed/v1.js to load dynamically.

I've tried all of the following and none of them will add Twitch to window similar to how it does if you just add the following to the <body> element:

<script src="https://embed.twitch.tv/embed/v1.js"></script>

I tried doing the following:

//  Calling jquery's getScript()
$.getScript(...);

//  Dynamically adding a <script> element
let s = document.createElement("script");
s.type = "text/javascript";
s.src = "https://player.twitch.tv/js/embed/v1.js";
$("head").append(s);

The above will load the script in the browser's Sources tab, but it will not add Twitch to the global window. Why is that? Just curious if you could explain.
@evolross
Copy link
Author

I'm also trying to get the latest https://embed.twitch.tv/embed/v1.js to work so I'm curious what modifications you made.

@evolross
Copy link
Author

evolross commented Aug 16, 2024 •
edited
Loading

For anyone who comes across this too, I was able to put the latest Twitch JS library (as of 08/16/2024) https://embed.twitch.tv/embed/v1.js into my project, then access it like this without any changes to the source:

import Twitch from "your/path/to/locally/saved/twitch/embed_v1.js";
window.Twitch = Twitch;  // Optional

@evolross
Copy link
Author

evolross commented Aug 16, 2024 •
edited
Loading

I also figured out how to dynamically load the script using $.getScript(...). The problem is the Twitch code has this line at the top that tries to detect its environment and how it will make Twitch (which is t()) available:

"object" == typeof exports && "object" == typeof module ? module.exports = t() : "function" == typeof define && define.amd ? define([], t) : "object" == typeof exports ? exports.Twitch = t() : e.Twitch = t()

Upon using a little Github Copilot to break that down, the script detects exports and module in my Meteor application and then sets module.exports = t() which sets Twitch as an export of this module. It never makes it to last else of the inline if which is e.Twitch = t() which would set Twitch into the global window object.

After figuring this out, it was a matter if finding where the script's exports are at. Logging modules after the $.getScript(...) success showed that Twitch was inside of modules.parent.parent.exports which ended up being the client entry point JS file of my Meteor app.

So in the .done callback of $.getScript(...) I needed to do:

//  Access the set export from the Twitch Embed script
const { Twitch } = require("/client/main.js");

//  Set the Twitch object to the window for the rest of the app to use as normal
window.Twitch = Twitch;

So there is it. Dynamically loading the Twitch Embed JS library with no source modifications.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
None yet
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests
1 participant
@evolross