React-pdf: Element type is invalid in PageInternal.render after upgrade to Webpack 4

Created on 25 Jul 2018 · 5Comments · Source: wojtekmaj/react-pdf

Before you start - checklist

[x] I followed instructions in documentation written for my React-PDF version
[x] I have checked if this bug is not already reported
[x] I have checked if an issue is not listed in Known issues

Description
After upgrade to webpack 4, when we try to show the PDF, the application resets to blank screen on any browser (see below) and the preserved console log shows an uncaught error Element type is invalid in PageInternal.render. See below for full console log. The same code works ok when built with webpack 3.

Steps to reproduce
N/A, the source, where we encounter this issue, is not open.

Expected behavior
Displaying PDF using react-pdf should continue to work after upgrade to webpack4.

Environment

Browser: Current Chrome dev ( 69.0.3493.3), or Opera dev (56.0.3013.0), or IE11
React-PDF version: 4.0.0-beta, 4.0.0-beta.2 with either pdfjs-dist 2.0.489 or experimental 2.0.550

Additional information
Linking to the general webpack 4 compatibility issue #179.

And here's the full log:

19:30:01.636 webpack-internal:///../node_modules/fbjs/lib/warning.js:33 Warning: React.createElement: type is invalid -- expected a string (for built-in components) or a class/function (for composite components) but got: object. You likely forgot to export your component from the file it's defined in, or you might have mixed up default and named imports.

