Gatsby ssr broken on netlify "Can't resolve 'canvas'"

Hi i’m using the pdf viewer for create a website with Gatsby hosted on netlify but all my github actions for netlify come back failed.

• Web browser and its version: Firefox dev edition version 89
• Operating system and its version: macOS Big Sur version 11.2.3
• PDF.js version: “version”: “2.5.207”,
• Is a browser extension: no

i have read the log and found this

10:40:14 AM: Can't resolve 'canvas' in '/opt/build/repo/js/node_modules/pdfjs-dist/build'
10:40:14 AM: If you're trying to use a package make sure that 'canvas' is installed. If you're trying to use a local file make sure that the path is correct.
10:40:14 AM: not finished Caching JavaScript and CSS webpack compilation - 15.502s
10:40:14 AM: not finished Building HTML renderer - 15.441s
10:40:14 AM: not finished Caching HTML renderer compilation - 0.384s

I wonder if someone here could explain me what canvas is for thanks

[LucaHermann]

@yordis Yeah i figured out this you just have to add inside a gatsby-node.js this code gonna block the loading of those package during the build because they dont have any window to refer to. When the site gonna be loaded and render to the dom they gonna load and have a window to refer so the error gonna be gone ! For every package who block you the ssr because of a window not defined just add this !

exports.onCreateWebpackConfig = ({ actions, stage, loaders }) => {
  actions.setWebpackConfig({
    devtool: "eval-source-map",
  })
  if (stage === "build-html") {
    actions.setWebpackConfig({
      module: {
        rules: [
          {
            test: /canvas/,
            use: loaders.null(),
          },
          {
            test: /pdfjs-dist/,
            use: loaders.null(),
          },
        ],
      },
    })
  }
}

[akando42]

I have the same issue but with Next.JS deployment on Netlify. By adding next.config.js… it works for me.

module.exports = {
    target: "serverless",
    future: { webpack5: true },
    webpack: (config, { buildId, dev, isServer, defaultLoaders, webpack }) => {
        config.resolve.alias.canvas = false
        config.resolve.alias.encoding = false
        return config
    }
}