Plyr-react library with Next.js 14 #60862

timomedia · 2024-01-19T07:19:53Z

Link to the code that reproduces this issue

https://codesandbox.io/p/sandbox/hidden-frost-mpdjj?file=%2Fsrc%2FHLS.tsx

To Reproduce

I am using plyr-react in a Next.js 14.1.0 environment and pages using plyr-react (5.3.0) fail to load or build with errors of type

Current vs. Expected behavior

⨯ node_modules\plyr\dist\plyr.min.mjs (1:7201) @ document
 ⨯ ReferenceError: document is not defined
    at __webpack_require__ (\.next\server\webpack-runtime.js:33:42)
    at __webpack_require__ (\.next\server\webpack-runtime.js:33:42)
    at eval (./components/player.tsx:11:68)
    at (ssr)/./components/player.tsx (\.next\server\app\[movie]\page.js:249:1)
    at __webpack_require__ (\.next\server\webpack-runtime.js:33:42)
    at eval (./app/[movie]/movieDetail.tsx:7:76)
    at (ssr)/./app/[movie]/movieDetail.tsx (\.next\server\app\[movie]\page.js:194:1)
    at __webpack_require__ (\.next\server\webpack-runtime.js:33:42)
null

Verify canary release

I verified that the issue exists in the latest Next.js canary release

Provide environment information

Operating System:
  Platform: win32
  Arch: x64
  Version: Windows 10 Pro
  Node: 20.10.0
  npm: N/A
  Yarn: N/A
  pnpm: N/A
Relevant Packages:
  next: 14.1.0
  eslint-config-next: 14.1.0
  react: 18.2.0
  react-dom: 18.2.0
  typescript: 5.2.2
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 dev (local), next build (local)

Additional context

I didn't have this problem when I worked on my site with next.js 14.0.0, but now I upgraded everything I have it all the time, this blocks the build.

The text was updated successfully, but these errors were encountered:

brkcrdk · 2024-01-20T08:51:16Z

You got to import plyr dynamically.

johnsi15 · 2024-01-23T19:24:36Z

Link to the code that reproduces this issue

https://codesandbox.io/p/sandbox/hidden-frost-mpdjj?file=%2Fsrc%2FHLS.tsx

To Reproduce

I am using plyr-react in a Next.js 14.1.0 environment and pages using plyr-react (5.3.0) fail to load or build with errors of type

Current vs. Expected behavior
⨯ node_modules\plyr\dist\plyr.min.mjs (1:7201) @ document
 ⨯ ReferenceError: document is not defined
    at __webpack_require__ (\.next\server\webpack-runtime.js:33:42)
    at __webpack_require__ (\.next\server\webpack-runtime.js:33:42)
    at eval (./components/player.tsx:11:68)
    at (ssr)/./components/player.tsx (\.next\server\app\[movie]\page.js:249:1)
    at __webpack_require__ (\.next\server\webpack-runtime.js:33:42)
    at eval (./app/[movie]/movieDetail.tsx:7:76)
    at (ssr)/./app/[movie]/movieDetail.tsx (\.next\server\app\[movie]\page.js:194:1)
    at __webpack_require__ (\.next\server\webpack-runtime.js:33:42)
null
Verify canary release

I verified that the issue exists in the latest Next.js canary release

Provide environment information
Operating System:
  Platform: win32
  Arch: x64
  Version: Windows 10 Pro
  Node: 20.10.0
  npm: N/A
  Yarn: N/A
  pnpm: N/A
Relevant Packages:
  next: 14.1.0
  eslint-config-next: 14.1.0
  react: 18.2.0
  react-dom: 18.2.0
  typescript: 5.2.2
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 dev (local), next build (local)

Additional context

I didn't have this problem when I worked on my site with next.js 14.0.0, but now I upgraded everything I have it all the time, this blocks the build.

Hi @timomedia I used Dynamic Imports as @brkcrdk mentioned, I'll leave you an example:

export function Video() {
  const [importedComponent, setImportedComponent] = useState<ReactElement | null>(null)

  useEffect(() => {
    const importComponent = async () => {
      const myModule = await import('plyr-react')
      const Plyr = myModule.default
      setImportedComponent(<Plyr {...plyrProps} />)
    }

    importComponent()
  }, [])

  return (
    <section className='aspect-video mx-16 mt-20 mb-28'>
      {importedComponent}
    </section>
  )
}

timomedia · 2024-01-24T01:16:16Z

Link to the code that reproduces this issue

https://codesandbox.io/p/sandbox/hidden-frost-mpdjj?file=%2Fsrc%2FHLS.tsx

To Reproduce

I am using plyr-react in a Next.js 14.1.0 environment and pages using plyr-react (5.3.0) fail to load or build with errors of type

