NextJS Prerender/build Error - Works fine in Dev, breaks in Build

Question

I am building a portfolio website in NextJS and everything is working fine locally.

When I try to run npm run build, I get a Prerender Error. The documentation didn't really help.

Here's the error:

Error occurred prerendering page "/". Read more:

ReferenceError: location is not defined at 8550 (/Users/rossritchie/code/react-portfolio/.next/server/app/page.js:1:24220) at t (/Users/rossritchie/code/react-portfolio/.next/server/webpack-runtime.js:1:127) at 7853 (/Users/rossritchie/code/react-portfolio/.next/server/app/page.js:1:13283) at t (/Users/rossritchie/code/react-portfolio/.next/server/webpack-runtime.js:1:127) at 6239 (/Users/rossritchie/code/react-portfolio/.next/server/app/page.js:1:2765) at t (/Users/rossritchie/code/react-portfolio/.next/server/webpack-runtime.js:1:127) at 9079 (/Users/rossritchie/code/react-portfolio/.next/server/app/page.js:6:97578) at Object.t [as require] (/Users/rossritchie/code/react-portfolio/.next/server/webpack-runtime.js:1:127) at require (/Users/rossritchie/code/react-portfolio/node_modules/next/dist/compiled/next-server/app-page.runtime.prod.js:16:18365) at I (/Users/rossritchie/code/react-portfolio/node_modules/next/dist/compiled/next-server/app-page.runtime.prod.js:12:94362) ✓ Generating static pages (5/5)

Export encountered errors on following paths:

Not sure why I'm getting this error on build - from what I've read this happens where there is cross page navigation but its a simple/static webpage (although one of the libraries accesses 'Embla API?).

file structure attached.

'use client'
import Image from "next/image";
import Head from "next/head";
import {BsFillMoonStarsFill} from 'react-icons/bs';
import {AiFillLinkedin} from "react-icons/ai";
import { FaGithub } from "react-icons/fa";
import headshot from '../../public/rr-head-shot.jpg';
import css from '../../public/dev-icons/css.png';
import aws from '../../public/dev-icons/aws.png';
import bootstrap from '../../public/dev-icons/bootstrap.png';
import express from '../../public/dev-icons/express.png';
import github from '../../public/dev-icons/github.png';
import html from '../../public/dev-icons/html.png';
import js from '../../public/dev-icons/js.png';
import mongodb from '../../public/dev-icons/mongodb.png';
import next from '../../public/dev-icons/next.png';
import node from '../../public/dev-icons/node.png';
import postgresql from '../../public/dev-icons/postgresql.png';
import python from '../../public/dev-icons/python.png';
import react from '../../public/dev-icons/react.png';
import tailwind from '../../public/dev-icons/tailwind.png';
import { useClient } from 'next/client';
import { useState, useRef, useEffect } from "react";
import { motion } from "framer-motion";
import { TypeAnimation } from 'react-type-animation';
import { red } from "tailwindcss/colors";
import {EmblaCarousel} from './components/EmblaCarousel';
import { useInView } from "react-intersection-observer";



export default function Home() {
  
  const [darkMode, setDarkMode] = useState(false);
  const [textColor, setTextColor] = useState('black');
  const [fontWeight, setFontWeight] = useState('normal');
  const [animationTriggered, setAnimationTriggered] = useState(false);
  const {ref, inView} = useInView({
    triggerOnce: true,
    threshold: 0.1,
  });
  

  

  useEffect(() => {
    if (inView && !animationTriggered) {
      setAnimationTriggered(true);
    }
  }, [inView, animationTriggered]);

  const CURSOR_CLASS_NAME = 'custom-type-animation-cursor';
  
  

  

  return (
    
      
      
        Portfolio
        
        
      
      

      
        
        
          
            
              R . R
            
            
              
                
                   setDarkMode(!darkMode)} className="cursor-pointer text-2xl"/>
                
                
                  Intro
                  
                
                
                  About
                  
                
                
                  Projects
                  
                
                
                  Skills
                  
                
                
                  CV
                  
                
              
            
          
     

      
        
          
            Hello, my name is 
            Ross Ritchie
            I am a  
                
                   setTextColor('#14b8a6'),
                      () => setFontWeight('Bold'),
                      3000,
                      ' Software developer.',                  
                      (el) => el.classList.remove('custom-type-animation-cursor'),                
                    ]}
                    wrapper="span"
                    speed={50}
                    style={{  display: 'inline-block' }}
                    class="custom-type-animation-cursor"
                    repeat={0}
                  />
                

                
            Based in Sydney
                     
                        
          
          
            
              
            
          
        
                
          
                        
          
          
                        
          
        
         
            

  
      
        
        Chat GP-ME
      
      
        
          
            User
            
              {animationTriggered && (
                 el.classList.remove('custom-type-animation-cursor'),
                  ]}
                  speed={{ type: 'keyStrokeDelayInMs', value: 30 }}
                  omitDeletionAnimation={true}
                  repeat={0}
                />
              )}
            
            Ross
            
              {animationTriggered && (
                 el.classList.remove('custom-type-animation-cursor'),
                  ]}
                  speed={{ type: 'keyStrokeDelayInMs', value: 30 }}
                  omitDeletionAnimation={true}
                  repeat={0}
                />
              )}
            
          
        
        
      
    

                  
      
        
          Projects
        
        
          
          
      
                
                                   
    
      
        
          Skills                                        
        
        
                      
              
                                
                          
            
              
            
            
              
            
            
              
            
            
              
            
            
              
            
            
              
            
            
              
            
            
              
            
            
              
            
            
              
            
            
              
            
            
              
            
            
              
            
            {/* 
              
             */}
          
        
      
      
    

                
        
      
    
  );
}

