ReferenceError: document is not defined at getContainer

[Spiralis]

Version

4.1.17

Description

Error when trying to use the component in a next.js application.

Steps

Simplified code from the live version

import React from 'react';
import ReactJkMusicPlayer, { ReactJkMusicPlayerProps } from 'react-jinke-music-player'

// Note: Cannot do this in next.js apps. Haven't gotten to the point of trying to remedy it, but will do that soon. 
// BTW: next.js handles css-imports fine for files named `*.module.css` (using CSS modules)
//import 'react-jinke-music-player/assets/index.css'

const audioList1 = [
    {
        name: 'Despacito',
        singer: 'Luis Fonsi',
        cover:
            'http://res.cloudinary.com/alick/image/upload/v1502689731/Despacito_uvolhp.jpg',
        musicSrc:
            'http://res.cloudinary.com/alick/video/upload/v1502689683/Luis_Fonsi_-_Despacito_ft._Daddy_Yankee_uyvqw9.mp3',
        // support async fetch music src. eg.
        // musicSrc: async () => {
        //   return await fetch('/api')
        // },
    },
    {
        name: 'Dorost Nemisham',
        singer: 'Sirvan Khosravi',
        cover:
            'https://res.cloudinary.com/ehsanahmadi/image/upload/v1573758778/Sirvan-Khosravi-Dorost-Nemisham_glicks.jpg',
        musicSrc:
            'https://res.cloudinary.com/ehsanahmadi/video/upload/v1573550770/Sirvan-Khosravi-Dorost-Nemisham-128_kb8urq.mp3',
    },
]

const options: ReactJkMusicPlayerProps = {
    // audio lists model
    audioLists: audioList1,

    // default play index of the audio player  [type `number` default `0`]
    defaultPlayIndex: 0,

    // if you want dynamic change current play audio you can change it [type `number` default `0`]
    // playIndex: 0,

    // color of the music player theme    [ type: 'light' | 'dark' | 'auto'  default `dark` ]
    theme: 'auto',

    // Specifies movement boundaries. Accepted values:
    // - `parent` restricts movement within the node's offsetParent
    //    (nearest node with position relative or absolute), or
    // - a selector, restricts movement within the targeted node
    // - An object with `left, top, right, and bottom` properties.
    //   These indicate how far in each direction the draggable
    //   can be moved.
    // Ref: https://github.com/STRML/react-draggable#draggable-api
    bounds: 'body',

    // Replace a new playlist with the first loaded playlist
    // instead of adding it at the end of it.
    // [type `boolean`, default `false`]
    clearPriorAudioLists: false,

    // Play your new play list right after your new play list is loaded turn false.
    // [type `boolean`, default `false`]
    autoPlayInitLoadPlayList: false,

    // Whether to load audio immediately after the page loads.  [type `Boolean | String`, default `false`]
    // "auto|metadata|none" "true| false"
    preload: false,

    // Whether the player's background displays frosted glass effect  [type `Boolean`, default `false`]
    glassBg: false,

    // The next time you access the player, do you keep the last state  [type `Boolean` default `false`]
    remember: false,

    // The Audio Can be deleted  [type `Boolean`, default `true`]
    remove: true,

    // audio controller initial position    [ type `Object` default '{top:0,left:0}' ]
    defaultPosition: {
        right: 100,
        bottom: 120,
    },

    defaultPlayMode: 'order',

    // if you want dynamic change current play mode you can change it
    // [type`order | orderLoop | singleLoop | shufflePlay`, default `order`]
    // playMode: 'order',

    // audio mode        mini | full          [type `String`  default `mini`]
    mode: 'full',

    /**
     * [ type `Boolean` default 'false' ]
     * The default audioPlay handle function will be played again after each pause, If you only want to trigger it once, you can set 'true'
     */
    once: false,

    // Whether the audio is played after loading is completed. [type `Boolean` default 'true']
    autoPlay: false,

    // Whether you can switch between two modes, full => mini  or mini => full   [type 'Boolean' default 'true']
    toggleMode: true,

    // audio cover is show of the "mini" mode [type `Boolean` default 'true']
    showMiniModeCover: true,

    // audio playing progress is show of the "mini"  mode
    showMiniProcessBar: false,

    // audio controller is can be drag of the "mini" mode     [type `Boolean` default `true`]
    drag: true,

    // drag the audio progress bar [type `Boolean` default `true`]
    seeked: true,

    // Display chrome media session.  [type `Boolean` default `false`]
    showMediaSession: true,

    // Displays the audio load progress bar.  [type `Boolean` default `true`]
    // showProgressLoadBar: true,

    // play button display of the audio player panel   [type `Boolean` default `true`]
    showPlay: true,

    // reload button display of the audio player panel   [type `Boolean` default `true`]
    showReload: true,

    // download button display of the audio player panel   [type `Boolean` default `true`]
    // showDownload: true,

    // loop button display of the audio player panel   [type `Boolean` default `true`]
    showPlayMode: true,

    // theme toggle switch  display of the audio player panel   [type `Boolean` default `true`]
    showThemeSwitch: true,

    // lyric display of the audio player panel   [type `Boolean` default `false`]
    showLyric: true,

    // destroy player button display  [type `Boolean` default `false`]
    showDestroy: true,

    // Extensible custom content       [type 'Array' default '-' ]
    extendsContent: null,

    // default volume of the audio player [type `Number` default `1` range `0-1`]
    defaultVolume: 1,

    // playModeText show time [type `Number(ms)` default `700`]
    playModeShowTime: 600,

    // Whether to try playing the next audio when the current audio playback fails [type `Boolean` default `true`]
    loadAudioErrorPlayNext: true,

    // Auto hide the cover photo if no cover photo is available [type `Boolean` default `false`]
    autoHiddenCover: false,

    // Play and pause audio through blank space [type `Boolean` default `false`]
    spaceBar: true,

    // international [type `en_US | zh_CN | Object` default `en_US`]
    //locale: Locale.en_US,

    // Enable responsive player, auto toggle desktop and mobile [type `Boolean` default `true`]
    responsive: true,
}

