Video.js in App Route - window is not defined

[mufteev]

Link to the code that reproduces this issue

https://codesandbox.io/p/github/mufteev/nextjs-videojs-app-bug/main

To Reproduce

1. pnpm build
2. pnpm start

Current vs. Expected behavior

Current
Catch Uncaught Error: Uncaught ReferenceError: window is not defined in console and not work video.js
Cloned an example from a folder https://github.com/vercel/next.js/tree/canary/examples/with-videojs and ported to App Router
I get an error when using App Router in 14.1.0 (latest), but if I change the version to ^13.5.6 - Video.js worked.

Expected
Video.js libraries initialized and mount component similar like previous major version

It is worth noting that everything works fine in dev mode, and the bug itself occurs in production

Provide environment information

Operating System:
  Platform: linux
  Arch: x64
  Version: #15-Ubuntu SMP PREEMPT_DYNAMIC Tue Jan  9 17:03:36 UTC 2024
Binaries:
  Node: 21.6.1
  npm: 10.2.4
  Yarn: N/A
  pnpm: 8.15.1
Relevant Packages:
  next: 14.1.0
  eslint-config-next: N/A
  react: 18.2.0
  react-dom: 18.2.0
  typescript: 5.3.3
Next.js Config:
  output: N/A

Which area(s) are affected? (Select all that apply)

App Router

Which stage(s) are affected? (Select all that apply)

next start (local)

Additional context

I tested my reproduction in 14.1.1-canary.38 and and I still got the error:

blob:https://ly5p9t-3000.csb.app/b8589df3-9974-4a07-9038-ff100f3439fd:545 Uncaught ReferenceError: window is not defined
blob:https://ly5p9t-3000.csb.app/e2588c9a-dda0-447c-bc9c-69f532a83de7:6147 Uncaught ReferenceError: window is not defined
blob:https://ly5p9t-3000.csb.app/2f11b57f-873e-410d-b799-d7e1b46807a6:6147 Uncaught ReferenceError: window is not defined

Link github reproduction: nextjs-videojs-app-bug

[hc0503]

Hi @mufteev , you should import the component as dynamic with ssr: false.

const Player = dynamic(() => import("../components/Player"), {ssr: false})

The Player component should be export default.

[mufteev]

Hi @hc0503, i update reproduction https://codesandbox.io/p/github/mufteev/nextjs-videojs-app-bug/main

import dynamic from "next/dynamic";
const Player = dynamic(() => import("../components/Player"), {
  ssr: false,
});

But... it didn't help

[hc0503]

Hi @hc0503, i update reproduction https://codesandbox.io/p/github/mufteev/nextjs-videojs-app-bug/main

import dynamic from "next/dynamic";
const Player = dynamic(() => import("../components/Player"), {
  ssr: false,
});

But... it didn't help

@mufteev , Did you export Player component as default? windows undefined error doesn't occurs in my end.

[mufteev]

component as default

@hc0503

Yep, sorry i made changes to the repository, but did not apply it. You now see changes with dynamic import in https://codesandbox.io/p/github/mufteev/nextjs-videojs-app-bug/main

Import without SSR not help.

This bug is similar to #60920 or #60644

[Laityned]

Nextjs app directory has strict mode by default enabled. Therefore, the videojs player is not loading properly.
The videojs docs for react are updated to tackle the problem in strictmode, check those out:

PR
Docs

Following their guide, you will also not have a window is not defined error in production

[mufteev]

No, I still think it's not about React 18 (strictMode as say @Laityned) or the import method (dynamic + !SSR @hc0503 )

Because I've downgraded the version to Next@14.0.0 and reproduction start worked!

Test version:

• 14.0.0 - worked
• 14.0.5-canary.19 - worked
• 14.1.0 - NOT worked

P.S. this bug is definitely not related to React 18, because at the very beginning I specified version 13.5.6 - it also used React 18 (this can be seen from the commits in the reproduction)

[Laityned]

You are indeed right!

However, following the other approach to load videojs, you can get it working in 14.1.0:
Working example

[Laityned]

I tried to narrow it down to a particular version:

14.0.5-canary.19 is still working
14.0.5-canary.20 is not working

[KJ-Chiu]

For me, using mp4 works but throw ReferenceError: window is not defined when using application/x-mpegURL

video.js@8.10.0
next@14.1.0

  const videoJsOptions = {
    controls: false,
    responsive: true,
    full: true,
    liveui: isLive,
    sources: [{ src, type: isLive ? "application/x-mpegURL" : "video/mp4" }],
  };

[KJ-Chiu]

downgrade next to 14.0.5-canary.19 works for me

[kmvan]

I got Uncaught Error: Element type is invalid. Received a promise that resolves to: undefined. Lazy element type must resolve to a class or function. at mountLazyComponent (webpack-internal:///(/app-pages-browser)/./node_modules/.pnpm/next@14.1.0_react-dom@18.2.0_react@18.2.0/node_modules/next/dist/compiled/react-dom/cjs/react-dom.development.js:14585:19)

[JesseSinivuori]

The window object is not available in server components. The Player components is a client component, but idk why sometimes even that doesn't help. You can do this client check trick in Player component and just return null if isClient is not true.

[mulfyx]

const Player = dynamic(
   () => import("../components/Player").then((mod) => ({ default: mod.Player }),
   { ssr: false },
);

[github-actions]

This closed issue has been automatically locked because it had no new activity for 2 weeks. If you are running into a similar issue, please create a new issue with the steps to reproduce. Thank you.