React-pdf: ReferenceError: _a is not defined

[ellej16]

Describe the bug

Node version: 8.10.0
Project's react/react-dom version: 16.3.2
Hello! thanks for this awesome library!

I'm at my wit's end trying to make it work with our project, but I can't (yet) make it work

I tried investigating (as the error explicitly says it's on yoga-layout-prebuilt) but everyone here seems to have no problem with the prebuilt library.

I upgraded React to 16.8.3 as well but to no avail.
I noticed on other issues that there's a mention on a "proper webpack" configuration, not sure if this is a "proper" one:

To Reproduce

Document component:

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



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

// Create Document Component
const MyDocument = () => (
  <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>
);

Code:

export default MyDocument


View:
import { PDFViewer } from '@react-pdf/renderer';
import MyDocument from 'document';

... 
render(){
return (
   ...some divs here...
     <PDFViewer
          >
            <MyDocument/>
          </PDFViewer>
);
}

Expected behavior
Samples to work

Screenshots

Desktop (please complete the following information):

• OS: MacOS Mojave 10.14.5
• Browser Chrome 75.0.3770.100
• React-pdf version "@react-pdf/renderer@^1.6.3": version "1.6.3"

[mphealy]

I experienced this error as well and have 2 possible work arounds. I believe the issue is this:
nbind.js has an undeclared variable. when your project is built it pulls in nbind.js during minification to the main js file, which has "option strict", causing the error you see.

Option 1
In the .babelrc file at the root of your project add the following:
"ignore": [ "node_modules/yoga-layout-prebuilt" ]

Option 2
Declare the variable in nbind.js:
Open node_modules/yoga-layout-prebuilt/yoga-layout/build/Release/nbind.js
On line 1146 find this:
_a = _typeModule(_typeModule),
and change to this:
var _a = _typeModule(_typeModule);

Unfortunately we ultimately went with option 2.
Another downside to this prebuilt nbind yoga c++ mapping - it automatically allocates 128MB of memory upon initialization which can be seen on lines 460 and 464 of nbind.js.
While this would not be an issue for most, our requirement is to support IE 11 (yes, I _do_ know what year it is). IE leaks this memory with each page refresh and eventually crashes the process.

[Stephen-Haynes]

I have had this same issue when importing anything from @react-pdf/renderer. I was only able to get it to work by using @mphealy solution option 2 with a slight modification.

On line 1146 var _a = _typeModule(_typeModule); threw and error so I used var _a; _a = _typeModule(_typeModule),

I use this same package in another project with no issues, and I went so far as to copy the entire package.json and webpack from the other project and reinstall and that doesn't solve it.

I'd love to find a more permanent solution to this as I feel like I've set a trap for a future dev.

[GProst]

We're having the same issue after we decided to move react component that renders PDF using code-splitting (React.lazy)
If we don't use code-splitting it works fine...

Doesn't work even if it isn't transformed by babel and if it's not minified

[jehanrey]

We encountered this issue while trying to integrate this cool library in our app. I tried the solutions suggested by @mphealy. At first the 1st option was working fine locally, however I was encountering build problems. I ended up going for the 2nd option and using npx patch-package to get it to work.