export default function Player() {
    return <>
        <ReactJkMusicPlayer {...options} />
    </>
}

When trying to instantiate the component it fails with error in console.

Reproduce Link

Steps to Reproduce

Expected Behavior

A rendered player.

Current Behavior

Error in console.

ReferenceError: document is not defined
at getContainer (D:\src\FLEXY\Listn\app\node_modules\react-jinke-music-player\lib\index.js:2208:5)
at ReactJkMusicPlayer.render (D:\src\FLEXY\Listn\app\node_modules\react-jinke-music-player\lib\index.js:1882:23)
at processChild (D:\src\FLEXY\Listn\app\node_modules\react-dom\cjs\react-dom-server.node.development.js:3450:18)
at resolve (D:\src\FLEXY\Listn\app\node_modules\react-dom\cjs\react-dom-server.node.development.js:3270:5)
at ReactDOMServerRenderer.render (D:\src\FLEXY\Listn\app\node_modules\react-dom\cjs\react-dom-server.node.development.js:3755:22)
at ReactDOMServerRenderer.read (D:\src\FLEXY\Listn\app\node_modules\react-dom\cjs\react-dom-server.node.development.js:3692:29)
at renderToString (D:\src\FLEXY\Listn\app\node_modules\react-dom\cjs\react-dom-server.node.development.js:4300:27)
at renderPage (D:\src\FLEXY\Listn\app\node_modules\next\dist\next-server\server\render.js:48:686)
at Object.ctx.renderPage (D:\src\FLEXY\Listn\app.next\server\pages_document.js:1205:26)
at Function.getInitialProps (D:\src\FLEXY\Listn\app.next\server\pages_document.js:312:19)

System information

Windows 10

  "dependencies": {
    "@material-ui/core": "^4.11.0",
    "@material-ui/icons": "^4.9.1",
    "clsx": "^1.1.1",
    "next": "^9.5.2",
    "next-pwa": "^3.1.3",
    "react": "^17.0.0-rc.0",
    "react-dom": "^17.0.0-rc.0",
    "react-jinke-music-player": "^4.17.1"
  },
  "devDependencies": {
    "@types/next": "^9.0.0",
    "@types/node": "^14.6.1",
    "@types/react": "^16.9.48",
    "@types/react-dom": "^16.9.8",
    "typescript": "^4.0.2"
  }

Comments

[issue-label-bot]

Issue-Label Bot is automatically applying the label bug to this issue, with a confidence of 0.85. Please mark this comment with 👍 or 👎 to give our bot feedback!

Links: app homepage, dashboard and code for this bot.

[Spiralis]

It seems that the issue is that Next.js tries to server-side render the component. And, when server-side-rendering there is no document.

The best solution would be to try to allow the component to be server-side rendered too, that is - not depend on documentor window.

I have found a workaround though. In Next.js you can turn off server-side rendering for given components, so I did this:

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

This will make sure that the PlayerWithNoSSR component is only rendered in the browser, and not server-side.

The second issue with the css import is solved by moving the CSS import to the _app.tsx/jsx file - where global imports are allowed. I think a better solution would be for that file to be named index.module.css, which shouldn't hurt any normal users, but would be helpful to anyone using CSS modules based imports. Or, on build make a duplicate of the file to index.module.css.

[lijinke666]

Thank you very much for your answer, I'm not familiar with Next.js, so i think this is a good pratice

I have found a workaround though. In Next.js you can turn off server-side rendering for given components, so I did this:

Or, on build make a duplicate of the file to index.module.css.

About this issue, i will add duplicate index.module.css to bundle files in next version

[lijinke666]

#143