I'm trying to utilize MusicKitJS within my Vue project but keep running into the 'MusicKit is not defined' error. I added the cdn link into my HTML file as such:
Then I used this in a separate Javascript file called musicKit.js:
I then immediately get this error:
I've been able to use this setup with a basic HTML/Javascript project but I want to know how to set this up with Vue or even with React. I had the same problem in React as well so I don't know what I'm missing.
Code Block <!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8" /> <meta http-equiv="X-UA-Compatible" content="IE=edge" /> <meta name="viewport" content="width=device-width,initial-scale=1.0" /> <link rel="icon" href="<%= BASE_URL %>favicon.ico" /> <title><%= htmlWebpackPlugin.options.title %></title> </head> <body> <noscript> <strong >We're sorry but <%= htmlWebpackPlugin.options.title %> doesn't work properly without JavaScript enabled. Please enable it to continue.</strong > </noscript> <div id="app"></div> <script src="https://js-cdn.music.apple.com/musickit/v1/musickit.js"></script> </body> </html>
Then I used this in a separate Javascript file called musicKit.js:
Code Block function setupMusicKit() { if (!MusicKit) { document.addEventListener("musickitloaded", () => { configure(); }); } else { configure(); } } function configure() { MusicKit.configure({ developerToken: process.env.VUE_APP_DEVELOPER_TOKEN, app: { name: "Vue Music", version: "1.0", }, }); } export default setupMusicKit;
I then immediately get this error:
Maybe I read the docs wrong, but it mentions that MusicKit would be global after it was loaded. What am I doing wrong here? I've tried a variety of different ways of getting this to work all with the same error.~/musicKit.js
2:8 error 'MusicKit' is not defined no-undef
12:3 error 'MusicKit' is not defined no-undef
I've been able to use this setup with a basic HTML/Javascript project but I want to know how to set this up with Vue or even with React. I had the same problem in React as well so I don't know what I'm missing.