c8r/x0

Can't build statically if a library depends on window or document

cwervo opened this issue · 4 comments

cwervo commented

I recognize this is a special case so feel free to not support it!

I'm trying to get A-Frame (a webVR library) running within x0. It works with the development server:

animated gif-downsized_large

Unfortunately after running x0 build docs --static I get an error about window being undefined.

x0  @compositor/x0
 x0  ⠋ building static sitewebpack:///./node_modules/aframe/dist/aframe-master.js?:75415
window.hasNativeWebVRImplementation = !!window.navigator.getVRDisplays || !!window.navigator.getVRDevices;
^

ReferenceError: window is not defined
    at Object.148.../package (webpack:///./node_modules/aframe/dist/aframe-master.js?:75415:1)
    at s (webpack:///./node_modules/aframe/dist/aframe-master.js?:1:398)
    at e (webpack:///./node_modules/aframe/dist/aframe-master.js?:1:569)
    at eval (webpack:///./node_modules/aframe/dist/aframe-master.js?:1:598)
    at eval (webpack:///./node_modules/aframe/dist/aframe-master.js?:1:62)
    at eval (webpack:///./node_modules/aframe/dist/aframe-master.js?:1:83)
    at Object../node_modules/aframe/dist/aframe-master.js (/Users/sagejenson/dev/web_dev/x0-cwervo-test/dist/TEMP/App.js:5722:1)
    at __webpack_require__ (/Users/sagejenson/dev/web_dev/x0-cwervo-test/dist/TEMP/App.js:30:30)
    at eval (webpack:///./docs/about.js?:26:1)
    at Object../docs/about.js (/Users/sagejenson/dev/web_dev/x0-cwervo-test/dist/TEMP/App.js:5699:1)

I'm not too familiar with webpack but I recognize this is usually because the compilation environment assumes it's running in node, so I tried making this webpack.config.js:

// webpack.config.js
module.exports = {
    target: 'web'
};

But I get the same error, with & without --static for x0 build docs.

Note: this also happens when I try adding three.js, a popular 3D rendering library. If I add let window = {} the docs build step lets me know that document is not defined and so compilation of Three fails.

Any idea what custom configuration I should do here or if there's something that can be done on the x0 side?

huy-qn commented

I am having this same issue with document when using a 3rd party library too

webpack:///./node_modules/soundcloud-audio/index.js?:48 this.audio = document.createElement('audio');

ReferenceError: document is not defined

huy-qn commented

@andrescuervo Did you find any solution to work around this?

cwervo commented

@imhuyqn Nope, haven't had time to look into it, maybe @jxnblk knows a workaround?

cwervo commented

Ah actually @imhuyqn I just figured out a small work around:

Wrapping any code that relies on window like this:

if (typeof window !== 'undefined') {
  // code goes here
}

means gets the x0 build docs compiling. Hope that helps! Not going to close this until this gets looked at by someone more knowledgeable than me though, because I suspect this isn't best practice & I'm missing something about the way I'm using window.

  • 👍3