Check the render method of `PageInternal`.
    in PageInternal
    in Page (created by PdfViewer)
    in div (created by Document)
    in Document (created by PdfViewer)
    in div (created by DialogContent)
    in DialogContent (created by WithStyles(DialogContent))
    in WithStyles(DialogContent) (created by PdfViewer)
    in div (created by PdfViewer)
    in div (created by Paper)
    in Paper (created by WithStyles(Paper))
    in WithStyles(Paper) (created by Dialog)
    in Transition (created by Fade)
    in Fade (created by WithTheme(Fade))
    in WithTheme(Fade) (created by Dialog)
    in RootRef (created by Modal)
    in div (created by Modal)
    in Portal (created by Modal)
    in Modal (created by WithStyles(Modal))
    in WithStyles(Modal) (created by Dialog)
    in Dialog (created by WithStyles(Dialog))
    in WithStyles(Dialog) (created by PdfViewer)
    in PdfViewer (created by WithStyles(PdfViewer))
    in WithStyles(PdfViewer) (created by withHandlers(WithStyles(PdfViewer)))
    in withHandlers(WithStyles(PdfViewer)) (created by withState(withHandlers(WithStyles(PdfViewer))))
    in withState(withHandlers(WithStyles(PdfViewer))) (created by withState(withState(withHandlers(WithStyles(PdfViewer)))))
    in withState(withState(withHandlers(WithStyles(PdfViewer)))) (created by withState(withState(withState(withHandlers(WithStyles(PdfViewer))))))
    in withState(withState(withState(withHandlers(WithStyles(PdfViewer))))) (created by withState(withState(withState(withState(withHandlers(WithStyles(PdfViewer)))))))
    in withState(withState(withState(withState(withHandlers(WithStyles(PdfViewer)))))) (created by branch(withState(withState(withState(withState(withHandlers(WithStyles(PdfViewer))))))))
    in branch(withState(withState(withState(withState(withHandlers(WithStyles(PdfViewer))))))) (created by Connect(branch(withState(withState(withState(withState(withHandlers(WithStyles(PdfViewer)))))))))
    in Connect(branch(withState(withState(withState(withState(withHandlers(WithStyles(PdfViewer)))))))) (created by ToolTip)
    in div (created by ToolTip)
    in ToolTip (created by WithStyles(ToolTip))
    in WithStyles(ToolTip) (created by lifecycle(WithStyles(ToolTip)))
    in lifecycle(WithStyles(ToolTip)) (created by Connect(lifecycle(WithStyles(ToolTip))))
    in Connect(lifecycle(WithStyles(ToolTip))) (created by withHandlers(Connect(lifecycle(WithStyles(ToolTip)))))
    in withHandlers(Connect(lifecycle(WithStyles(ToolTip)))) (created by withProps(withHandlers(Connect(lifecycle(WithStyles(ToolTip))))))
    in withProps(withHandlers(Connect(lifecycle(WithStyles(ToolTip))))) (created by withState(withProps(withHandlers(Connect(lifecycle(WithStyles(ToolTip)))))))
    in withState(withProps(withHandlers(Connect(lifecycle(WithStyles(ToolTip)))))) (created by withState(withState(withProps(withHandlers(Connect(lifecycle(WithStyles(ToolTip))))))))
    in withState(withState(withProps(withHandlers(Connect(lifecycle(WithStyles(ToolTip))))))) (created by branch(withState(withState(withProps(withHandlers(Connect(lifecycle(WithStyles(ToolTip)))))))))
    in branch(withState(withState(withProps(withHandlers(Connect(lifecycle(WithStyles(ToolTip)))))))) (created by KpiChart)
    in div (created by KpiChart)
    in div (created by KpiChart)
    in KpiChart (created by WithStyles(KpiChart))
    in WithStyles(KpiChart) (created by lifecycle(WithStyles(KpiChart)))
    in lifecycle(WithStyles(KpiChart)) (created by withPropsOnChange(lifecycle(WithStyles(KpiChart))))
    in withPropsOnChange(lifecycle(WithStyles(KpiChart))) (created by withHandlers(withPropsOnChange(lifecycle(WithStyles(KpiChart)))))
    in withHandlers(withPropsOnChange(lifecycle(WithStyles(KpiChart)))) (created by withState(withHandlers(withPropsOnChange(lifecycle(WithStyles(KpiChart))))))
    in withState(withHandlers(withPropsOnChange(lifecycle(WithStyles(KpiChart))))) (created by withState(withState(withHandlers(withPropsOnChange(lifecycle(WithStyles(KpiChart)))))))
    in withState(withState(withHandlers(withPropsOnChange(lifecycle(WithStyles(KpiChart)))))) (created by withState(withState(withState(withHandlers(withPropsOnChange(lifecycle(WithStyles(KpiChart))))))))
    in withState(withState(withState(withHandlers(withPropsOnChange(lifecycle(WithStyles(KpiChart))))))) (created by withState(withState(withState(withState(withHandlers(withPropsOnChange(lifecycle(WithStyles(KpiChart)))))))))
    in withState(withState(withState(withState(withHandlers(withPropsOnChange(lifecycle(WithStyles(KpiChart)))))))) (created by withState(withState(withState(withState(withState(withHandlers(withPropsOnChange(lifecycle(WithStyles(KpiChart))))))))))
    in withState(withState
printWarning @ webpack-internal:///../node_modules/fbjs/lib/warning.js:33
19:30:01.637 webpack-internal:///../node_modules/fbjs/lib/invariant.js:49 Uncaught Error: Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: object. You likely forgot to export your component from the file it's defined in, or you might have mixed up default and named imports.

Check the render method of `PageInternal`.
    at invariant (webpack-internal:///../node_modules/fbjs/lib/invariant.js:42)
    at throwOnInvalidElementType (webpack-internal:///../node_modules/react-dom/cjs/react-dom.development.js:5393)
    at createFiberFromElement (webpack-internal:///../node_modules/react-dom/cjs/react-dom.development.js:5359)
    at createChild (webpack-internal:///../node_modules/react-dom/cjs/react-dom.development.js:7554)
    at reconcileChildrenArray (webpack-internal:///../node_modules/react-dom/cjs/react-dom.development.js:7805)
    at reconcileChildFibers (webpack-internal:///../node_modules/react-dom/cjs/react-dom.development.js:8121)
    at reconcileChildrenAtExpirationTime (webpack-internal:///../node_modules/react-dom/cjs/react-dom.development.js:8240)
    at reconcileChildren (webpack-internal:///../node_modules/react-dom/cjs/react-dom.development.js:8231)
    at updateFragment (webpack-internal:///../node_modules/react-dom/cjs/react-dom.development.js:8268)
    at beginWork (webpack-internal:///../node_modules/react-dom/cjs/react-dom.development.js:9004)
19:30:01.692 webpack-internal:///../node_modules/react-dom/cjs/react-dom.development.js:9643 The above error occurred in one of your React components:
    in div (created by PageInternal)
    in PageInternal
    in Page (created by PdfViewer)
    in div (created by Document)
    in Document (created by PdfViewer)
    in div (created by DialogContent)
    in DialogContent (created by WithStyles(DialogContent))
    in WithStyles(DialogContent) (created by PdfViewer)
    in div (created by PdfViewer)
    in div (created by Paper)
    in Paper (created by WithStyles(Paper))
    in WithStyles(Paper) (created by Dialog)
    in Transition (created by Fade)
    in Fade (created by WithTheme(Fade))
    in WithTheme(Fade) (created by Dialog)
    in RootRef (created by Modal)
    in div (created by Modal)
    in Portal (created by Modal)
    in Modal (created by WithStyles(Modal))
    in WithStyles(Modal) (created by Dialog)
    in Dialog (created by WithStyles(Dialog))
    in WithStyles(Dialog) (created by PdfViewer)
    in PdfViewer (created by WithStyles(PdfViewer))
    in WithStyles(PdfViewer) (created by withHandlers(WithStyles(PdfViewer)))
    in withHandlers(WithStyles(PdfViewer)) (created by withState(withHandlers(WithStyles(PdfViewer))))
    in withState(withHandlers(WithStyles(PdfViewer))) (created by withState(withState(withHandlers(WithStyles(PdfViewer)))))
    in withState(withState(withHandlers(WithStyles(PdfViewer)))) (created by withState(withState(withState(withHandlers(WithStyles(PdfViewer))))))
    in withState(withState(withState(withHandlers(WithStyles(PdfViewer))))) (created by withState(withState(withState(withState(withHandlers(WithStyles(PdfViewer)))))))
    in withState(withState(withState(withState(withHandlers(WithStyles(PdfViewer)))))) (created by branch(withState(withState(withState(withState(withHandlers(WithStyles(PdfViewer))))))))
    in branch(withState(withState(withState(withState(withHandlers(WithStyles(PdfViewer))))))) (created by Connect(branch(withState(withState(withState(withState(withHandlers(WithStyles(PdfViewer)))))))))
    in Connect(branch(withState(withState(withState(withState(withHandlers(WithStyles(PdfViewer)))))))) (created by ToolTip)
    in div (created by ToolTip)
    in ToolTip (created by WithStyles(ToolTip))
    in WithStyles(ToolTip) (created by lifecycle(WithStyles(ToolTip)))
    in lifecycle(WithStyles(ToolTip)) (created by Connect(lifecycle(WithStyles(ToolTip))))
    in Connect(lifecycle(WithStyles(ToolTip))) (created by withHandlers(Connect(lifecycle(WithStyles(ToolTip)))))
    in withHandlers(Connect(lifecycle(WithStyles(ToolTip)))) (created by withProps(withHandlers(Connect(lifecycle(WithStyles(ToolTip))))))
    in withProps(withHandlers(Connect(lifecycle(WithStyles(ToolTip))))) (created by withState(withProps(withHandlers(Connect(lifecycle(WithStyles(ToolTip)))))))
    in withState(withProps(withHandlers(Connect(lifecycle(WithStyles(ToolTip)))))) (created by withState(withState(withProps(withHandlers(Connect(lifecycle(WithStyles(ToolTip))))))))
    in withState(withState(withProps(withHandlers(Connect(lifecycle(WithStyles(ToolTip))))))) (created by branch(withState(withState(withProps(withHandlers(Connect(lifecycle(WithStyles(ToolTip)))))))))
    in branch(withState(withState(withProps(withHandlers(Connect(lifecycle(WithStyles(ToolTip)))))))) (created by KpiChart)
    in div (created by KpiChart)
    in div (created by KpiChart)
    in KpiChart (created by WithStyles(KpiChart))
    in WithStyles(KpiChart) (created by lifecycle(WithStyles(KpiChart)))
    in lifecycle(WithStyles(KpiChart)) (created by withPropsOnChange(lifecycle(WithStyles(KpiChart))))
    in withPropsOnChange(lifecycle(WithStyles(KpiChart))) (created by withHandlers(withPropsOnChange(lifecycle(WithStyles(KpiChart)))))
    in withHandlers(withPropsOnChange(lifecycle(WithStyles(KpiChart)))) (created by withState(withHandlers(withPropsOnChange(lifecycle(WithStyles(KpiChart))))))
    in withState(withHandlers(withPropsOnChange(lifecycle(WithStyles(KpiChart))))) (created by withState(withState(withHandlers(withPropsOnChange(lifecycle(WithStyles(KpiChart)))))))
    in withState(withState(withHandlers(withPropsOnChange(lifecycle(WithStyles(KpiChart)))))) (created by withState(withState(withState(withHandlers(withPropsOnChange(lifecycle(WithStyles(KpiChart))))))))
    in withState(withState(withState(withHandlers(withPropsOnChange(lifecycle(WithStyles(KpiChart))))))) (created by withState(withState(withState(withState(withHandlers(withPropsOnChange(lifecycle(WithStyles(KpiChart)))))))))
    in withState(withState(withState(withState(withHandlers(withPropsOnChange(lifecycle(WithStyles(KpiChart)))))))) (created by withState(withState(withState(withState(withState(withHandlers(withPropsOnChange(lifecycle(WithStyles(KpiChart))))))))))
    in withState(withState(withState(withState(withState(withHandlers(withPropsOnChange(lifecycle(WithStyles(KpiChart))))))))) (created by withState(withState(withState(withState(withState(withState(withHandlers(withPropsOnChange(lifecycle(WithStyles(KpiChart)
logCapturedError @ webpack-internal:///../node_modules/react-dom/cjs/react-dom.development.js:9643
19:30:01.692 webpack-internal:///../node_modules/react-hot-loader/dist/react-hot-loader.development.js:175 Error: Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: object. You likely forgot to export your component from the file it's defined in, or you might have mixed up default and named imports.

Check the render method of `PageInternal`.
    at invariant (webpack-internal:///../node_modules/fbjs/lib/invariant.js:42)
    at throwOnInvalidElementType (webpack-internal:///../node_modules/react-dom/cjs/react-dom.development.js:5393)
    at createFiberFromElement (webpack-internal:///../node_modules/react-dom/cjs/react-dom.development.js:5359)
    at createChild (webpack-internal:///../node_modules/react-dom/cjs/react-dom.development.js:7554)
    at reconcileChildrenArray (webpack-internal:///../node_modules/react-dom/cjs/react-dom.development.js:7805)
    at reconcileChildFibers (webpack-internal:///../node_modules/react-dom/cjs/react-dom.development.js:8121)
    at reconcileChildrenAtExpirationTime (webpack-internal:///../node_modules/react-dom/cjs/react-dom.development.js:8240)
    at reconcileChildren (webpack-internal:///../node_modules/react-dom/cjs/react-dom.development.js:8231)
    at updateFragment (webpack-internal:///../node_modules/react-dom/cjs/react-dom.development.js:8268)
    at beginWork (webpack-internal:///../node_modules/react-dom/cjs/react-dom.development.js:9004)
error @ webpack-internal:///../node_modules/react-hot-loader/dist/react-hot-loader.development.js:175
19:30:02.121 webpack-internal:///../node_modules/fbjs/lib/warning.js:33 Warning: Can't call setState (or forceUpdate) on an unmounted component. This is a no-op, but it indicates a memory leak in your application. To fix, cancel all subscriptions and asynchronous tasks in the componentWillUnmount method.
    in PageInternal
    in Page (created by PdfViewer)
    in div (created by Document)
    in Document (created by PdfViewer)
    in div (created by DialogContent)
    in DialogContent (created by WithStyles(DialogContent))
    in WithStyles(DialogContent) (created by PdfViewer)
    in div (created by PdfViewer)
    in div (created by Paper)
    in Paper (created by WithStyles(Paper))
    in WithStyles(Paper) (created by Dialog)
    in Transition (created by Fade)
    in Fade (created by WithTheme(Fade))
    in WithTheme(Fade) (created by Dialog)
    in RootRef (created by Modal)
    in div (created by Modal)
    in Portal (created by Modal)
    in Modal (created by WithStyles(Modal))
    in WithStyles(Modal) (created by Dialog)
    in Dialog (created by WithStyles(Dialog))
    in WithStyles(Dialog) (created by PdfViewer)
    in PdfViewer (created by WithStyles(PdfViewer))
    in WithStyles(PdfViewer) (created by withHandlers(WithStyles(PdfViewer)))
    in withHandlers(WithStyles(PdfViewer)) (created by withState(withHandlers(WithStyles(PdfViewer))))
    in withState(withHandlers(WithStyles(PdfViewer))) (created by withState(withState(withHandlers(WithStyles(PdfViewer)))))
    in withState(withState(withHandlers(WithStyles(PdfViewer)))) (created by withState(withState(withState(withHandlers(WithStyles(PdfViewer))))))
    in withState(withState(withState(withHandlers(WithStyles(PdfViewer))))) (created by withState(withState(withState(withState(withHandlers(WithStyles(PdfViewer)))))))
    in withState(withState(withState(withState(withHandlers(WithStyles(PdfViewer)))))) (created by branch(withState(withState(withState(withState(withHandlers(WithStyles(PdfViewer))))))))
    in branch(withState(withState(withState(withState(withHandlers(WithStyles(PdfViewer))))))) (created by Connect(branch(withState(withState(withState(withState(withHandlers(WithStyles(PdfViewer)))))))))
    in Connect(branch(withState(withState(withState(withState(withHandlers(WithStyles(PdfViewer)))))))) (created by ToolTip)
    in div (created by ToolTip)
    in ToolTip (created by WithStyles(ToolTip))
    in WithStyles(ToolTip) (created by lifecycle(WithStyles(ToolTip)))
    in lifecycle(WithStyles(ToolTip)) (created by Connect(lifecycle(WithStyles(ToolTip))))
    in Connect(lifecycle(WithStyles(ToolTip))) (created by withHandlers(Connect(lifecycle(WithStyles(ToolTip)))))
    in withHandlers(Connect(lifecycle(WithStyles(ToolTip)))) (created by withProps(withHandlers(Connect(lifecycle(WithStyles(ToolTip))))))
    in withProps(withHandlers(Connect(lifecycle(WithStyles(ToolTip))))) (created by withState(withProps(withHandlers(Connect(lifecycle(WithStyles(ToolTip)))))))
    in withState(withProps(withHandlers(Connect(lifecycle(WithStyles(ToolTip)))))) (created by withState(withState(withProps(withHandlers(Connect(lifecycle(WithStyles(ToolTip))))))))
    in withState(withState(withProps(withHandlers(Connect(lifecycle(WithStyles(ToolTip))))))) (created by branch(withState(withState(withProps(withHandlers(Connect(lifecycle(WithStyles(ToolTip)))))))))
    in branch(withState(withState(withProps(withHandlers(Connect(lifecycle(WithStyles(ToolTip)))))))) (created by KpiChart)
    in div (created by KpiChart)
    in div (created by KpiChart)
    in KpiChart (created by WithStyles(KpiChart))
    in WithStyles(KpiChart) (created by lifecycle(WithStyles(KpiChart)))
    in lifecycle(WithStyles(KpiChart)) (created by withPropsOnChange(lifecycle(WithStyles(KpiChart))))
    in withPropsOnChange(lifecycle(WithStyles(KpiChart))) (created by withHandlers(withPropsOnChange(lifecycle(WithStyles(KpiChart)))))
    in withHandlers(withPropsOnChange(lifecycle(WithStyles(KpiChart)))) (created by withState(withHandlers(withPropsOnChange(lifecycle(WithStyles(KpiChart))))))
    in withState(withHandlers(withPropsOnChange(lifecycle(WithStyles(KpiChart))))) (created by withState(withState(withHandlers(withPropsOnChange(lifecycle(WithStyles(KpiChart)))))))
    in withState(withState(withHandlers(withPropsOnChange(lifecycle(WithStyles(KpiChart)))))) (created by withState(withState(withState(withHandlers(withPropsOnChange(lifecycle(WithStyles(KpiChart))))))))
    in withState(withState(withState(withHandlers(withPropsOnChange(lifecycle(WithStyles(KpiChart))))))) (created by withState(withState(withState(withState(withHandlers(withPropsOnChange(lifecycle(WithStyles(KpiChart)))))))))
    in withState(withState(withState(withState(withHandlers(withPropsOnChange(lifecycle(WithStyles(KpiChart)))))))) (created by withState(withState(withState(withState(withState(withHandlers(withPropsOnChange(lifecycle(WithStyles(KpiChart))))))))))
    in withState(withState(withState(withState(withState(withHandlers(withPropsOnChange(lifecycle(WithStyles(KpiChart))))
printWarning @ webpack-internal:///../node_modules/fbjs/lib/warning.js:33

enhancement help wanted

Source

iki

Most helpful comment

Thanks @wojtekmaj!
I'll try to create sample/webpack4 from your sample/webpack and reproduce the issue there. We can test the pdf.js pre/release with it and check if there's anything needed on the react-pdf side.

iki on 9 Aug 2018

👍2

All 5 comments

Hi, what version of React are you on?

wojtekmaj on 26 Jul 2018

Hi @wojtekmaj, we use [email protected].

iki on 26 Jul 2018

I tried to reproduce it and honestly, I'm not even able to get it working on Webpack 4. We gotta wait for Mozilla to make an official release. Then we'll deprecate Webpack 2 and Webpack 4 should be supported just fine. Keeping this open for now.

wojtekmaj on 9 Aug 2018