Next.js Discord

Discord Forum

Document not defined on ubuntu server

Answered
Australian Freshwater Crocodile posted this in #help-forum
Open in Discord
Australian Freshwater CrocodileOP
I have my nextjs site on my computer and an ubuntu server. When I try building on my ubuntu server I get this error (which did not happen just yesterday) but when I build on my computer its no problem at all. Only code that includes "document" is part of a npm package called react-fast-marquee which im using. I'll attach the code of that below.
Answered by Australian Freshwater Crocodile
import {Player, Controls} from '@lottiefiles/react-lottie-player';
import { Play } from 'lucide-react';
import { Footer } from '@components/ui/footer';
View full answer

128 Replies

Australian Freshwater CrocodileOP
function ___$insertStyle(css) {
    if (!css || typeof window === 'undefined') {
        return;
    }
    const style = document.createElement('style');
    style.setAttribute('type', 'text/css');
    style.innerHTML = css;
    document.head.appendChild(style);
    return css;
}
This is the part of the package that uses document
Australian Freshwater CrocodileOP
Anyone?
@Ray https://nextjs-faq.com/browser-api-client-component
Australian Freshwater CrocodileOP
should I wrap that entire function in a useEffect?
@Australian Freshwater Crocodile should I wrap that entire function in a useEffect?
Ray
could you show some code on how do you use it?
@Ray could you show some code on how do you use it?
Australian Freshwater CrocodileOP
Its from a npm package
react-fast-marquee
thats th efile its used in
document isnt used anywhere else in my project
@Australian Freshwater Crocodile react-fast-marquee
Ray
where do you use the Marquee component?
Australian Freshwater CrocodileOP
in my page.jsx
(my landing page)
      <section className='testimonials ml-[250px] mr-[250px]' id='testimonials' data-aos="fade-in">
        <p className='testimonialTitle'>User Testimonials</p>
        <Marquee gradient={true} gradientColor='#18181b'>
          <Card className="testimonialCard">
            <CardHeader>
              <CardTitle className="cardTitleGradient">Best Bot Service</CardTitle>
              <CardDescription className="leading-1">"Qubify has been a great help to my server. I was able to find a bot that suited my needs and I was able to host it for free. I would recommend Qubify to anyone looking to expand their server."</CardDescription>
            </CardHeader>
            <CardFooter>
              <CardTitle className="testimonialUser">Clt @ Handmaid Studios</CardTitle>
            </CardFooter>
          </Card>

          <Card className="testimonialCard">
            <CardHeader>
              <CardTitle className="cardTitleGradient">Great Support</CardTitle>
              <CardDescription className="leading-1">"I had an issue with my bot and I reached out to Qubify support. They were able to help me with my issue in no time. I was very impressed with the support I received."</CardDescription>
            </CardHeader>
            <CardFooter>
              <CardTitle className="testimonialUser">Maffy @ TrentX</CardTitle>
            </CardFooter>
          </Card>

          <Card className="testimonialCard">
            <CardHeader>
              <CardTitle className="cardTitleGradient">Amazing Service</CardTitle>
              <CardDescription className="leading-1">"I was able to find a bot that suited my needs and I was able to host it for free. I would recommend Qubify to people looking to build a solid community."</CardDescription>
            </CardHeader>
            <CardFooter>
              <CardTitle className="testimonialUser">Fevnts @ Elevated Games </CardTitle>
            </CardFooter>
          </Card>

          <Card className="testimonialCard">
            <CardHeader>
              <CardTitle className="cardTitleGradient">Easily Scalable</CardTitle>
              <CardDescription className="leading-1">"I was really looking to start growing a large scale community. In search of bots, I found Qubify. This was one of the best discoveries of my life. Qubify has allowed me to transform my server."</CardDescription>
            </CardHeader>
            <CardFooter>
              <CardTitle className="testimonialUser">Parent @ Bladetool.cc</CardTitle>
            </CardFooter>
          </Card>

          <Card className="testimonialCard">
            <CardHeader>
              <CardTitle className="cardTitleGradient">Great Service</CardTitle>
              <CardDescription className="leading-1">"Me and my team were looking for a way to easily manage and speed up our servers productivity, with the help of Qubify we were able to accomplish this. Thanks Qubify!"</CardDescription>
            </CardHeader>
            <CardFooter>
              <CardTitle className="testimonialUser">YonyXx @ Vice Studios</CardTitle>
            </CardFooter>
          </Card>
        </Marquee>
      </section>
