Skip to content

Navigation Menu

Sign in
Appearance settings

Search code, repositories, users, issues, pull requests...

Provide feedback

We read every piece of feedback, and take your input very seriously.

Saved searches

Use saved searches to filter your results more quickly

Appearance settings
Discussion options

I'm building a music player using amplitudejs library. I'm using the new app directory of Next 13. My app works fine in development mode but when I try to make build it or deploy it, it throws an error. I looked into a similar vercel/next.js#17963. But it doesn't help in my scenario. I have isolated the problem but don't know how to fix it. The problem is caused by amplitudejs library. When I remove the amplitudejs import from the component. The build works fine, both in development as well as in production. Here's my repository 🙏🏼

Here's the structure of my component -
`
"use client";
import React, { useEffect, useRef, useContext, useState } from "react";
import { StateContext } from "./StateProvider";
import Amplitude from "amplitudejs";

const AudioPlayer = () => {
const slider = useRef(null);

const { ownedSongs } = useContext(StateContext);

useEffect(() => {
Amplitude?.init({
callbacks: {
timeupdate: function () {
let percentage = Amplitude.getSongPlayedPercentage();

			if (isNaN(percentage)) {
				percentage = 0;
			}
			/* @ts-ignore */
			slider.current.style.backgroundSize = percentage + "% 100%";
		},
	},
	songs: ownedSongs.map((song) => ({
		name: song?.name,
		artist: song.attributes[0]?.value,
		album: song.attributes[1]?.value,
		url: song?.animation_url,
		cover_art_url: song?.image,
	})),
});

}, [ownedSongs]);
........
.......
``

Screenshot 2023-03-03 at 4 31 45 PM

Screenshot 2023-03-03 at 4 31 48 PM

You must be logged in to vote

Replies: 1 comment · 1 reply

Comment options

Right now (idk, this right) is you need to create another lib to talk with it instead, I use svelte and I use that ways to fix that error. Cause you need to use async function with it.

If you want to look to my lib, here on my Github.
https://github.com/toonoeichi/my-linktree/blob/v2/src/lib/amplitudejs.ts

image

You must be logged in to vote
1 reply
@toonshouin
Comment options

And if dev here reading this, can you looking on this error?

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
2 participants
Morty Proxy This is a proxified and sanitized view of the page, visit original site.