- Error: Module not found: Error: Can't resolve 'canvas' in '\node_modules\pdfjs-dist\build'

[aishwhensheds]

Hello,

I am using the ng2-pdf-viewer 9.0 and angular 13, while creating the build by using the command ng run app-nameserve-ssr, I am facing following issue.

./node_modules/pdfjs-dist/build/pdf.js:4574:29-46 - Error: Module not found: Error: Can't resolve 'canvas' in '\node_modules\pdfjs-dist\build''

Can you please help me!

Regards,

[alex-dietz]

same problem! Cannot use ssr due to that!

[JonasBruns]

Same here. This really is a pain 😬😬

[ODAncona]

Hello everyone,

Do we really need ng2-pdf-viewer to be rendered by the server?

Maybe there are workarounds with hybrid rendering?

If someone have a solution, I'm all ears

Maybe it can be helpful:

• https://github.com/angular/angular-cli/issues/14319#issuecomment-488312317
• https://www.newline.co/@eigenjoy/angular-ssr-the-browser-is-not-the-server--2b398f60

[alex-dietz]

Hi there, thanks for your remarks! no, we don't need a pdf-viewer on the server at all, the problem is how to easily exclude it. Your link is a great resource, yet, it unfortunately doesn't solve this issue here, as the error is actually not in the angular app. The check probably would need to be inside of pdf.js or rather ng2-pdf-viewer would need to define the global variables, see https://github.com/angular/universal/blob/main/docs/gotchas.md .

Hence, Im currently trying to exclude the pdf viewer from the build for the server, but this requires a custom webpack config where I have ng2-pdf-viewer in ignorePlugins . This works, but destroys a lot the advantages of the optimized builder of angular and I will have to see how easy it is to maintain.

[VadimDez]

After trying several workarounds and spending several days 😵‍💫, I might just have found a quick solution for the server side rendering issue, could you please test the following and let me know if this is working for you as well:

In your angular.json find the "server" part and append to the options this line:

"externalDependencies": ["canvas"]

So it should look similar to this:

{
       ...
        "server": {
          "builder": "@angular-devkit/build-angular:server",
          "options": {
            "outputPath": "dist/project-name/server",
            "main": "server.ts",
            "tsConfig": "tsconfig.server.json",
            "inlineStyleLanguage": "scss",
            "externalDependencies": ["canvas"]
          },
          "configurations": {
            ...
          }
          ...
        }
  ...
}

[alex-dietz]

Great solution, too bad that Angular doesn't provide this idea in their documentation for ssr! Thank you so much for the effort! Works great!

[ODAncona]

It's not working for my part. I still get another errors. For instance, I get:

const userAgent = navigator.userAgent || "";
                              ^
ReferenceError: navigator is not defined

[stale[bot]]

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. Thank you for your contributions.

[k-kraus-aracom]

It's not working for my part. I still get another errors. For instance, I get:

const userAgent = navigator.userAgent || "";
                              ^
ReferenceError: navigator is not defined

@ODAncona Did you find any solution to fix this error?

[stale[bot]]

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. Thank you for your contributions.

[AnthonyNahas]

@VadimDez noway! this fixed the problem! after many days ... noway ... it works!!!!!!!!

[NobinPegasus]

I'm using gatsby to build a static website. After installing pdfjs and trying to build the website. I'm facing the same error. Can anyone suggest any fix?

[ODAncona]

It's not working for my part. I still get another errors. For instance, I get:

const userAgent = navigator.userAgent || "";
                              ^
ReferenceError: navigator is not defined

@ODAncona Did you find any solution to fix this error?

No.... and you ?

[samcyn]

I'm using gatsby to build a static website. After installing pdfjs and trying to build the website. I'm facing the same error. Can anyone suggest any fix? hi @NobinPegasus you can try this out. inside the gatsby-node.js, copy and paste this

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