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:
<!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:
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:
~/musicKit.js
2:8 error 'MusicKit' is not defined no-undef
12:3 error 'MusicKit' is not defined no-undef 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.
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.
jgonzosan
Users receive reputation points by contributing quality content to the forums.
Posts include post and replies published on the forums.
Post authors can mark replies as Accepted to indicate successful solutions.
Apple Developer Forums admins can mark replies as Apple Recommended to indicate an approved solution