Error when building with Webpack 2.5: "Module not found: Error: Can't resolve 'canvas'

[ay5000]

I am running into a webpack error with react-konva 1.1.3 and webpack 2.5:

ERROR in ./~/konva/konva.js

Module not found: Error: Can't resolve 'canvas' in '/******/node_modules/konva'

@ .//konva/konva.js 251:19-36
@ .//react-konva/src/react-konva.js
@ ./assets/js/index.js

Thanks.

[lavrton]

@ay5000 I have webpack 2.5.1 and I don't see any errors. Works fine for me.
Can you create a demo repo?
Do you install konva as node module?

[andrew-luminal]

@ay5000 We had the same issue -- webpack searches for dependencies before the code is run, so it doesn't realize that the require('canvas') call from konva (not react-konva) is unnecessary for a browser environment. It'll also give you that error for jsdom. Easy 1 line fix to your webpack config:

plugins: [
   new webpack.IgnorePlugin(/canvas|jsdom/, /konva/)
]

[lavrton]

It is very strange that it doesn't realize that that code is unnecessary for a browser. Because it is defined in package.json.

[veralex]

@lavrton I have the same issue as @ay5000 . The code given by adrew-luminal did't work for me. What could be the problem?

[lavrton]

I can help. But I need reproducible repo. Where I can npm install and npm run build and see the problem.

[veralex]

Well, I found the reason, and the reason is AspNetCore SPA. I use AspNet SPA + Webpack + React + Redux stack. The problem is that AspNetCore can't prerender the library using 'canvas' on the server side (libraries using 'window' won't work either). So I decided to turn off aspnet-prerendering option. It seems that Microsoft uses their own JS engine not compatible with V8.

[janus-reith]

I have the same issue on meteor:
Unable to resolve some modules:
"canvas" in
[....]

the dev server still works, but building fails.

[jthrilly]

We have this issue, too, but this time when using the electron-renderer webpack target.

@lavrton in this case, the environment is a mixture of node and browser (somewhat like nwjs). Can the check in Konva be changed to detect the electron environment, or at least not consider it a node environment for the purposes of being built by webpack with the electron-renderer target?

[lavrton]

Should be resolved with the last version of Konva v1.7.1

[OKNoah]

Sorry if this is the wrong issue, but I've wondered if there anyway Konva can do server-side rendering? There is buildpack-cairo, which I just realized my acquaintance @mojodna made. Could that make it possible to render konva canvas elements on the server? I have used cairo to render canvas on the server, but not output to react/HTML. If there are window specific requirements, what would be the chances of refactoring to render the initial canvas elements and then add the listeners? Just curious as it might be worth my trouble if I can find the time.

Or perhaps my premise is faulty and it should work?

[lavrton]

@OKNoah no server-side rendering. Konva is drawing on <canvas>. We can not send canvas element with some drawing from the server.

[OKNoah]

@lavrton Right. Currently I do in my render function

if (typeof window !== 'undefined') {
  const Konva = require('react-konva')

  return (<Konva.Rect .... />)
}

return null

Maybe that's not necessary? But if it is, could we at least send this along as SSR'd:

<canvas width="1132" height="748" style="padding: 0px; margin: 0px; border: 0px; background-color: transparent; position: absolute; top: 0px; left: 0px; width: 566px; height: 374px; background-position: initial initial; background-repeat: initial initial;"></canvas>

Then we don't have a flash of canvas elements loading after page load (drawn on or not). Of course this is also achievable by just putting a div of the same size and shape, while that would require redrawing and a small performance hit.

I'm just wondering. If React-Konva does need window as I assumed, I could look into doing a PR like this myself.

Maybe server-side could even generate an image, make it a png, and load it under a transparent canvas element on initial load? Pardon my ignorance if I'm way off.

[lavrton]

Generating png and returning it instead of a canvas is a very interesting idea.
Personally, I don't use SSR with react-konva, so I don't know possible use cases.

Please create another issue with your requirements and suggestions. I am happy to apply related PR.

[stephenasuncionDEV]

Still experiencing this issue with nextjs

[lavrton]

@stephenasuncionDEV did you look here https://github.com/konvajs/react-konva#usage-with-nextjs?

[dendrofen]

@lavrton It seems issue happens once again, it should be connected with nextjs updates (changing of dynamic function)
nextjs version 14.0.3

[dev-fredericfox]

Still an issue in 14.1.3.
See: #787 (comment)