phuocng/csslayout

CoverCard's Link throws ChunkLoadError in Firefox

vhfmag opened this issue ยท 1 comments

Hello ๐Ÿ‘‹ Thanks for this great resource! I'll certainly recommend it to my coworkers, nice work ๐Ÿ˜Š

That said, I've found a Firefox-only (Firefox Nightly, 73.0a1 (2019-12-19)) bug where CoverCards's CoverLoader triggers a ChunkLoadError[1] for some patterns[2]. I didn't manage to understand the exact reason, let alone come up with a fix, so I thought I'd leave a bug report.

1
The above error occurred in the <InnerLoadable> component:
    in InnerLoadable (created by Context.Consumer)
    in Unknown (created by ForwardRef)
    in ForwardRef (created by CoverCard)
    in a (created by LinkAnchor)
    in LinkAnchor (created by Context.Consumer)
    in Link (created by CoverCard)
    in CoverCard (created by HomePage)
    in div (created by HomePage)
    in section (created by HomePage)
    in div (created by HomePage)
    in div (created by Layout)
    in Layout (created by HomePage)
    in HomePage (created by App)
    in Route (created by App)
    in Switch (created by App)
    in Router (created by BrowserRouter)
    in BrowserRouter (created by App)
    in App

React will try to recreate this component tree from scratch using the error boundary you provided, CoverCard.

To get the following log, I needed to add a componentDidCatch in CoverCard:

ChunkLoadError: "Loading chunk patterns-accordion-Cover~patterns-card-Cover~patterns-centering-Cover~patterns-cookie-banner-Cover~p~e8feece5 failed.
(error: http://localhost:1234/patterns-accordion-Cover~patterns-card-Cover~patterns-centering-Cover~patterns-cookie-banner-Cover~p~e8feece5.c20cad6c14f01cd89b31.js)"
        requireEnsure
        webpackAsyncContext
        importAsync
        requireAsync
        loadAsync
        componentDidMount
        commitLifeCycles
        commitLayoutEffects
        callCallback
        invokeGuardedCallbackDev
        invokeGuardedCallback
        commitRootImpl
        unstable_runWithPriority
        runWithPriority$2
        commitRoot
        finishSyncRender
        performSyncWorkOnRoot
        scheduleUpdateOnFiber
        updateContainer
        legacyRenderSubtreeIntoContainer
        unbatchedUpdates
        legacyRenderSubtreeIntoContainer
        render
        b40e
        __webpack_require__
        2
        __webpack_require__
        checkDeferredModules
        webpackJsonpCallback
        <anonymous>
2

Holy grail, Same height columns, Sidebar, Split screen, Sticky footer, Sticky header, Drawer, Dropdown, Menu, Wizard, Input addon, Slider, Accordion, Card, Centering, Cookie banner, Drop area, Drop cap, Feature list, Media object, Pricing table, Questions and answers, Separator, Timeline, Video background, Modal

Outdated.