"window" is not available during server side rendering - GATSBY (only when compiled is run)

[darwinva97]

I am trying to run the compiler of my application made with Gatsby and mpegts.js but I get this error. I should add that there are no errors with the Gatsby development server, only in the compilation.

I have noticed that it is based on flv.js. I have tried to do it with that library even though it no longer has constant maintenance and I get a similar error: "self is not defined" and a similar output. I'll create the issue anyway in flv.js and comment on its link here.

const Video = () => {
    const videoRef = useRef(null)
    useEffect(() => {
        if(videoRef && videoRef.current) {
            const video = videoRef.current
            var player = mpegts.createPlayer({
                type: 'flv',
                isLive: true,
                url: API_STREAM
            });
            player.attachMediaElement(video);
            player.load();
            player.play();
        }
    }, [videoRef])

    return  <video ref={videoRef}></video>
}

versions: node: v16.3.0 npm: 7.18.1 yarn: 1.22.10

package.json:

{
  "name": "darwin-va",
  "version": "1.0.0",
  "private": true,
  "description": "DarwinVA",
  "author": "Darwin Vilcachagua Ayala",
  "keywords": [
    "gatsby"
  ],
  "scripts": {
    "develop": "gatsby develop -p 3033",
    "start": "gatsby develop -p 3033",
    "build": "gatsby build",
    "serve": "gatsby serve",
    "clean": "gatsby clean"
  },
  "dependencies": {
    "@mdx-js/mdx": "^1.6.22",
    "@mdx-js/react": "^1.6.22",
    "flv.js": "^1.5.0",
    "gatsby": "^3.3.1",
    "gatsby-plugin-gatsby-cloud": "^2.4.0",
    "gatsby-plugin-google-analytics": "^3.4.0",
    "gatsby-plugin-image": "^1.4.0",
    "gatsby-plugin-layout": "^2.4.0",
    "gatsby-plugin-manifest": "^3.4.0",
    "gatsby-plugin-mdx": "^2.4.0",
    "gatsby-plugin-offline": "^4.4.0",
    "gatsby-plugin-react-helmet": "^4.4.0",
    "gatsby-plugin-sharp": "^3.4.0",
    "gatsby-plugin-sitemap": "^4.0.0",
    "gatsby-remark-images": "^5.1.0",
    "gatsby-source-filesystem": "^3.4.0",
    "gatsby-transformer-remark": "^4.1.0",
    "gatsby-transformer-sharp": "^3.4.0",
    "mpegts.js": "^1.6.7",
    "react": "^17.0.1",
    "react-dom": "^17.0.1",
    "react-helmet": "^6.1.0",
    "react-icons": "^4.2.0",
    "react-responsive-masonry": "^2.1.2",
    "socket.io-client": "^4.0.2"
  },
  "main": "index.js",
  "license": "MIT"
}

Full output when executing "yarn build": output.txt

[darwinva97]

Similar issue in flv.js: https://github.com/bilibili/flv.js/issues/565

[xqq]

I'm not familiar with Server-side rendering. Could you comment this line and then recompile the library (npm run build), and then compile with Gatsby?

https://github.com/xqq/mpegts.js/blob/master/src/mpegts.js#L32

[xqq]

https://github.com/xqq/mpegts.js/blob/master/src/mpegts.js#L19

Also the import code should also be commented, AFAIK

[FredZeng]

I would suggest using mpegts.js as an external script, it might take more efforts to adapt current codes for SSR.