its a client page
when I run it locally I do not get the error, but on ubuntu I do
Ray
does it need to be SEO optimized
Australian Freshwater CrocodileOP
when trying to host
wouldnt think so
@Australian Freshwater Crocodile wouldnt think so
Ray
create a new component with this section
and use dynamic with ssr: false to import it
Australian Freshwater CrocodileOP
Can you provide an example?
@Australian Freshwater Crocodile Can you provide an example?
Ray
// cards.tsx
'use client'

const Cards = () => (
  <section
    className="testimonials ml-[250px] mr-[250px]"
    id="testimonials"
    data-aos="fade-in"
  >
    <p className="testimonialTitle">User Testimonials</p>
    <Marquee gradient={true} gradientColor="#18181b">
      <Card className="testimonialCard">
        <CardHeader>
        ...
      </Card>
    </Marquee>
  </section>
);

// page.tsx
import dynamic from 'next/dynamic'

const Cards = dynamic(() => import('./cards.tsx'), {ssr: false})
<Cards />
Australian Freshwater CrocodileOP
so basically a component for the marquee?
Original message was deleted
Australian Freshwater CrocodileOP
i haven’t tried it yet
Australian Freshwater CrocodileOP
@Ray i still get same error
Ray
show the error
show the code
Australian Freshwater CrocodileOP
its the same error
same code
@Australian Freshwater Crocodile Click to see attachment
Australian Freshwater CrocodileOP
^
@Australian Freshwater Crocodile same code
Ray
same code? did you use dynamic to import that component?
Australian Freshwater CrocodileOP
oh
you mean te component
'use client'

import React from 'react'
import Marquee from 'react-fast-marquee'
import { Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle, } from "@/components/ui/card"

const Testimonials = () => {
  return (
    <section className='testimonials ml-[250px] mr-[250px]' id='testimonials' data-aos="fade-in">
        <p className='testimonialTitle'>User Testimonials</p>
        <Marquee gradient={true} gradientColor='#18181b'>
          <Card className="testimonialCard">
            <CardHeader>
              <CardTitle className="cardTitleGradient">Best Bot Service</CardTitle>
              <CardDescription className="leading-1">"Qubify has been a great help to my server. I was able to find a bot that suited my needs and I was able to host it for free. I would recommend Qubify to anyone looking to expand their server."</CardDescription>
            </CardHeader>
            <CardFooter>
              <CardTitle className="testimonialUser">Clt @ Handmaid Studios</CardTitle>
            </CardFooter>
          </Card>

          <Card className="testimonialCard">
            <CardHeader>
              <CardTitle className="cardTitleGradient">Great Support</CardTitle>
              <CardDescription className="leading-1">"I had an issue with my bot and I reached out to Qubify support. They were able to help me with my issue in no time. I was very impressed with the support I received."</CardDescription>
            </CardHeader>
            <CardFooter>
              <CardTitle className="testimonialUser">Maffy @ TrentX</CardTitle>
            </CardFooter>
          </Card>

          <Card className="testimonialCard">
            <CardHeader>
              <CardTitle className="cardTitleGradient">Amazing Service</CardTitle>
              <CardDescription className="leading-1">"I was able to find a bot that suited my needs and I was able to host it for free. I would recommend Qubify to people looking to build a solid community."</CardDescription>
            </CardHeader>
            <CardFooter>
              <CardTitle className="testimonialUser">Fevnts @ Elevated Games </CardTitle>
            </CardFooter>
          </Card>

          <Card className="testimonialCard">
            <CardHeader>
              <CardTitle className="cardTitleGradient">Easily Scalable</CardTitle>
              <CardDescription className="leading-1">"I was really looking to start growing a large scale community. In search of bots, I found Qubify. This was one of the best discoveries of my life. Qubify has allowed me to transform my server."</CardDescription>
            </CardHeader>
            <CardFooter>
              <CardTitle className="testimonialUser">Parent @ Bladetool.cc</CardTitle>
            </CardFooter>
          </Card>

          <Card className="testimonialCard">
            <CardHeader>
              <CardTitle className="cardTitleGradient">Great Service</CardTitle>
              <CardDescription className="leading-1">"Me and my team were looking for a way to easily manage and speed up our servers productivity, with the help of Qubify we were able to accomplish this. Thanks Qubify!"</CardDescription>
            </CardHeader>
            <CardFooter>
              <CardTitle className="testimonialUser">YonyXx @ Vice Studios</CardTitle>
            </CardFooter>
          </Card>
        </Marquee>
      </section>
  )
}

