New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Cannot read property 'userAgent' of undefined #2948

Closed
teckays opened this Issue Dec 27, 2015 · 8 comments

Comments

Projects
None yet
3 participants
@teckays
Copy link

teckays commented Dec 27, 2015

I'm using video.js inside my ember application. It works fine when using the client side version of the app, however when using it with ember fastboot, https://github.com/tildeio/ember-cli-fastboot, this error is thrown:

$ ember fastboot --serve-assets

Cannot read property 'userAgent' of undefined
TypeError: Cannot read property 'userAgent' of undefined
    at Object.125.global/document (<anonymous>:121923:53)
    at s (<anonymous>:104896:621)
    at <anonymous>:104896:672
    at Object.106../big-play-button.js (<anonymous>:113849:23)
    at s (<anonymous>:104896:621)
    at <anonymous>:104896:672
    at Object.139.../../src/js/utils/merge-options.js (<anonymous>:123824:15)
    at s (<anonymous>:104896:621)
    at e (<anonymous>:104896:792)
    at <anonymous>:104896:810

I know it's not directly related to this library, but because ember FastBoot is building all the dependencies into on single file in order to run it on the server side, the window.navigator instance is not available which causes the build to fail. Is it possible to somehow ensure the existence of window, document instances before they are accessed?

@gkatsev

This comment has been minimized.

Copy link
Member

gkatsev commented Dec 28, 2015

That's an interesting problem. We probably wouldn't want to change anything in videojs, though, maybe have a way to set an external useragent instead of relying on navigator.userAgent.
Also, we use the global module from npm to get window which returns global if window is undefined`, so, doing something like:

global.navigator.userAgent = '...'

should fix that issue.
Also, document is also provided for us by global: https://github.com/Raynos/global/blob/master/document.js.
Let me know if that works, thanks.

@teckays

This comment has been minimized.

Copy link

teckays commented Dec 28, 2015

@gkatsev The error is thrown here:
var USER_AGENT = _globalWindow2['default'].navigator.userAgent;
I was able to work this around by setting the USER_AGENT to a default value if .navigator is undefined but this didn't solve the problem entirely because the next call to a method form global
_globalDocument2['default'].createElement(/*params*/) resulted in an error as well.

I agree that this is more of a ember-cli-fastboot concern, I just wanted to know if maybe there's a quick way of solving this from video.js until FastBoot would find a solution.

Anyway I've just left this as is and will probably start writing my own wrapper around Ember to render the code server-side, this way I would have more control what libraries are included in the final build.

@teckays teckays closed this Dec 28, 2015

@gkatsev

This comment has been minimized.

Copy link
Member

gkatsev commented Dec 28, 2015

Well, if you add global.navigator.userAgent = '...' some time before video.js gets required, that should fix that issue because _globalWindow2['default'] would be referencing the global object in node since window is undefined. Another option is to just set a window property with a navigator object.

As for the createElement issue, min-document which is returned from global/document should have a createElement method we should be able to use. We might want to open an issue with min-document once we figure out the root of the createElement issue.

I'm going to keep this open and reference the fastboot issue (ember-fastboot/ember-cli-fastboot#83). There's possibly some stuff that we would want to do, though, it's probably a general enough issue that could happen with other libs as well.

@gkatsev gkatsev reopened this Dec 28, 2015

@teckays

This comment has been minimized.

Copy link

teckays commented Dec 28, 2015

@gkatsev Yes, I have opened an issue on ember-cli-fastboot and ember-fastboot-server as well referencing your library as my test case and other client-side libraries that could raise the exact same problem. I've noticed they did an ensure check regarding jQuery which is widely used by Ember itself.

https://github.com/ember-fastboot/ember-fastboot-server/blob/master/lib/ember-app.js#L71-L82

Well, if you add global.navigator.userAgent = '...' some time before video.js

I thought about this, but the problem is that the video.js library is not included statically, it's injected using https://github.com/IvyApp/ivy-videojs ember component {{ivy-videojs ...}}, on the server, Ember's didInsertElement() hook is redundant therefore not called.

@gkatsev

This comment has been minimized.

Copy link
Member

gkatsev commented Dec 28, 2015

Sounds like the the sandbox needs to shim the navigator object as well?

@teckays

This comment has been minimized.

Copy link

teckays commented Dec 28, 2015

@gkatsev it should indeed!

@neilkyoung

This comment has been minimized.

Copy link

neilkyoung commented Jun 17, 2016

Can you tell me where I need to add this. I am using webpack to generate an isomorphic application but get this message when trying to start my server. I have tried adding it to my server.js file but it does not seem to stop the message from appearing?

Code:

app.use(function *(req) { GLOBAL.navigator = { userAgent: req.headers['user-agent'] } });

@gkatsev

This comment has been minimized.

Copy link
Member

gkatsev commented Jul 6, 2017

We've made some changes to be safer in using browser-only things and also the ember-fastboot issue has been closed so I'm going to close this as well.

@gkatsev gkatsev closed this Jul 6, 2017

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment