Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

build error: cant's resolve 'canvas' in '...\.pnpm\...\build' when use pnpm #1045

Closed
4 tasks done
zeffon opened this issue Aug 30, 2022 · 3 comments
Closed
4 tasks done
Labels
question Further information is requested stale

Comments

@zeffon
Copy link

zeffon commented Aug 30, 2022

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

I build my project(webpack 5) get an error when using react-pdf of v5.7.2.

Module not found: Error: Can't resolve 'canvas' in 'C:\Users\Zeffon\Desktop\app\english\node_modules\.pnpm\pdfjs-dist@2.9.359\node_modules\pdfjs-dist\legacy\build'

But It can run normally and It's just an error when build. I tired to use different verision, but it failed. I tired to install react-pdf of came version pdfjs-dist. But it failed too. So I am wondering if it's because I use 'pnpm'.
And what should i do?

Steps to reproduce

  1. install deps
"react-pdf": "^5.7.2"
"pdfjs-dist": "^2.12.313",
  1. config
import path from 'path'
import CopyWebpackPlugin from 'copy-webpack-plugin'
// eslint-disable-next-line no-restricted-globals
const cMapsDir = path.join(path.dirname(require.resolve('pdfjs-dist/package.json')), 'cmaps')

module.exports = function (context, options) {
  return {
    name: 'custom-docusaurus-plugin',
    configureWebpack() {
      return {
        plugins: [
          new CopyWebpackPlugin({
            patterns: [{ from: cMapsDir, to: 'cmaps/' }]
          })
        ]
      }
    }
  }
}
  1. use
import { Document, Page, pdfjs } from 'react-pdf/dist/esm/entry.webpack5'
import pdfjsWorker from 'pdfjs-dist/build/pdf.worker.entry'
pdfjs.GlobalWorkerOptions.workerSrc = pdfjsWorker
<Document
  file={file}
  onLoadSuccess={onDocumentLoadSuccess}
  options={options}
  renderMode="none"
>
  <Page pageNumber={pageNumber} width={size && size.width} renderMode="none" />
</Document>

Expected behavior

build success

Actual behavior

build fail

Additional information

No response

Environment

  • Browser (if applicable):
  • React-PDF version:
  • React version:
  • Webpack version (if applicable):
@zeffon zeffon added the bug Something isn't working label Aug 30, 2022
@wojtekmaj
Copy link
Owner

I believe your problem isn't as much about pnpm as about running React-PDF server-side, which makes no sense. You can't render canvas on the server.

@wojtekmaj wojtekmaj added question Further information is requested and removed bug Something isn't working labels Sep 1, 2022
@github-actions
Copy link
Contributor

github-actions bot commented Dec 5, 2022

This issue is stale because it has been open 90 days with no activity. Remove stale label or comment or this issue will be closed in 14 days.

@github-actions github-actions bot added the stale label Dec 5, 2022
@github-actions
Copy link
Contributor

This issue was closed because it has been stalled for 14 days with no activity.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
question Further information is requested stale
Projects
None yet
Development

No branches or pull requests

2 participants