I've been breaking my head for past few hours fixing react-pdf package related issue. I have tried various examples available online. But I am facing the same error message.
Error: Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: undefined. You likely forgot to export your component from the file it's defined in, or you might have mixed up default and named imports. Check the render method of PDFContainer.
PDF Container File
import React from 'react';
import { Document, PDFDownloadLink } from 'react-pdf';
import { connect } from 'react-redux';
import exportPDF from 'Components/ExportAnswersPdf';
import { fetchQuestionnaireResults } from 'Actions/QuestionnaireResultsAction';
import ServiceFactory from '../service-factory';
export class PDFContainer extends React.Component {
constructor(props) {
super(props);
this.state = {
isOpen: false,
export: null,
};
}
handleApprove = (Params) => {
ServiceFactory.exportAnswers(
Params
).then((response) => {
this.handleCloseModal();
this.setState({
export: response,
});
});
}
render() {
return (
<div>
{ this.state.export !== null ? (
<div className='document'>
<PDFDownloadLink
document={(
<Document>
<exportPDF />
</Document>
)}
fileName='answers.pdf'
>
{({ blob, url, loading, error }) => (loading ? 'Loading document...' : 'Download now!')}
</PDFDownloadLink>
</div>
) : null }
</div>
);
}
}
export default PDFContainer;
Export PDF Page function
import React from 'react';
import { Page, Text, View } from 'react-pdf';
const exportPDF = () => {
return (
<Page>
<View>
<Text>Section #1</Text>
</View>
</Page>
);
};
export default exportPDF;
Before trying to populate any data, I thought I would test out the basic implementation of just downloading the PDF and later populate data with the state value. Any help would be much appreciated here.
