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 😄

Issue Analytics

State:
Created 5 years ago
Comments:12 (9 by maintainers)

Top GitHub Comments

1reaction

markusjohnssoncommented, Feb 28, 2019

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.

1reaction

DuncanMacWebcommented, Jan 16, 2019

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.

Top Results From Across the Web

ReactDOM RSS renderToString production error

The problem is that, in Webpack, you've set the following: let config = { mode: "development", .... But either on the Winblows /...

cannot set property of undefined angular

Unfortunately the Cannot set property 'getCurrentStack' of undefined error is still being raised without the process.env.NODE_ENV = 'production' workaround ...

Kendo Grid Date in KendoReact | Telerik Forums

I am trying to enable filtering on a date field. Everytime I hit the calendar filter I get TypeError: Cannot set property 'getCurrentStack'...

How to Read React Errors (fix 'Cannot read property of ...

If you're using Create React App, it probably threw up a screen like this: TypeError. Cannot read property 'map' of undefined.

setextrastackframe - You.com | The search engine you control.

react.production.min.js:22 Uncaught TypeError: Cannot read property 'setExtraStackFrame' of undefined at setCurrentlyValidatingElement ...