oframe / ogl

Minimal WebGL Library
https://oframe.github.io/ogl/examples
3.77k stars 213 forks source link

BasisManager throw error when importing ogl on nuxt.js #113

Closed liqueflies closed 3 years ago

liqueflies commented 3 years ago

BasisManager throws error when importing any of the packages from ogl like:

import { Renderer } from 'ogl'

In framework like nuxt.js is not possible to call document if not in client side. The first row calls document without a function that I can decide when run.

When is exported to the main "index.mjs" it will immediately runned by browser.

Is there any chance to get runned in a different way?

eXponenta commented 3 years ago

Yep, use a dynamic import.

liqueflies commented 3 years ago

@eXponenta Pardon, This is not a major release, obviously is an alpha version, but could be better if it would be better if the patch doesn't break the project. Downgrading fixed it, but I think a solution could be wrap the first line inside a function.

Let me know if I can help!

Thank you

gordonnl commented 3 years ago

ah I see the issue - it's for SSR frameworks where document or window are not available. What is the recommended solution from Nuxt/Next for checking for whether the code is run on the server or not?

liqueflies commented 3 years ago

In every ssr there is a callback/method like "mounted" or "onMounted" that is a safe place where put script client side.

For example, talking about the previous version of the last one, I was managing like that:

import { Renderer } from 'ogl'

export default {
  mounted() {
    // yay! client side HTML is mounted
    const renderer = new Renderer({
      alpha: true,
      canvas: this.$refs.canvas --> my HTML node for canvas
    })
  }
} 

Now, the project breaks at the import row because the first row of BasisManager is parsed when you import any package from 'ogl'.

https://github.com/oframe/ogl/blob/master/src/extras/BasisManager.js#L1

Maybe the fix could be moving the first rows inside constructor. I can also test the version.

gordonnl commented 3 years ago

Suggested fix can be found in version 0.0.75

liqueflies commented 3 years ago

Ok perfect, now is not triggering an error!

But I have another problem on GLTF loader at this point.

https://github.com/oframe/ogl/blob/master/src/extras/GLTFLoader.js#L86

At this point extensionsRequired if is undefined, it throws an error.

gordonnl commented 3 years ago

Nice catch! That's now fixed in version 0.0.76

liqueflies commented 3 years ago

It works perfect now!

Thank you so much ❤️