THREE is not defined

[luiscerqueira]

Description

Briefly describe the issue.
When trying to use the videojs-vr plugin in a react app, the app crashes.

Steps to reproduce

Explain in detail the exact steps necessary to reproduce the issue.

1. npm install [email protected]
2. run a react application with a videojs component
3. init the vr plugin

Results

Expected

Video and VR functionality should be working

Actual

React webpack Unhandled Rejection is thrown, saying that THREE is not defined

Error output

Uncaught (in promise) ReferenceError: THREE is not defined
at Object.../node_modules/three/examples/js/controls/VRControls.js (VRControls.js:5)
at webpack_require (bootstrap:790)
at fn (bootstrap:150)
at Module.../node_modules/videojs-vr/dist/videojs-vr.es.js (videojs-vr.es.js:1)
at webpack_require (bootstrap:790)
at fn (bootstrap:150)

Additional Information

The Three.js examples has the assumption that the THREE object is defined globaly. For some reason, this is not the case when the webpack is used.

versions

videojs

v.7.5.5

browsers

Chrome

OSes

Windows

plugins

[brycehowitson]

Same problem occurs when using VUE. I would assume this is the same for anything using Webpack.

Is there any movement on a resolution?

[lizequn]

Same here with webpack.

[thomasdeppisch]

+1 with webpack.

When building videojs-vr, I get:

(!) Unresolved dependencies
https://rollupjs.org/guide/en/#warning-treating-module-as-external-dependency
webvr-polyfill (imported by src/plugin.js)
three (imported by src/plugin.js, src/orbit-orientation-controls.js)
three/examples/js/controls/VRControls.js (imported by src/plugin.js)
three/examples/js/effects/VREffect.js (imported by src/plugin.js)
three/examples/js/controls/OrbitControls.js (imported by src/orbit-orientation-controls.js)
three/examples/js/controls/DeviceOrientationControls.js (imported by src/orbit-orientation-controls.js)

[sh84]

For webpack work solution:

resolve: {
    alias: {
      'videojs-vr': __dirname + '/node_modules/videojs-vr/dist/videojs-vr.min.js'
    }
  }

in webpack config

[nwaughachukwuma]

  resolve: {
      alias: {
        'videojs-vr': __dirname + '/node_modules/videojs-vr/dist/videojs-vr.min.js'
      }
   }

This is not working for me in webpack.config.js and vue.config.js. Please, who has set this up in a Vue App? @sh84 @luiscerqueira

[nwaughachukwuma]

I ended up doing import 'videojs-vr/dist/videojs-vr.min.js. The doc may have to be updated to reflect this.

[mskelton]

It would seem the underlying issue here is with the rollup-replace.js script which transforms the three.js example files to add an import * as THREE from 'three' to the top of the file. My assumption is that the maintainers added this and tested it in this repository not realizing that transforming node_modules in this source repo will have no affect on downstream projects as three.js will be installed from the registry without the patched code from the rollup plugin.

Not only that, but I see this as a major issue when it comes to semver. Three.js could at any point change their examples in a patch version as they are just that, examples. This could result in breaking changes in patch or minor releases. While the current approach is "clever" as a way to reduce boilerplate in this repo, the old solution of copying the examples into this repo is the correct solution.

[hgshoggins]

I'm using browserify and simply including from npm modules:

require('video.js');
require('videojs-vr');

and experiencing the same problem with THREE not being defined, but I'm puzzled because seeing the different comments, I'm not sure how to solve it really.

I know I'm asking for a specific case, but maybe if someone can point out some hints that could help someone else.

[mskelton]

@hgshoggins The solution my company had to resort to was locking down videojs-vr to version 1.4.1. Hopefully that works for you!

[promethyttrium]

This seems like a pretty serious issue with no workaround. Is this being prioritized to be fixed?

[Brandonza]

Hi

Has anyone solved this yet?

[promethyttrium]

@Brandonza, looks like nobody here really gives a crap...

[shivarajnaidu]

is there any solid solution ?

[Brandonza]

Not as far as I know

[azalys]

@hgshoggins The solution my company had to resort to was locking down videojs-vr to version 1.4.1. Hopefully that works for you!

Do you find a solution ?
I downgrade the version to 1.4.1 but I have other compatibility error with videojs.

I've seen something with rollup-replace.js which could fix the problem (maybe) but I don't understand how implemented this in a vue.js app.

Thanks for your help

[bunday]

I saw a couple of answers, here is what worked for me on vue.js

• import videojs from "video.js";
• Instead of importing videojs-vr next, import videojs-vr/dist/videojs-vr.min.js

That should do the trick

[h0jeZvgoxFepBQ2C]

Doesn't work for me, when I dont call require("videojs-vr") it can't find the vr(..) method.

player.vr is not a function

[h0jeZvgoxFepBQ2C]

Did you import THREE seperately?