Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Adding react-pdf-viewer to Remix crashes entire site #58

Open
benwis opened this issue Dec 8, 2021 · 0 comments
Open

Adding react-pdf-viewer to Remix crashes entire site #58

benwis opened this issue Dec 8, 2021 · 0 comments

Comments

@benwis
Copy link

benwis commented Dec 8, 2021

Not quite sure how to best outline the error, but trying to add React PDF Viewer to my Remix(React) site crashes the whole site with these errors:

Uncaught SyntaxError: Identifier 'React' has already been declared
components.js:181 Uncaught TypeError: Cannot read properties of undefined (reading 'root')
    at RemixRoute (components.js:181)
    at renderWithHooks (react-dom.development.js:14985)
    at mountIndeterminateComponent (react-dom.development.js:17811)
    at beginWork (react-dom.development.js:19049)
    at HTMLUnknownElement.callCallback2 (react-dom.development.js:3945)
    at Object.invokeGuardedCallbackDev (react-dom.development.js:3994)
    at invokeGuardedCallback (react-dom.development.js:4056)
    at beginWork$1 (react-dom.development.js:23964)
    at performUnitOfWork (react-dom.development.js:22776)
    at workLoopSync (react-dom.development.js:22707)
RemixRoute @ components.js:181
renderWithHooks @ react-dom.development.js:14985
mountIndeterminateComponent @ react-dom.development.js:17811
beginWork @ react-dom.development.js:19049
callCallback2 @ react-dom.development.js:3945
invokeGuardedCallbackDev @ react-dom.development.js:3994
invokeGuardedCallback @ react-dom.development.js:4056
beginWork$1 @ react-dom.development.js:23964
performUnitOfWork @ react-dom.development.js:22776
workLoopSync @ react-dom.development.js:22707
renderRootSync @ react-dom.development.js:22670
performSyncWorkOnRoot @ react-dom.development.js:22293
scheduleUpdateOnFiber @ react-dom.development.js:21881
updateContainer @ react-dom.development.js:25482
(anonymous) @ react-dom.development.js:26021
unbatchedUpdates @ react-dom.development.js:22431
legacyRenderSubtreeIntoContainer @ react-dom.development.js:26020
hydrate @ react-dom.development.js:26086
(anonymous) @ entry.client.tsx:5
react-dom.development.js:20085 The above error occurred in the <RemixRoute> component:

    at RemixRoute (http://localhost:3000/build/_shared/chunk-IBHUES74.js:1532:3)
    at Routes (http://localhost:3000/build/_shared/chunk-IBHUES74.js:1515:7)
    at Router (http://localhost:3000/build/_shared/chunk-SDM3QH37.js:456:21)
    at RemixCatchBoundary (http://localhost:3000/build/_shared/chunk-IBHUES74.js:103:10)
    at RemixErrorBoundary (http://localhost:3000/build/_shared/chunk-IBHUES74.js:45:5)
    at RemixEntry (http://localhost:3000/build/_shared/chunk-IBHUES74.js:1412:12)
    at RemixBrowser (http://localhost:3000/build/_shared/chunk-IBHUES74.js:2013:42)

React will try to recreate this component tree from scratch using the error boundary you provided, RemixErrorBoundary.
logCapturedError @ react-dom.development.js:20085
update.payload @ react-dom.development.js:20133
getStateFromUpdate @ react-dom.development.js:12102
processUpdateQueue @ react-dom.development.js:12250
resumeMountClassInstance @ react-dom.development.js:12921
updateClassComponent @ react-dom.development.js:17430
beginWork @ react-dom.development.js:19073
beginWork$1 @ react-dom.development.js:23940
performUnitOfWork @ react-dom.development.js:22776
workLoopSync @ react-dom.development.js:22707
renderRootSync @ react-dom.development.js:22670
performSyncWorkOnRoot @ react-dom.development.js:22293
scheduleUpdateOnFiber @ react-dom.development.js:21881
updateContainer @ react-dom.development.js:25482
(anonymous) @ react-dom.development.js:26021
unbatchedUpdates @ react-dom.development.js:22431
legacyRenderSubtreeIntoContainer @ react-dom.development.js:26020
hydrate @ react-dom.development.js:26086
(anonymous) @ entry.client.tsx:5
errorBoundaries.js:66 TypeError: Cannot read properties of undefined (reading 'root')
    at RemixRoute (components.js:181)
    at renderWithHooks (react-dom.development.js:14985)
    at mountIndeterminateComponent (react-dom.development.js:17811)
    at beginWork (react-dom.development.js:19049)
    at HTMLUnknownElement.callCallback2 (react-dom.development.js:3945)
    at Object.invokeGuardedCallbackDev (react-dom.development.js:3994)
    at invokeGuardedCallback (react-dom.development.js:4056)
    at beginWork$1 (react-dom.development.js:23964)
    at performUnitOfWork (react-dom.development.js:22776)
    at workLoopSync (react-dom.development.js:22707)
RemixRootDefaultErrorBoundary @ errorBoundaries.js:66
renderWithHooks @ react-dom.development.js:14985
mountIndeterminateComponent @ react-dom.development.js:17811
beginWork @ react-dom.development.js:19049
beginWork$1 @ react-dom.development.js:23940
performUnitOfWork @ react-dom.development.js:22776
workLoopSync @ react-dom.development.js:22707
renderRootSync @ react-dom.development.js:22670
performSyncWorkOnRoot @ react-dom.development.js:22293
scheduleUpdateOnFiber @ react-dom.development.js:21881
updateContainer @ react-dom.development.js:25482
(anonymous) @ react-dom.development.js:26021
unbatchedUpdates @ react-dom.development.js:22431
legacyRenderSubtreeIntoContainer @ react-dom.development.js:26020
hydrate @ react-dom.development.js:26086
(anonymous) @ entry.client.tsx:5
react-dom.development.js:67 Warning: Expected server HTML to contain a matching <title> in <head>.
    at title
    at head
    at html
    at RemixRootDefaultErrorBoundary (http://localhost:3000/build/_shared/chunk-IBHUES74.js:76:3)
    at RemixErrorBoundary (http://localhost:3000/build/_shared/chunk-IBHUES74.js:45:5)
    at RemixEntry (http://localhost:3000/build/_shared/chunk-IBHUES74.js:1412:12)
    at RemixBrowser (http://localhost:3000/build/_shared/chunk-IBHUES74.js:2013:42)

It's a bit of a longshot, but do you have any ideas as to how to fix these? It seems to happen immediately after I try to load a Viewer or Worker in a Component. The first error occurs because heroicons already imports React, but beyond that I can't say how to fix it or identify the issue

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

1 participant