Load packages only client side

I am trying to install react-konva to my fronting app, however I am having some issue.

I did a simple npm install react-konva konva to install the package.
When I try to load my app I get the following error:

ModuleNotFoundError: Module not found: Error: Can't resolve 'canvas' in '/Users/donkoko/devs/JS/kh-frontity-theme/node_modules/konva/lib'
    at /Users/donkoko/devs/JS/kh-frontity-theme/node_modules/webpack/lib/Compilation.js:925:10
    at /Users/donkoko/devs/JS/kh-frontity-theme/node_modules/webpack/lib/NormalModuleFactory.js:401:22
    at /Users/donkoko/devs/JS/kh-frontity-theme/node_modules/webpack/lib/NormalModuleFactory.js:130:21
    at /Users/donkoko/devs/JS/kh-frontity-theme/node_modules/webpack/lib/NormalModuleFactory.js:224:22
    at /Users/donkoko/devs/JS/kh-frontity-theme/node_modules/neo-async/async.js:2830:7
    at /Users/donkoko/devs/JS/kh-frontity-theme/node_modules/neo-async/async.js:6877:13
    at /Users/donkoko/devs/JS/kh-frontity-theme/node_modules/webpack/lib/NormalModuleFactory.js:214:25
    at /Users/donkoko/devs/JS/kh-frontity-theme/node_modules/enhanced-resolve/lib/Resolver.js:213:14
    at /Users/donkoko/devs/JS/kh-frontity-theme/node_modules/enhanced-resolve/lib/Resolver.js:285:5
    at eval (eval at create (/Users/donkoko/devs/JS/kh-frontity-theme/node_modules/tapable/lib/HookCodeFactory.js:33:10), <anonymous>:15:1)

From what I understand this happens because canvas is not available server side. Makes sense, however my question is how can I go around this? Is there a way to load the package just client side?

I also made a sandbox for testing: wizardly-carson-2hy24 - CodeSandbox
and here is the repository: https://github.com/DonKoko/frontity-konva-test

EDIT: Here is the solution that the Konva devs suggested when using GatsbyJS. However I am not aware of a way to modify webpack with frontity https://github.com/jsdom/jsdom/issues/3042

2 Likes