Next.js Discord

Discord Forum

Can build locally but same code gives error on Vercel

Unanswered
West African Crocodile posted this in #help-forum
Open in Discord
West African CrocodileOP
had added some new pages/components and get an error that seems to be in prerendering, but reverting pages listed doesn't clear it up.
ReferenceError: window is not defined
at new <anonymous> (/vercel/path0/.next/server/chunks/595.js:306:134266)
at /vercel/path0/.next/server/chunks/595.js:306:133744
at /vercel/path0/.next/server/chunks/595.js:306:37
at 30539 (/vercel/path0/.next/server/chunks/595.js:306:43)
at webpack_require (/vercel/path0/.next/server/webpack-runtime.js:25:43)
at 11711 (/vercel/path0/.next/server/chunks/464.js:27:74)
at webpack_require (/vercel/path0/.next/server/webpack-runtime.js:25:43)
at 67592 (/vercel/path0/.next/server/chunks/464.js:565:22)
at webpack_require (/vercel/path0/.next/server/webpack-runtime.js:25:43)
at 87800 (/vercel/path0/.next/server/app/dashboard/events/page.js:1540:14)
Error occurred prerendering page "/dashboard/events". Read more: https://nextjs.org/docs/messages/prerender-error
ReferenceError: window is not defined
at new <anonymous> (/vercel/path0/.next/server/chunks/595.js:306:134266)
at /vercel/path0/.next/server/chunks/595.js:306:133744
at /vercel/path0/.next/server/chunks/595.js:306:37
...
- info Generating static pages (4/6)
ReferenceError: window is not defined
at new <anonymous> (/vercel/path0/.next/server/chunks/595.js:306:134266)
...
Error occurred prerendering page "/dashboard". Read more: https://nextjs.org/docs/messages/prerender-error
ReferenceError: window is not defined
at new <anonymous> (/vercel/path0/.next/server/chunks/595.js:306:134266)
...
- info Generating static pages (6/6)
Export encountered errors on following paths:
/dashboard/events/page: /dashboard/events
/dashboard/page: /dashboard
Error: Command "npm run build" exited with 1

35 Replies

Clown
Show code where you are using "window"
Also are you using pages router or app router
West African CrocodileOP
I only use window in two spots...like
const VideoCheckInModal = ({ isOpen, onClose, selectedItems }) => {
const [checkInPrompt, setCheckInPrompt] = useState('How are you today?');
const [recordingDuration, setRecordingDuration] = useState(60);
const [countdownDuration, setCountdownDuration] = useState(15);

const handleStart = async () => {
// Handle your start video logic here
console.log('Starting video check-in with items...', selectedItems);

for (var item in selectedItems) {
let author = selectedItems[item]; // getAuth().currentUser.uid;
let command = "howareyou";
let detail = {customMessage: checkInPrompt, countdownDuration: countdownDuration, recordingDuration: recordingDuration};

await devicesCommands(author, detail, command);
}

window.alert("Video Check-In request sent to all devices.")
onClose();
};

return (
<Modal
open={isOpen}
onClose={onClose}
aria-labelledby="video-check-in-modal-title"
aria-describedby="video-check-in-modal-description"
>
<Box
...
</Box>
</Modal>
);
};

export default VideoCheckInModal
DirtyCajunRice | AppDir
all window calls need to be in a use effect
West African CrocodileOP
I believe it is using page routing.. I do not have an _app.js or _app.tsx file .. I do have useRouter imported on login page (src/app/page.jsx) and on the first post login page (src/app/dashboard/page.jsx)
so you need to wait to reference window until fully rendered
West African CrocodileOP
Thank you DirtyCajun Rice. but removing those window calls did not remove problem. I see i am using Next 13.4.5 and have /app directory, not a /pages directory, so I guess it is app router.
window is only an issue server side
maybe you arent fixing the window reference you think you are?
triple check your error message
West African CrocodileOP
the error messages would be much better if they could point to my source rather than vercel chunks..
Export encountered errors on following paths:
/dashboard/page: /dashboard
show me the code with your changes
West African CrocodileOP
const ZoomMeetingJoiner = ({ isOpen, onClose, selectedItems }) => {
const [meetingCode, setMeetingCode] = useState('');
const [meetingPassword, setMeetingPassword] = useState('');
const [errorMessage, setErrorMessage] = useState('');

const handleJoinNow = async () => {
if (meetingCode.trim() === '') {
setErrorMessage('Meeting Code cannot be blank.');
return;
}
setErrorMessage(''); // clear previous error messages

console.log('Joining with code:', meetingCode, 'and password:', meetingPassword);

for (var item in selectedItems) {
let author = selectedItems[item]; // getAuth().currentUser.uid;
let command = "joinZoomEvent";
let detail = { "zoomMeetingCode": meetingCode ?? null, "zoomPassword": meetingPassword ?? null };

await devicesCommands(author, detail, command);
}

onClose();
//window.alert("Video Check-In request sent to all devices.")
};
commented out window.alert
DirtyCajunRice | AppDir
can you wrap it in code blocks
West African CrocodileOP
there is another similar window.alert i also commented out
DirtyCajunRice | AppDir
so its easier to read
3 ` at the top and 3 at the bottom
West African CrocodileOP
const ZoomMeetingJoiner = ({ isOpen, onClose, selectedItems }) => {
    const [meetingCode, setMeetingCode] = useState('');
    const [meetingPassword, setMeetingPassword] = useState('');
    const [errorMessage, setErrorMessage] = useState('');

    const handleJoinNow = async () => {
        if (meetingCode.trim() === '') {
            setErrorMessage('Meeting Code cannot be blank.');
            return;
        }
        setErrorMessage(''); // clear previous error messages

        console.log('Joining with code:', meetingCode, 'and password:', meetingPassword);

        for (var item in selectedItems) {
            let author = selectedItems[item]; // getAuth().currentUser.uid;
            let command = "joinZoomEvent";
            let detail = { "zoomMeetingCode": meetingCode ?? null, "zoomPassword": meetingPassword ?? null };

            await devicesCommands(author, detail, command);
        }        

        onClose();
        //window.alert("Video Check-In request sent to all devices.")                
    };
DirtyCajunRice | AppDir
nice ok lemme look
and you dont have this issue in dev?
you should have the same window error
like if you build locally
West African CrocodileOP
i do not
DirtyCajunRice | AppDir
so you can run next build locally and it doesn’t happen?!
that… that makes no sense
West African CrocodileOP
yeah, and annoying. thought it might be vercel thing,
DirtyCajunRice | AppDir
i have seen some recent things with vercel build change on oct 3rd
check their github issues
West African CrocodileOP
thanks for your help.. i'll check that