ReferenceError: _a is not defined

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”

[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.

[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.