export default Testimonials
import dynamic from 'next/dynamic'
const Testimonials = dynamic(() => import('@components/ui/Testimonials'), {ssr: false})
Australian Freshwater CrocodileOP
alrighty
@Ray try to not render this component and see if you still get that error?
Australian Freshwater CrocodileOP
nope same thing
root@qubify:~/landing# npm run build

> qubify@0.1.0 build
> next build

   â–² Next.js 14.1.0

   Creating an optimized production build ...
 ✓ Compiled successfully
   Skipping linting
 ✓ Checking validity of types
 ✓ Collecting page data
   Generating static pages (0/4)  [=   ]ReferenceError: document is not defined
    at createTag (/root/landing/.next/server/app/page.js:1:44729)
    at /root/landing/.next/server/app/page.js:1:57564
    at /root/landing/.next/server/app/page.js:1:57687
    at /root/landing/.next/server/app/page.js:1:60482
    at /root/landing/.next/server/app/page.js:1:44407
    at /root/landing/.next/server/app/page.js:1:44411
    at createCommonjsModule (/root/landing/.next/server/app/page.js:1:44053)
    at 5238 (/root/landing/.next/server/app/page.js:1:44301)
    at t (/root/landing/.next/server/webpack-runtime.js:1:127)
    at 4655 (/root/landing/.next/server/app/page.js:1:27153)

Error occurred prerendering page "/". Read more: https://nextjs.org/docs/messages/prerender-error

ReferenceError: document is not defined
    at createTag (/root/landing/.next/server/app/page.js:1:44729)
    at /root/landing/.next/server/app/page.js:1:57564
    at /root/landing/.next/server/app/page.js:1:57687
    at /root/landing/.next/server/app/page.js:1:60482
    at /root/landing/.next/server/app/page.js:1:44407
    at /root/landing/.next/server/app/page.js:1:44411
    at createCommonjsModule (/root/landing/.next/server/app/page.js:1:44053)
    at 5238 (/root/landing/.next/server/app/page.js:1:44301)
    at t (/root/landing/.next/server/webpack-runtime.js:1:127)
    at 4655 (/root/landing/.next/server/app/page.js:1:27153)
 ✓ Generating static pages (4/4)

> Export encountered errors on following paths:
        /page: /
@Australian Freshwater Crocodile nope same thing
Ray
which mean it should be something wrong in somewhere else
Australian Freshwater CrocodileOP
yes
@Australian Freshwater Crocodile Click to see attachment
Australian Freshwater CrocodileOP
this
this is the only file in the entire project using document
a npm package
for a marquee component
Ray
could you show the code for "/"?
Australian Freshwater CrocodileOP
@Australian Freshwater Crocodile Click to see attachment
Ray
oh maybe react-scroll
Australian Freshwater CrocodileOP
could it?
Ray
try comment it out
Australian Freshwater CrocodileOP
o
i think i found the problem
i had empty Link tags
probably was trying to find html in the link tags and it couldnt
ill try
jesus
not the problem
should I try not using react-scroll at all?
tried not using it at all, didnt work.
@Australian Freshwater Crocodile tried not using it at all, didnt work.
Ray
comment out the import too
Australian Freshwater CrocodileOP
still nope
i tried removing everything of react-fast-marquee including imports
didnt work
so now im really stumped
@Australian Freshwater Crocodile so now im really stumped
Ray
how does app/layout.tsx look like?
Australian Freshwater CrocodileOP
import "@styles/globals.css";
import AOS from 'aos';
import 'aos/dist/aos.css';
import { Button } from "@components/ui/button";

export const metadata = {
  title: "Qubify",
  description: "Coming soon",
};

