Hls.js: SSR with Next.js error: self is not defined

[hoodsy]

import Hls from 'hls.js'

throws the following error for me when included in my Next.js build:

{ ReferenceError: self is not defined
    at getSelfScope (src/utils/get-self-scope.js:5:4)
    at Object.HlsEvents.MEDIA_ATTACHING (src/utils/logger.js:30:15)
    at __webpack_require__ (webpack:/webpack/bootstrap efa5788fc79df7e901a6:19:0)
    at Object.moduleNameReqExp (node_modules/hls.js/dist/hls.js:5862:14)
    at __webpack_require__ (webpack:/webpack/bootstrap efa5788fc79df7e901a6:19:0)
    at node_modules/hls.js/dist/hls.js:73:18
    at node_modules/hls.js/dist/hls.js:76:10
    at webpackUniversalModuleDefinition (webpack/universalModuleDefinition:3:0)
    at Object.<anonymous> (webpack/universalModuleDefinition:10:1)
    at Module._compile (module.js:660:30)
    at Object.Module._extensions..js (module.js:671:10)
    at Module.load (module.js:573:32)
    at tryModuleLoad (module.js:513:12)
    at Function.Module._load (module.js:505:3)
    at Module.require (module.js:604:17)
    at require (internal/module.js:11:18) sourceMapsApplied: true }

I pulled in the latest PR supporting universal builds (#1841), but still get the same error. I'm currently working around this issue by requiring hls.js in componenDidMount:

componentDidMount() {
  const Hls = require('hls.js')
}

[Korilakkuma]

I also tried React + Fluxible. And, the following code shows undefined.

import React from 'react';
import Hls from 'hls.js';

class HlsJs extends React.Component {
  constructor() {
    console.dir(Hls);  // -> `undefined`
  }

  componentDidMount() {
    console.dir(require('hls.js'));  // -> `Hls`
  }

  render() {
    console.dir(Hls);  // -> `undefined`
  }
}

I think that SSR support is not completely ...

[shubh4git]

I am getting the same error when building my angular 6 project with server side rendering

 ReferenceError: self is not defined
    at getSelfScope (/Users/a1xwabbu/Desktop/dist/server.js:166680:5)
    at Object.HlsEvents.MEDIA_ATTACHING (/Users/a1xwabbu/Desktop//dist/server.js:166424:91)
    at __webpack_require__ (/Users/a1xwabbu/Desktop/dist/server.js:166339:30)
    at Object.moduleNameReqExp (/Users/a1xwabbu/Desktop/dist/server.js:172166:14)
    at __webpack_require__ (/Users/a1xwabbu/Desktop/dist/server.js:166339:30)
    at /Users/a1xwabbu/Desktop/dist/server.js:166382:18
    at /Users/a1xwabbu/Desktop/dist/server.js:166385:10
    at webpackUniversalModuleDefinition (/Users/a1xwabbu/Desktop/dist/server.js:166317:20)
    at Object.<anonymous> (/Users/a1xwabbu/Desktop/dist/server.js:166319:3)
    at __webpack_require__ (/Users/a1xwabbu/Desktop/dist/server.js:23:30)
npm ERR! code ELIFECYCLE

[shubh4git]

@Korilakkuma Did you find any solution for this problem.

[tchakabam]

@hoodsy Hi! We have very recently merged to master a general solution for the SSR problem. Can you try and check if that works: https://github.com/video-dev/hls.js/pull/1841

Thanks!

[tchakabam]

You would need to use the canary version or wait for the next release to get this fix via npm, but you should be able to get it from current master.

[hoodsy]

@tchakabam I tried with #1841 and hls.js@canary before creating this issue

The error points to src/utils/get-self-scope.js which seems to be related to web workers

[tchakabam]

@hoodsy So this is another require-in-Node issue right?

The problem is that we expect self to be defined, since that works in Window and WebWorker. Also, the SSR guard we put should take care of not actually getting to that point in the code (see our webpack file).

Maybe you can experiment with the build toolchain to figure this out on your side, it's no Hls.js specific knowledge required, only webpack/UMD/JS stuff :)

[tchakabam]

Please figure out why this doesn't work for you: https://github.com/video-dev/hls.js/blob/master/webpack.config.js#L62

It does work for the people using Universal afaiu

@friday Any ideas how to fix that one? :)

[shubh4git]

Hey,
I have resolved this issue in my angular 6 ssr project .You can define
window by using domino object in your server file and it will worked.

On Thu, 16 Aug 2018, 20:43 Stephan Hesse, [e-mail] wrote:

Please figure out why this doesn't work for you:
https://github.com/video-dev/hls.js/blob/master/webpack.config.js#L62

It does work for the people using Universal afaiu

@friday https://github.com/friday Any ideas how to fix that one? :)

—
You are receiving this because you commented.
Reply to this email directly, view it on GitHub
https://github.com/video-dev/hls.js/issues/1863#issuecomment-413580531,
or mute the thread
https://github.com/notifications/unsubscribe-auth/AecBVx6kH90PDYthdYIoq3QnmYXT4Hanks5uRYwWgaJpZM4V1q4f
.

[tchakabam]

Yeah, that's what we told the people who asked us to fix this in our code in the first place. I still don't feel it's meaningful that a library like Hls.js has to take care of this, SSR environments should be able to do this somehow.

There is some discussion and explanations on why Domino is not supposed to be a good solution under the PR with the fix: https://github.com/video-dev/hls.js/pull/1841

[friday]

I don't think you all have the same problem. Most of you probably don't have the PR in your hls.js build? hls.js@canary didn't include the PR (#1841) until 0.10.2-canary.3976. That was 7 days ago, around the same time this issue was created.

With hls.[email protected] or a fresh hls.js@canary node -e 'console.log(require("hls.js"))' should print {} and not throw an error.

Please try this first and let me know if you still have the same issue.

Also please avoid dom-shimming. It's not safe to use. Unless you do a good job at shimming all the API's needed by your app it could cause this sort of issue to happen rather than fix them (see #1841).

@Korilakkuma
This is a different issue than the rest are having. Is this server or client-side? console.dir(Hls); or console.dir(require("hls.js")); should really print an empty object ({}) on the server side and componentDidMount shouldn't run. #1841 only prevents require("hls.js") from crashing btw. You still need conditions (or componentDidMount) to avoid running it in node.

Edit: Removed comment about canary releases possibly not being built regularly (confused this with some other comment about the master branch not being built regularly).

[friday]

npm view hls.js time | grep '0.10.2-canary.3976' (first release including the fix #1841) outputs '0.10.2-canary.3976': '2018-08-09T20:09:38.918Z'.

The first 3 comments in this thread were from earlier is the same day, so that should explain it.

[tchakabam]

I think @hoodsy mentioned in the op that he pulled in your PR

[friday]

You're correct. Maybe something else then (like forgetting to build)? Anyway this is working for me with Next.js.

[tchakabam]

@hoodsy before you try that and use the files in /dist, you should run npm install && npm run build

(i recently improved the docs on building/tooling in our readme)

[stale[bot]]

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. Thank you for your contributions.