Does not work with electron-renderer in webpack

[jthrilly]

We are using Konva with React in an Electron app, using your react-konva lib. We use Webpack 3.x to create our bundles, with our Webpack render target set to electron-renderer in our production config.

Just incase you didn't know, electron-renderer is a browser environment that also has access to node (so similar to a NWJS context).

Using this setup, we receive errors during our webpack build because canvas and jsdom are not installed as dependencies in Konva, and webpack is trying to bundle them. This may be a situation where the browser field in your package.json is not enough to let module bundlers know that certain modules are not required, OR it could be that the electron-renderer target ignores the browser field in package.json.

Either way, it would be fantastic if we could get this to work properly for people using Konva in React with Webpack.

Our workaround for the timebeing is to mark canvas and jsdom as externals in our webpack config. This works, but doesn't address the underlying issue.

Related issue on react-konva here: lavrton/react-konva#102

[lavrton]

It should be ok now. Please check the last version.

[wenshiqi0]

@lavrton There is a another question. While I use electron to load konva, the Konva.isBrowser is always false. I think for electron there is no need to use konva-node and node-canvas. We should take it just like Browser, or maybe we can have a way to change the Konva.isBrowser.

[lavrton]

@wenshiqi0 can you debug why electron has Konva.isBrowser = false?

isBrowser: typeof window !== 'undefined' &&
      {}.toString.call(window) === '[object Window]'

As I know electon has window object. Why it is false here?

[wenshiqi0]

So sad.

[lavrton]

@wenshiqi0 please try new version 1.7.4. How does it work for you?

[wenshiqi0]

@lavrton

Maybe check window as [object global] or [object window] ?

[wenshiqi0]

I run code on konva master. It seems work fine.

[lavrton]

I am closing this issue for now. Add a comment if someone still has the issue.

[lpcman]

@lavrton konva 1.7.5 in react spa app. {}.toString.call(window) not always return expected result, I tested on sumsang S7 , android 6.0.1, mobile browser, {}.toString.call(window) given "[object global]", so 'isBrowser' attribute in Global.js file is 'false', app break on following error:

[lavrton]

@lpcman hmmm. this is strange. we have code to handle this:

{}.toString.call(window) === '[object global]'

[lpcman]

@lavrton l got a little confused, 'npm install konva --save-dev' installed '^1.7.5' version by default, but I saw CHANGELOG.md file in konva project does not have version 1.7.5, I upgrade to 1.7.6 have this code . Thanks anyway and your awsome work for this.