TypeError: cannot read property ‘Text’ of undefined

[kumar12356]

I am trying to use react-pdf to generate simple pdf with styles for some reason I am getting below error while using styled-components.
TypeError: cannot read property ‘Text’ of undefined .
Can someone please guide me in a right direction to resolve the issue?

Thanks

[kumar12356]

Also getting error below error while using in react app
Uncaught TypeError: _root2.default is not a constructor

[diegomura]

Could you please upload a snippet of code so I can see what you are doing?

[kumar12356]

may be I did something wrong. Can you help?

File :GeneratePDF.js

import React from 'react';
import { Page, Text, View, Document, StyleSheet } from '@react-pdf/renderer';

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

const Heading = styled.Text`
  margin: 10px;
  font-size: 22px;
  font-family: 'Helvetica';
`;

// Create Document Component
const MyDocument = () => (
  <Document>
    <Page size="A4" style={styles.page}>
     <Heading>
        D'oh!
      </Heading>
      <View style={styles.section}>
        <Text>Section #1</Text>
      </View>
      <View style={styles.section}>
        <Text>Section #2</Text>
      </View>
    </Page>
  </Document>
);
Export default MyDocument;

App.js

import React from 'react'
import GeneratePdf from ‘./components/GeneratePDF’
import PDFDownloadLink from ‘@react-pdf/renderer’
import './App.css';

Class App extends Component {
render() {
  return ( 
<div className =“App”>
<PDFDownloadLink document ={<Generate
<PDFDownloadLink document={<GeneratePdf/> "somename.pdf">
      {({ blob, url, loading, error }) => (loading ? 'Loading document...' : 'Download now!')}
    </PDFDownloadLink>
</div>
);
}
}
Export default App;

[kumar12356]

I will send the correct snippet tonight. I am not able to send correct snippet through my phone

[diegomura]

From where are you importing styled?

[kumar12356]

import styled from '@react-pdf/styled-components';

[kumar12356]

i
Below is the code I have right now :
GeneratePDF.JS : import React from 'react';
import { Page, Text, View, Document, StyleSheet } from '@react-pdf/renderer';
import styled from '@react-pdf/styled-components';

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

const Heading = styled.Textmargin: 10px; font-size: 22px; font-family: 'Helvetica';;

// Create Document Component
const MyDocument = () => (



D'oh!


Section #1


Section #2



);
Export default MyDocument;

File: App.js

import React,{Component} from 'react'
import GeneratePdf from ‘./components/GeneratePDF’
import PDFDownloadLink from ‘@react-pdf/renderer’
import './App.css';

Class App extends Component {
render() {
return (

"somename.pdf"> {({ blob, url, loading, error }) => (loading ? 'Loading document...' : 'Download now!')}

); } } Export default App;

[kumar12356]

Can anyone help me to point in right direction?

[diegomura]

To be honest I don’t know why styled components it’s not working. Everything seems correct. Are you using styled-components for the dom also? Maybe you are having some type of collision there. Maybe it’s your build system that’s causing trouble. I guess one quick way of checking that is looking if ‘styled.h1’ works on that snippet.

Otherwise, I would recommend not using styled-components for React-pdf. You can achieve exactly the same by just defining styled with the style sheet api

[kumar12356]

When using styled.h1 we are getting TypeError as _react_pdf_styled_components_webpack_imported_module_3__default.a.h1 is not a function

[diegomura]

Well... not sure. I cannot say based on the available information. But clearly styled is undefined for you. Please check for circular import dependencies. What are you using to bundle your project?

[diegomura]

This issues is being tracked here react-pdf/styled-components#4