Error: PDFViewer is a web specific API. Using Electron.

Description of bug Hello,

I am trying to make an Electron app which allows the user to modify the PDF, displays the changes immediately and allows the user to download or print the finished PDF document. All of this I want to be accessible in a modal React window.

At first, I tried to use the ReactPDF.render() method to save the PDF file locally and then display it but this causes my whole application to refresh. Is there any way to prevent this?

Then, I tried to use the PDFViewer component. However, this gives me the error:

Uncaught Error: PDFViewer is a web specific API. Or you're either using this component on Node, or your bundler is not loading react-pdf from the appropiate web build.

I searched for a solution to this error and found this https://github.com/diegomura/react-pdf/issues/908

I tried the solution which got rid of the error message, but now it’s not displaying anything. What am I doing wrong? Do I have to do something differently because I am using Electron?

To Reproduce Here is a simplified code snippet:

import React, { Component } from 'react';
import Modal from 'react-modal';
import {
    Page,
    Text,
    View,
    Document,
    Image,
    StyleSheet,
    PDFViewer,
} from '@react-pdf/renderer';

const styles = StyleSheet.create({
    page: {
        flexDirection: 'row',
        backgroundColor: '#E4E4E4'
    },
    section: {
        margin: 10,
        padding: 10,
        flexGrow: 1
    }
});

const PDFDoc = () => (
    <Document>
        <Page size="A4" style={styles.page}>
            <View style={styles.section}>
                <Text>Section #1</Text>
            </View>
            <View style={styles.section}>
                <Text>Section #2</Text>
            </View>
        </Page>
    </Document>
);

export default class OpenModal extends Component {
    constructor() {
        super();
        this.state = {
            // state for showing or hiding modal window
            showModal: false,
            isClient: false,
        };
    }

    setIsClient() {
        this.setState({
            isClient: true,
        });
    }

    componentDidMount() {
        this.setIsClient;
    }

    // State changing function for opening modal window
    handleOpenModal = () => {
        this.setState({
            showModal: true,
        });
    };

    render() {
        return (
            <div>
                {/* Button for opening modal window */}
                <button
                    type="button"
                    onClick={this.handleOpenModal}>
                    Open Modal Window
                </button>
                <Modal>
                    <div id="pdf-app">
                        {this.state.isClient && (
                            <PDFViewer>
                                <PDFDoc />
                            </PDFViewer>
                        )}
                    </div>
                </Modal>
            </div>
        );
    }
}

Expected Behavior: I expected this to display the PDF Document.

Desktop:

• OS: Windows
• Browser: I am using the Electron framework
• React-pdf version: 1.6.8

[diegomura]

At first, I tried to use the ReactPDF.render() method to save the PDF file locally and then display it but this causes my whole application to refresh. Is there any way to prevent this?

Glad to hear this got fixed!

Then, I tried to use the PDFViewer component. However, this gives me the error.

Because of how react-pdf is shipped there are different entrypoints for node and web projects. This is mostly because both some APIs and implementations are different because of the differences of both environments. Electron apps (as well as server side rendered sites) fall kind of in the middle of this. It’s a node app that get’s rendered in a web view. Unfortunately there is no support for this right now. You can try importing react-pdf from @react-pdf/renderer/lib/react-pdf.browser.es.js or @react-pdf/renderer/lib/react-pdf.browser.cjs.js but I can guarantee it will work

[shunmian]

When using usePDF hook in electron, I also got the similar error usePDF is a web specific API. You're either using this component on Node, or your bundler is not loading react-pdf from the appropriate web build. in production while it works in development. @diegomura any guidance on this?

UPDATE: I have changed import { Font, usePDF } from '@react-pdf/renderer' to import { Font, usePDF } from '@react-pdf/renderer/lib/react-pdf.browser.es.js', as @diegomura suggested in previous comment and the problem is solved!