server-side rendering - window.addEventListener is not a function about zdog HOT 14 OPEN

I think this might be caused when dragger.js is being loaded as a commonjs module.

If you are using webpack you can remedy this by using imports-loader.
The following webpack config worked for me:

 module: {
    rules: [
      {
        test: require.resolve('./node_modules/zdog/js/dragger.js'),
        use: 'imports-loader?this=>window'
      },
      ...
    ]
  }

Here are the webpack docs: https://webpack.js.org/guides/shimming/#granular-shimming
A similar configuration should be possible for other bundlers.

from zdog.

I'm seeing this client-side when using parcel to bundle my app. I haven't done the steps to ensure this isn't just a parcel issue yet though. Anyone with a webpack/rollup build seeing this as well?

from zdog.

I'm having the same issue using parcel.
Seems like an empty window object is being used hence why addEventListener is not available.

from zdog.

Hey i had the same issue, i solved it by making the listener the canvas instead of the window. I'm not 100% sure yet if this has any unintended side effects.

mango-chutney@ece47f1

from zdog.

I used the solution of @statikowsky with a vue ui set up project.

I needed to add a vue.config.js to the project root with this content

// vue.config.js
module.exports = {
  configureWebpack: {
    module: {
      rules: [
        {
          test: require.resolve('./node_modules/zdog/js/dragger.js'),
          use: 'imports-loader?this=>window'
        },
      ]
    }
  }
}

I also use this library via vue-zdog wrapper and needed to install some more packages (and for some reason zdog too) via npm install --save import-loader vue-runtime-helpers zdog it started to work.

from zdog.

In SHA: 3566dcb, I removed setting window to this and instead rely on global window value, plus added some internal checks in case window is undefined. This fix is released in v1.1.1.

Please update and let me know of any lingering issues. Thanks all for your insights here.

from zdog.

I have the same issue as @aarongoin using classic vue app. I'm currently trying to do a little wrapper to make Zdog work in Vue environnement (someone is already doing the react one 😌 )

It's just a try for now.

from zdog.

@aarongoin interesting, I am also using parcel and having the same issue.

from zdog.

i solved it by making the listener the canvas instead of the window. I'm not 100% sure yet if this has any unintended side effects.

Yes this change has side effects with dragging, preventing movement and drag end event triggering unless the pointer is within the rendering element.

from zdog.

I am having the same issue client-side, using webpack-dev-server. @statikowsky 's workaround seemed to fix the issue for me.

from zdog.

Similar issue happening for me, I'm using import and babel in my build process. Zdog is rendering but, I'm getting this error when trying to drag:

TypeError: window.addEventListener is not a function

from zdog.

Same issue with Parcel 😢

Code:

import { Illustration, Shape } from 'zdog'

let illo = new Illustration({
  element: '#app',
  dragRotate: true,
})

new Shape({
  addTo: illo,
  path: [
    { x: -60, y: -60 },   // start
    { bezier: [
      { x:  20, y: -60 }, // start control point
      { x:  20, y:  60 }, // end control point
      { x:  60, y:  60 }, // end point
    ]},
  ],
  closed: false,
  stroke: 20,
  color: '#636'
});

function animate() {
  illo.updateRenderGraph()
  requestAnimationFrame(animate)
}

animate()

from zdog.

Is this not still fixed? :( I am facing the same issue.
I am using parcel to bundle. Eventually I want to use it on my Gatsby website. If it doesn't work with parcel I doubt it will work with Gatsby.

from zdog.

Is this not still fixed? :( I am facing the same issue.
I am using parcel to bundle. Eventually I want to use it on my Gatsby website. If it doesn't work with parcel I doubt it will work with Gatsby.

This works fine with Gatsby. Just install imports-loader and then add this to your gatsby-node.js

exports.onCreateWebpackConfig = ({ stage, loaders, actions }) => {
  if (stage === 'build-html') {
    actions.setWebpackConfig({
      module: {
        rules: [
          {
            test: require.resolve('./node_modules/zdog/js/dragger.js'),
            use: loaders.null(),
          },
        ],
      },
    })
  } else {
    actions.setWebpackConfig({
      module: {
        rules: [
          {
            test: require.resolve('./node_modules/zdog/js/dragger.js'),
            use: 'imports-loader?this=>window',
          },
        ],
      },
    })
  }
}

• commenting for future reference and help with Gatsby.

from zdog.