Build Faild: Module not found: Error: Can't resolve 'canvas' in '/my/local/path/node_modules/jsdom/lib/jsdom'

[version-1]

I installed this and build on with develop but it failed. How do I fix this?

success onPostBootstrap — 0.007 s
here ./node_modules/jsdom/lib/jsdom/utils.js
Module not found: Error: Can't resolve 'canvas' in '/my/local/path/node_modules/jsdom/lib/jsdom'
resolve 'canvas' in '/my/local/path/node_modules/jsdom/lib/jsdom'
  Parsed request is a module
  using description file: /my/local/path/node_modules/jsdom/package.json (relative path: ./lib/jsdom)
    resolve as module
      looking for modules in /my/local/path/node_modules
        using description file: /my/local/path/package.json (relative path: ./node_modules)
          using description file: /my/local/path/package.json (relative path: ./node_modules/canvas)
            no extension
              /my/local/path/node_modules/canvas doesn't exist
            .mjs
              /my/local/path/node_modules/canvas.mjs doesn't exist
            .js
              /my/local/path/node_modules/canvas.js doesn't exist
            .jsx
              /my/local/path/node_modules/canvas.jsx doesn't exist
            .wasm
              /my/local/path/node_modules/canvas.wasm doesn't exist
            .json
              /my/local/path/node_modules/canvas.json doesn't exist
            as directory
              /my/local/path/node_modules/canvas doesn't exist
      /my/local/path/node_modules/jsdom/lib/jsdom/node_modules doesn't exist or is not a directory
      /my/local/path/node_modules/jsdom/lib/node_modules doesn't exist or is not a directory
      /my/local/path/node_modules/node_modules doesn't exist or is not a directory
      /my/home/React/node_modules doesn't exist or is not a directory
      /Users/node_modules doesn't exist or is not a directory
      /node_modules doesn't exist or is not a directory
      looking for modules in /my/home/node_modules
        No description file found
      looking for modules in /my/local/path/node_modules/jsdom/node_modules
        using description file: /my/local/path/node_modules/jsdom/package.json (relative path: ./node_modules)
          using description file: /my/local/path/node_modules/jsdom/package.json (relative path: ./node_modules/canvas)
            no extension
              /my/local/path/node_modules/jsdom/node_modules/canvas doesn't exist
      looking for modules in /my/local/path/node_modules
        using description file: /my/local/path/package.json (relative path: ./node_modules)
          using description file: /my/local/path/package.json (relative path: ./node_modules/canvas)
            no extension
              /my/local/path/node_modules/canvas doesn't exist
            .mjs
              /my/local/path/node_modules/jsdom/node_modules/canvas.mjs doesn't exist
            .mjs
              /my/local/path/node_modules/canvas.mjs doesn't exist
        No description file found
            .js
              /my/local/path/node_modules/jsdom/node_modules/canvas.js doesn't exist
            .js
              /my/local/path/node_modules/canvas.js doesn't exist
        no extension
          /my/home/node_modules/canvas doesn't exist
            .jsx
              /my/local/path/node_modules/jsdom/node_modules/canvas.jsx doesn't exist
            .jsx
              /my/local/path/node_modules/canvas.jsx doesn't exist
        .mjs
          /my/home/node_modules/canvas.mjs doesn't exist
            .wasm
              /my/local/path/node_modules/jsdom/node_modules/canvas.wasm doesn't exist
            .wasm
              /my/local/path/node_modules/canvas.wasm doesn't exist
        .js
          /my/home/node_modules/canvas.js doesn't exist
            .json
              /my/local/path/node_modules/jsdom/node_modules/canvas.json doesn't exist
            .json
              /my/local/path/node_modules/canvas.json doesn't exist
        .jsx
          /my/home/node_modules/canvas.jsx doesn't exist
            as directory
              /my/local/path/node_modules/jsdom/node_modules/canvas doesn't exist
            as directory
              /my/local/path/node_modules/canvas doesn't exist
        .wasm
          /my/home/node_modules/canvas.wasm doesn't exist
        .json
          /my/home/node_modules/canvas.json doesn't exist
        as directory
          /my/home/node_modules/canvas doesn't exist
[/my/local/path/node_modules/canvas]
[/my/local/path/node_modules/canvas.mjs]
[/my/local/path/node_modules/canvas.js]
[/my/local/path/node_modules/canvas.jsx]
[/my/local/path/node_modules/canvas.wasm]
[/my/local/path/node_modules/canvas.json]
[/my/local/path/node_modules/jsdom/lib/jsdom/node_modules]
[/my/local/path/node_modules/jsdom/lib/node_modules]
[/my/local/path/node_modules/node_modules]
[/my/home/React/node_modules]
[/Users/node_modules]
[/node_modules]
[/my/home/node_modules/package.json]
[/my/local/path/node_modules/jsdom/node_modules/canvas]
[/my/local/path/node_modules/jsdom/node_modules/canvas.mjs]
[/my/home/node_modules/canvas/package.json]
[/my/local/path/node_modules/jsdom/node_modules/canvas.js]
[/my/home/node_modules/canvas]
[/my/local/path/node_modules/jsdom/node_modules/canvas.jsx]
[/my/home/node_modules/canvas.mjs]
[/my/local/path/node_modules/jsdom/node_modules/canvas.wasm]
[/my/home/node_modules/canvas.js]
[/my/local/path/node_modules/jsdom/node_modules/canvas.json]
[/my/home/node_modules/canvas.jsx]
[/my/home/node_modules/canvas.wasm]
[/my/home/node_modules/canvas.json]
 @ ./node_modules/jsdom/lib/jsdom/utils.js 166:2-27 172:17-34
 @ ./node_modules/jsdom/lib/jsdom/browser/Window.js
 @ ./node_modules/jsdom/lib/api.js
 @ ./node_modules/gatsby-plugin-amp/gatsby-ssr.js
 @ ./.cache/api-runner-ssr.js
 @ ./.cache/develop-static-entry.js
error There was an error compiling the html.js component for the development server.

[jafaircl]

It looks like the canvas package wasn't installed along with jsdom. My first thought is to try reinstalling your dependencies. Can you link to a repo that reproduces the issue?

[jpreecedev]

Same problem can easily replicate just by installing and dropping in default configuration

[jafaircl]

It looks like jsdom needs the canvas package. Can either of you try running npm install canvas and try a build again? If that fixes it I’ll add it as a dependency for now until I have time to come up with a better solution.

[jpreecedev]

@jafaircl i tried this and unfortunately it did not resolve the issue

[version-1]

@jafaircl @jpreecedev

Can you link to a repo that reproduces the issue?

I can't prepare it repository soon but I think the error occur on development env. gatsby develop

It may be caused the sources are built on web not node. https://webpack.js.org/concepts/targets/

It seems like jsdom is work on only 'node' .

[jafaircl]

I’ll take a look at it tomorrow and get a better idea of what’s happening and how it can be fixed.

[jafaircl]

Now that I’m looking into it, could you try running npm install canvas-prebuilt? It seems like jsdom is fine with that package and I’m seeing issues in the jsdom repo where that seems to fix similar problems.

[jpreecedev]

@jafaircl I can confirm that installing canvas-prebuilt doesn't resolve the issue. Anything I can do to help?

[jafaircl]

Ok after taking a look at it and pushing a new version, 0.1.26 should fix this issue. Please let me know if it doesn’t. Thanks for all your help.

[jafaircl]

@jpreecedev pull requests are always welcome

[jpreecedev]

This appears to have been resolved

[jafaircl]

Great. I'll close it for now and if this pops up again I'll reopen it.