diegomura/react-pdf

<Image /> throws error when using in NextJS with swcMinify

Open

#2.063 geöffnet am 26. Okt. 2022

Auf GitHub ansehen
 (5 Kommentare) (0 Reaktionen) (0 zugewiesene Personen)JavaScript (1.116 Forks)batch import
help wanted

Repository-Metriken

Stars
 (13.687 Stars)
PR-Merge-Metriken
 (Keine gemergten PRs in 30 T)

Beschreibung

Describe the bug I'm using react-pdf with nextjs (v12). When running in dev mode everything works as expected. When building the app for production with swcMinfiy: true in next.config.js I'm getting the following error on the component

Uncaught (in promise) TypeError: Cannot read properties of undefined (reading 'width')
    at drawImage (_app-4582e1627b46c737.js:115:440420)
    at renderImage (_app-4582e1627b46c737.js:115:440829)
    at renderNode (_app-4582e1627b46c737.js:115:452973)
    at d (_app-4582e1627b46c737.js:115:452461)
    at Array.forEach (<anonymous>)
    at renderChildren (_app-4582e1627b46c737.js:115:452482)
    at renderNode (_app-4582e1627b46c737.js:115:452985)
    at d (_app-4582e1627b46c737.js:115:452461)
    at Array.forEach (<anonymous>)
    at renderChildren (_app-4582e1627b46c737.js:115:452482)

Using swcMinify: false it works as expected. But swc is considered best practice/ stable and is on per default starting Nextjs v13. So leaving it off can't be the solution.

To Reproduce as described above

Expected behavior Should not throw error

Screenshots If applicable, add screenshots to help explain your problem.

Desktop (please complete the following information):

  • OS: MacOS M1
  • Browser: Chrome
  • Nextjs v12
  • React v18
  • React-pdf v.3.0.0

Contributor Guide

Research-Richtung
Untersuche, wie sich swcMinify in Next.js auf das Rendering der Image Komponente von react pdf auswirkt. Der Fehler tritt während des Produktions Builds mit aktiviertem swcMinify auf. Sieh dir die Funktionen drawImage und renderImage im react pdf Quellcode an, um zu sehen, wie sie mit Bildabmessungen umgehen. Prüfe, ob die Minifizierung Eigenschaften wie 'width' umbenennt oder entfernt. Erwäge, Tests mit verschiedenen Minifizierungseinstellungen durchzuführen oder das Problem in einem minimalen Next.js Projekt zu reproduzieren.
Tech Stack
javascriptreactnextjs
Domain
frontend
Issue Type
Fehler
SchwierigkeitGeschätzte Implementierungsschwierigkeit für neue Contributors, von 1 für sehr kleine Änderungen bis 5 für Expertenarbeit.
3
Geschätzte ZeitEin grober Zeitrahmen, um zu recherchieren, zu implementieren, zu testen und einen Pull Request vorzubereiten.
1-3 Stunden
AktivitätsstatusWie verfügbar das Issue gerade wirkt: frisch, aktiv, stale, blockiert oder wartet auf Maintainer-Input.
Aktiv
KlarheitWie klar das Issue die erwartete Änderung, Akzeptanzkriterien und den nächsten Schritt erklärt.
Klar
Voraussetzungen
ReactNext.jsGit
EinsteigerfreundlichkeitEin Score von 1 bis 100, der schätzt, wie zugänglich dieses Issue für First-Time Contributors ist.
60