TypeError: Cannot set property 'getCurrentStack' of undefined

OS: MacOS Sierra

React-pdf version: 1.0.0-alpha.18

Description: Including react-pdf in an existing app as a proof of concept using code snippet below. React-pdf renders an iframe on server render, but on client side it blows up with this error:

2FBN2-NKMGU-EJKY8-ZANKZ-SUJZF:16 Warning: Could not replay rendering after an error. This is likely a bug in React. Please file an issue.
2FBN2-NKMGU-EJKY8-ZANKZ-SUJZF:16 TypeError: Cannot set property 'getCurrentStack' of undefined
    at Object.setCurrentFiber (react-reconciler.development.js:562)
    at performUnitOfWork (react-reconciler.development.js:7888)
    at workLoop (react-reconciler.development.js:7940)
    at renderRoot (react-reconciler.development.js:7980)
    at performWorkOnRoot (react-reconciler.development.js:8598)
    at performWork (react-reconciler.development.js:8520)
    at performSyncWork (react-reconciler.development.js:8492)
    at requestWork (react-reconciler.development.js:8392)
    at scheduleWork (react-reconciler.development.js:8256)
    at scheduleRootUpdate (react-reconciler.development.js:8823)

The component tree is:

    in InternalBlobProvider
    in PDFViewer
    in div
    in PdfContainer
    in ErrorBoundary(PdfContainer)
    in Connect(ErrorBoundary(PdfContainer))
....
    in App
    in Provider

How to replicate issue including code snippet (if applies):

import React from 'react';
import ReactDOM from 'react-dom';
import { Provider } from 'react-redux';
import { Document, Page, View, Text, PDFViewer } from '@react-pdf/renderer';
import configureStore from '../common/configure-store';

const store = configureStore(window.reduxData, true);

const PdfApp = () => (
  <Document>
    <Page size="A4">
      <View>
        <Text>Header</Text>
      </View>
      <View>
        <Text>Body</Text>
      </View>
      <View>
        <Text>Footer</Text>
      </View>
    </Page>
  </Document>
);

const PdfContainer = () => (
  <div>
    <PDFViewer>
      <PdfApp />
    </PDFViewer>
  </div>
);

const App = () => (
  <main>
    <...subcomponent tree>
      <PdfContainer />
    </...subcomponent tree>
  </main>
);

ReactDOM.render((
  <Provider store={store}>
    <App />
  </Provider>
), document.getElementById('react-root'));

Any pointers will be much appreciated 😄

[markusjohnsson]

I’m seeing this error too. It appeared after splitting out my component using <BlobProvider> into a separate webpack chunk and loading with lazy/Suspense.

// ExportPanel.tsx
const DocumentViewer = React.lazy(() => import('./DocumentViewer'));

    // in render():
      this.state.document != null ?
      <React.Suspense
          fallback={<div>redacted</div>}>
          <DocumentViewer
               document={this.state.document}
               onClose={() => this.setState({ document: null, isSaving: false })}
          />
      </React.Suspense> 

// DocumentViewer.tsx
const DocumentViewer = ({ document }) => (
    <BlobProvider
        document={document}>
        {({ blob, url, loading, error }) => {
             // redacted...
        }}
    </BlobProvider>

Package versions

"@react-pdf/renderer": "^1.4.0",
"react": "^16.8.1",
"react-dom": "^16.8.1",

EDIT: I’ve actually had the react-pdf code in a separate chunk at an earlier point too, but I did not use lazy+Suspense to load the module then.

[DuncanMacWeb]

It’s still an issue, but let’s close for now; we are able to work around this using process.env.NODE_ENV = 'production';.

If this is an issue for anyone else (particularly if it’s a blocking issue), please comment and let’s work on a resolution.