Current vs. Expected behavior
⨯ node_modules\plyr\dist\plyr.min.mjs (1:7201) @ document
 ⨯ ReferenceError: document is not defined
    at __webpack_require__ (\.next\server\webpack-runtime.js:33:42)
    at __webpack_require__ (\.next\server\webpack-runtime.js:33:42)
    at eval (./components/player.tsx:11:68)
    at (ssr)/./components/player.tsx (\.next\server\app\[movie]\page.js:249:1)
    at __webpack_require__ (\.next\server\webpack-runtime.js:33:42)
    at eval (./app/[movie]/movieDetail.tsx:7:76)
    at (ssr)/./app/[movie]/movieDetail.tsx (\.next\server\app\[movie]\page.js:194:1)
    at __webpack_require__ (\.next\server\webpack-runtime.js:33:42)
null
Verify canary release

I verified that the issue exists in the latest Next.js canary release

Provide environment information
Operating System:
  Platform: win32
  Arch: x64
  Version: Windows 10 Pro
  Node: 20.10.0
  npm: N/A
  Yarn: N/A
  pnpm: N/A
Relevant Packages:
  next: 14.1.0
  eslint-config-next: 14.1.0
  react: 18.2.0
  react-dom: 18.2.0
  typescript: 5.2.2
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 dev (local), next build (local)

Additional context

I didn't have this problem when I worked on my site with next.js 14.0.0, but now I upgraded everything I have it all the time, this blocks the build.
Hi @timomedia I used Dynamic Imports as @brkcrdk mentioned, I'll leave you an example:
export function Video() {
  const [importedComponent, setImportedComponent] = useState<ReactElement | null>(null)

  useEffect(() => {
    const importComponent = async () => {
      const myModule = await import('plyr-react')
      const Plyr = myModule.default
      setImportedComponent(<Plyr {...plyrProps} />)
    }

    importComponent()
  }, [])

  return (
    <section className='aspect-video mx-16 mt-20 mb-28'>
      {importedComponent}
    </section>
  )
}

Thank you

igoroalonge · 2024-02-20T04:51:35Z

Just import using the dynamic function like:

import dynamic from 'next/dynamic'
const Plyr = dynamic(() => import("plyr-react"), { ssr: false });

kwiromeo · 2024-04-08T00:49:28Z

I've found an easier way to fix it, just import using the dynamic function like:
import dynamic from 'next/dynamic'
const Plyr = dynamic(() => import("plyr-react"), { ssr: false });

This fixed my issue.

timneutkens · 2024-04-15T10:50:05Z

There's an issue on that library: chintan9/plyr-react#873. This is not a Next.js issue but an issue in the library used as it's reading document in the module scope. document is not available in server environments. Additionally this indicates that the library is not fully compatible with React as it tries to read/modify document outside of useEffect.

github-actions · 2024-04-30T00:04:19Z

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.

timomedia added the bug Issue was opened via the bug report template. label Jan 19, 2024

timneutkens closed this as completed Apr 15, 2024

github-actions bot added the locked label Apr 30, 2024

github-actions bot locked as resolved and limited conversation to collaborators Apr 30, 2024

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Plyr-react library with Next.js 14 #60862

Plyr-react library with Next.js 14 #60862

timomedia commented Jan 19, 2024 •

edited

Loading

brkcrdk commented Jan 20, 2024

johnsi15 commented Jan 23, 2024

Link to the code that reproduces this issue

To Reproduce

Current vs. Expected behavior

Verify canary release

Provide environment information

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

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

Additional context

timomedia commented Jan 24, 2024

Link to the code that reproduces this issue

To Reproduce

Current vs. Expected behavior

Verify canary release

Provide environment information

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

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

Additional context

igoroalonge commented Feb 20, 2024 •

edited

Loading

kwiromeo commented Apr 8, 2024

timneutkens commented Apr 15, 2024

github-actions bot commented Apr 30, 2024

Plyr-react library with Next.js 14 #60862

Plyr-react library with Next.js 14 #60862

Comments

timomedia commented Jan 19, 2024 • edited Loading

Link to the code that reproduces this issue

To Reproduce

Current vs. Expected behavior

Verify canary release

Provide environment information

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

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

Additional context

brkcrdk commented Jan 20, 2024

johnsi15 commented Jan 23, 2024

Link to the code that reproduces this issue

To Reproduce

Current vs. Expected behavior

Verify canary release

Provide environment information

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

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

Additional context

timomedia commented Jan 24, 2024

Link to the code that reproduces this issue

To Reproduce

Current vs. Expected behavior

Verify canary release

Provide environment information

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

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

Additional context

igoroalonge commented Feb 20, 2024 • edited Loading

kwiromeo commented Apr 8, 2024

timneutkens commented Apr 15, 2024

github-actions bot commented Apr 30, 2024

timomedia commented Jan 19, 2024 •

edited

Loading

igoroalonge commented Feb 20, 2024 •

edited

Loading