export default function RootLayout({ children }) {
  return (
    <html lang="en">
      <head>
        <link rel="icon" href="/cdn/favicon.ico" sizes="any" />
      </head>
      <body>
        <div className='galaxy'></div>
      
        <main>
          {children}
        </main>
      </body>
    </html>
  );
}
Australian Freshwater CrocodileOP
no
uh
Ray
try to remove it
Australian Freshwater CrocodileOP
nope still same thing
once again, i can build without issue locally
my ubuntu server likes to be weird
hosted via digitalocean
@Australian Freshwater Crocodile my ubuntu server likes to be weird
Ray
does it build with just this code on "/"?
export default function Page() {
  return <div>home</div>
}
Australian Freshwater CrocodileOP
ill try
yes
it does
https://qubify.app/
reflects on site too
@Australian Freshwater Crocodile it does
Ray
Card and Button from shadcn?
Australian Freshwater CrocodileOP
what about it
add it?
Australian Freshwater CrocodileOP
import React from 'react'
import { Button } from '@components/ui/button'
import { Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle, } from "@/components/ui/card"
import AOS from 'aos';
import 'aos/dist/aos.css';
import { useEffect, useState } from 'react';
import Marquee from "react-fast-marquee";
import {Player, Controls} from '@lottiefiles/react-lottie-player';
import { Play } from 'lucide-react';
import { Footer } from '@components/ui/footer';
import { Link } from 'react-scroll';
import dynamic from 'next/dynamic'
const Testimonials = dynamic(() => import('@components/ui/Testimonials'), {ssr: false})
ignore
just to remember what I imported
ill try
Ray
just comment them out
Australian Freshwater CrocodileOP
yes
import { Button } from '@components/ui/button'
import { Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle, } from "@/components/ui/card"

export default function Page() {
  return <main>
    <Card>
      <CardHeader>
        <CardTitle>Card Title</CardTitle>
        <CardDescription>Card Description</CardDescription>
      </CardHeader>
      <CardContent>
        <p>Card Content</p>
      </CardContent>
      <CardFooter>
        <Button>Card Footer</Button>
      </CardFooter>
    </Card>
  </main>
}
i just added them here
and it builds
Australian Freshwater CrocodileOP
'use client';

import { Button } from '@components/ui/button'
import { Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle, } from "@/components/ui/card"
import { Link } from 'react-scroll';

export default function Page() {
  return <main>
    <Card>
      <CardHeader>
        <CardTitle>Card Title</CardTitle>
        <CardDescription>Card Description</CardDescription>
      </CardHeader>
      <CardContent>
        <p>Card Content</p>
      </CardContent>
      <CardFooter>
        <Link to="finalScroll" smooth={true} duration={1000}>
          <Button>Card Footer</Button>
        </Link>
      </CardFooter>
    </Card>
  </main>
}
yup
this builds
Australian Freshwater CrocodileOP
'use client';

import { Button } from '@components/ui/button'
import { Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle, } from "@/components/ui/card"
import { Link } from 'react-scroll';
import AOS from 'aos';
import 'aos/dist/aos.css';

export default function Page() {
  return <main>
    <Card data-aos="fade-in">
      <CardHeader>
        <CardTitle>Card Title</CardTitle>
        <CardDescription>Card Description</CardDescription>
      </CardHeader>
      <CardContent>
        <p>Card Content</p>
      </CardContent>
      <CardFooter>
        <Link to="finalScroll" smooth={true} duration={1000}>
          <Button>Card Footer</Button>
        </Link>
      </CardFooter>
    </Card>
  </main>
}
yup
builds
Australian Freshwater CrocodileOP
:sad:
@Australian Freshwater Crocodile <:sad:1158017156299100290>
Ray
try add Testimonials and use dynamic to import it
Australian Freshwater CrocodileOP
'use client';

import { Button } from '@components/ui/button'
import { Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle, } from "@/components/ui/card"
import { Link } from 'react-scroll';
import AOS from 'aos';
import 'aos/dist/aos.css';
import dynamic from 'next/dynamic'
const Testimonials = dynamic(() => import('@components/ui/Testimonials'), {ssr: false})

export default function Page() {
  return <main>
    <Card>
      <CardHeader>
        <CardTitle>Card Title</CardTitle>
        <CardDescription>Card Description</CardDescription>
      </CardHeader>
      <CardContent>
        <p>Card Content</p>
      </CardContent>
      <CardFooter>
        <Link to="finalScroll" smooth={true} duration={1000}>
          <Button>Card Footer</Button>
        </Link>
      </CardFooter>
    </Card>

    <Testimonials />
  </main>
}
built
try add back all the content
Australian Freshwater CrocodileOP
what exactly do you mean by content
@Australian Freshwater Crocodile Click to see attachment
Ray
the components here
everything inside the main tag
Australian Freshwater CrocodileOP
found the problem
holy shit
Australian Freshwater CrocodileOP
import {Player, Controls} from '@lottiefiles/react-lottie-player';
import { Play } from 'lucide-react';
import { Footer } from '@components/ui/footer';
Answer
Australian Freshwater CrocodileOP
removed these imports
or could be lottie
Australian Freshwater CrocodileOP
https://qubify.app/
check it out
ignore testimonial gradient
Ray
nice
Australian Freshwater CrocodileOP
appreciate the help my friend
life saver
Ray
no prob