webpack compile error on version 1.1.0

[developpeur2000]

Hello,
Since version 1.1.0, the module generates warnings and will corrupt the resulting build in my environment (vue-loader/webpack)
to reproduce :

• clone the vuejs webpack template at https://github.com/vuejs-templates/webpack
• follow instructions from the readme to generate a simple project, choose minimum features
• in the generated project directory, check npm run dev generates no issue
• npm install videojs-vr@1.1.0
• edit src/App.vue and add import 'videojs-vr' juste before the import HelloWorld ...
• npm run dev will generate lots of warnings ( export 'default' (imported as 'THREE__default') was not found in 'three' ) and will get the dev server start to be stuck

version 1.0.3 is fine, it obviously comes from commit a5cf671 but i'm not a webpack expert enough to find exactly where this comes from

[brandonocasey]

I am pretty sure this is due to us removing the three example code from our repo and including it from the examples folder in the node module. The problem was that the example code isn't exposed as modules so its rather hard to work with. We decided to do a find-replace on the files as they get imported so that they would be exported as regular modules. See

videojs-vr/scripts/rollup-replace.js

Lines 8 to 11 in a5cf671

	'THREE.VRControls =': "var THREE = require('three');var VRControls;\nmodule.exports = VRControls =",
	'THREE.VREffect =': "var THREE = require('three');var VREffect;\nmodule.exports = VREffect =",
	'THREE.VRControls': 'VRControls',
	'THREE.VREffect': 'VREffect'

[gkatsev]

Maybe we need to pre-compile threejs into this project on publish so that users don't need to do anything?

[brandonocasey]

yeah maybe into the cjs and es modules

[developpeur2000]

Hi and thanks for the fast replies,
I confirm that the problem comes from the three example code
The issue is that the replacement code THREE = require('three') is compiled as import THREE__default from 'three'; in the es module
By removing var THREE = require('three'); from the replacement, and using rollup-plugin-inject to expose THREE to the examples, this seems to work

I've done it on my fork on the project, you can check this branch and try in your environment before I make a PR : https://github.com/developpeur2000/videojs-vr/tree/fix-webpack-compilation

[brandonocasey]

If you have a chance can you try: #53 I think that may fix webpack. I tested it and it appears to work, but I have not worked with webpack that much.

[developpeur2000]

I've left you a comment on the PR because i could not compile videojs-vr without a small change, but once compiled, it fixes the webpack issue 👍

[brandonocasey]

OK I made the fix and merged it into master, going to cut a patch release

[brandonocasey]

1.1.1 is out with the fixes, feel free to re-open if its not working. Thanks for reporting, testing, and helping with this issue!