Adding react-pdf-viewer to Remix crashes entire site

[benwis]

trafficstars

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