./node_modules/.pnpm/canvas@2.11.2/node_modules/canvas/build/Release/canvas.node Module parse failed: Unexpected character '�' (1:2)

[192114]

Before you start - checklist

• I followed instructions in documentation written for my React-PDF version
• I have checked if this bug is not already reported
• I have checked if an issue is not listed in Known issues
• If I have a problem with PDF rendering, I checked if my PDF renders properly in PDF.js demo

Description

'use client' is already written in the code and import by next/dynamic(ssr: false)

I get the following error when dev:

./node_modules/.pnpm/canvas@2.11.2/node_modules/canvas/build/Release/canvas.node
Module parse failed: Unexpected character '�' (1:2)
You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file. See https://webpack.js.org/concepts#loaders
(Source code omitted for this binary file)

Steps to reproduce

This is codesandbox

Expected behavior

I expect no errors

Actual behavior

Uncaught ModuleParseError: Module parse failed: Unexpected character '�' (1:2)

Additional information

No response

Environment

• "next": "13.4.1"
• "react-pdf": "^7.0.1"

[wojtekmaj]

Try not running react-pdf server side. It doesn't make a lot of sense to be honest, since canvas needs to be rendered in the browser anyway.

Check out this solution here: #1504 (comment)

[192114]

I have set 'use client' directive and use dynamic import, not solved😫

// page.tsx
import dynamic, { DynamicOptions } from "next/dynamic";

const Component = dynamic(() => import("../components/PdfViewer"), {
  ssr: false,
});

export default function Home() {
  return <Component />;
}

// component

"use client";
import { Document, Page, pdfjs } from "react-pdf";
import { useState } from "react";

...


return (
    <>
      <nav>
        <button onClick={goToPrevPage}>Prev</button>
        <button onClick={goToNextPage}>Next</button>
        <p>
          Page {pageNumber} of {numPages}
        </p>
      </nav>

      {typeof window !== "undefined" && (
        <Document
          // file={resumeInfo.resumeUrl}
          file="/sample.pdf"
          onLoadSuccess={onDocumentLoadSuccess}
        >
          <Page pageNumber={pageNumber} />
        </Document>
      )}
    </>
  );

[FengeRVictor]

I have the same issue.

[FengeRVictor]

Ok, in next.config.js :

/** @type {import('next').NextConfig} */
const nextConfig = {
  webpack: (
    config, options
  ) => {
    // Important: return the modified config
    config.module.rules.push({
      test: /\.node/,
      use: 'raw-loader',
    });
    return config;
  },
};

module.exports = nextConfig;

with npm install -D raw-loader

[kusalkalinga00]

Ok, in next.config.js :

/** @type {import('next').NextConfig} */
const nextConfig = {
  webpack: (
    config, options
  ) => {
    // Important: return the modified config
    config.module.rules.push({
      test: /\.node/,
      use: 'raw-loader',
    });
    return config;
  },
};

module.exports = nextConfig;

with npm install -D raw-loader

this fix for me also, Next js 13.4 app router .

[rohankm]

im facing the same issue and the above method is not working for me

[liowalex]

Ok, in next.config.js :

/** @type {import('next').NextConfig} */
const nextConfig = {
  webpack: (
    config, options
  ) => {
    // Important: return the modified config
    config.module.rules.push({
      test: /\.node/,
      use: 'raw-loader',
    });
    return config;
  },
};

module.exports = nextConfig;

with npm install -D raw-loader

If you're using this fix and happen to be using the stripe package, or any other packages with .node files, you might want to be more specific with the matcher phrase:

stripe/stripe-node#1896 (comment)

[ssreynoso]

/** @type {import('next').NextConfig} */
const nextConfig = {
    webpack: (config) => {
        // Important: return the modified config
        config.module.rules.push({
            test: /\.node/,
            use: 'raw-loader',
        })
        return config
    },
}

module.exports = nextConfig

Worked for me. I'm using Next 14.0.3. Thanks!