EmblaCarousel.jsx:

import React, { useCallback, useEffect } from 'react'
import useEmblaCarousel from 'embla-carousel-react'
import { BsChevronCompactLeft, BsChevronCompactRight } from "react-icons/bs";

export const EmblaCarousel = () => {
  const [emblaRef, emblaApi] = useEmblaCarousel()

  useEffect(() => {    
    if (emblaApi) {
      
    }
  }, [emblaApi]);

  const scrollPrev = useCallback(() => {
    if (emblaApi) emblaApi.scrollPrev()
  }, [emblaApi])

  const scrollNext = useCallback(() => {
    if (emblaApi) emblaApi.scrollNext()
  }, [emblaApi])

  return (
    
      
        

          
            
              
            
            
              
                AFFORDABLE COMMUTE FINDER
                
                  React App that calculates travel time (by car and public transport) between the users place 
                  of work and various recently sold properties. The results are grouped according to 15 minute 
                  time bands and sorted by affordability.
                
                
                  This app uses the travel time and openstreet APIs to calculate co-ordinates and travel time 
                  for 1000s of properties
                
                            
            
          

          
            
              
            
              
            
            
              
                DOMESTIC SUPPLY MONITORING APP
                
                  Node.js App that links to MongDB that allows the user to monitor groceries and activities that
                   depend on that supply.
                                
                
                  A shopping list can be generated for items that are running low. 
                
                            
            
          

          
            
              
            
            
              
                PERSONAL PORTFOLIO
                
                  Personal portfolio website created using Next.js/React. Styling done using tailwind, TypeAnimation 
                  and embla carousel.  
                                
                            
            
                 
        
      
      
      
    
  )
}

File structure

I tried importing:

import { useRouter } from 'next/router'

and including:

const router = useRouter();

also tried:

useEffect(() => {
    const loadRouter = async () => {
      const { useRouter } = await import('next/router');
      const router = useRouter();      
    };
    loadRouter();
  }, []);

Neither of these worked. File structure

NextJS Prerender/build Error - Works fine in Dev, breaks in Build

Answers (0)

Related Questions