Next.js Discord

Discord Forum

how to only import a package on client side? i am getting this error :

Answered
Common Black-Hawk posted this in #help-forum
Open in Discord
Common Black-HawkOP
⨯ node_modules/phaser/src/polyfills/requestVideoFrame.js (3:0) @ eval
⨯ ReferenceError: HTMLVideoElement is not defined
Answered by joulev
if you move that entire page.tsx to a separate component, then import that component like so
// page.tsx
import dynamic from "next/dynamic";

const Game = dynamic(() => import("./game").then((m) => m.default), {
  ssr: false,
  loading: () => <p>Loading game...</p>,
});

export default function Page() {
  return <Game />;
}

then it works
View full answer

26 Replies

riský
is the page that you imported this from a client component ('use client') as thats the best way to make it client - and what joulev send...
joulev
ReferenceError: HTMLVideoElement is not defined
this requires more than a client component, this requires disabling server-side (pre)rendering
and ssr: false works in both server components and server components
so no need to do any "use client" here
riský
ahh sounds good, i just read the client side part and thought it may be used in a useffect, but your answer makes sense
Common Black-HawkOP
i did all 
'use client';

import dynamic from 'next/dynamic';
import React, { useEffect, useState } from 'react';

const GameComponent = dynamic(() => import('@/components/game'), {
  ssr: false,
});
export default function Game() {
  return <>{window && <GameComponent />}</>;
}


but the same error persist...
Common Black-HawkOP
when i build it happend Generating static pages (4/5) [= ]
ReferenceError: HTMLVideoElement is not defined
joulev
Make a reproduction repository
Common Black-HawkOP
sure! i found the error... i am importing class and this class is on the server side... i need to fix that... i did this:
const GameScene = dynamic(() => import('./scene'), {
ssr: false,
});

but it return Uncaught TypeError: Cannot read properties of undefined (reading 'settings')
https://github.com/toguvr/war_game
to help u with the time, the problem in on GameScene
joulev
Ohh… this is a pretty phaser-heavy code. I don’t know phaser so I’m afraid I can’t help, sorry
Maybe you should ask this in a phaser support server
Common Black-HawkOP
they told me to ask here ahahhaha, because the problem isnt on phaser, the problem is how to import the gamescene without ssr
Common Black-HawkOP
i only need to can run npm run build
joulev
Hmm ok I’ll try tomorrow when I open my laptop
@Common Black-Hawk they told me to ask here ahahhaha, because the problem isnt on phaser, the problem is how to import the gamescene without ssr
joulev
if you move that entire page.tsx to a separate component, then import that component like so
// page.tsx
import dynamic from "next/dynamic";

const Game = dynamic(() => import("./game").then((m) => m.default), {
  ssr: false,
  loading: () => <p>Loading game...</p>,
});

export default function Page() {
  return <Game />;
}

then it works
Answer
joulev
Common Black-HawkOP
Huuuum I will try tomorrow! Ty!!
Could u do a pr? Only to me see what u did?
joulev
sure
Common Black-HawkOP
Ty vm
joulev
pr made
Common Black-HawkOP
Worked! Thank you very much!!