Everything functions perfectly on my local machine, but once deployed to Vercel, the display disappears. I've double-checked the text, container, and TagCloud - all showing the correct responses. I even tried uninstalling and reinstalling TagCloud without success. I'm at a loss here and unable to troubleshoot further. Any assistance would be greatly appreciated. No errors are reported during the build or in the console.
import TagCloud from "TagCloud";
import { useEffect } from "react";
import "./textphere.css";
export const text = [
"HTML",
"CSS",
"Tailwind",
"Javascript",
"Typescript",
"NodeJS",
"React",
"Next JS",
"Webpack",
"Docker",
"Babel",
"Kubernetes",
"ES6",
"NoSQL",
"SQL",
"YAML",
"SSR",
"CSR",
"SSG",
"Stripe API",
"REST API",
"Graph QL",
] as string[];
function TextSphere() {
useEffect(() => {
return () => {
const container = document.querySelector(".tagcloud") as any;
console.log(container);
console.log(text);
console.log("TagCloud", TagCloud);
const options: any = {
radius: 300,
maxSpeed: "normal",
initSpeed: "normal",
keep: true,
};
TagCloud(container, text, options);
};
}, []);
return (
<div>
<div className="text-shpere">
<span className="tagcloud"></span>
</div>
</div>
);
}
export default TextSphere;
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@100;200;300;400;600;700;800;900&display=swap');
/* container */
.text-shpere {
padding-top: 20px;
position: relative;
top: 0;
display: flex;
justify-content: center;
align-items: center;
background: rgb(250 250 249 / var(--tw-bg-opacity))
}
/* textsphere */
.tagcloud {
display: absolute;
top: 0;
left: 0;
font-family: 'Inter', sans-serif;
}
/* Change color of each text in sphere on hover */
.tagcloud--item {
color: #f1c400;
text-transform: uppercase;
}
.tagcloud--item:hover {
color: #ff6347;
}
@media (min-width: 900px) {
.text-shpere{
width: 80%;
height: 70vh;
}
.tagcloud{
font-weight: 600;
font-size: 1rem;
letter-spacing: 0.0425em;
right: 5rem
}
}
@media (min-width: 1200px ){
.text-shpere{
padding-top: 10%;
width: 100%;
}
.tagcloud{
font-size: 1rem;
transform: scale(1);
border-radius: 50%;
line-height: 100px;
}
}
@media (min-width: 1400px ){
.tagcloud{
font-size: 1.5rem;
transform: scale(1.11);
}
}
@media (min-width: 1530px ){
.tagcloud{
font-size: 1.7rem;
transform: scale(1.15);
margin-left: 80px;
padding-top: 40px;
}
}
@media (min-width: 1900px){
.tagcloud{
padding-top: 100px;
}
}