Web Stories white screen

  • Resolved panosgm2017

    (@panosgm2017)


    3 years, 10 months ago

    Hello

    I just installed web stories and I see a white screen when I navigate to
    Stories > My Stories.

    Any pointers as to what is broken or needs fixing?

    Thanks
    Panos

    • This topic was modified 3 years, 10 months ago by panosgm2017. Reason: typo
Viewing 15 replies - 16 through 30 (of 40 total)
  • Thread Starter panosgm2017

    (@panosgm2017)

    Hello again
    This is the output from Chrome console

    load-scripts.php?c=0&load[chunk_0]=jquery-core,jquery-migrate,utils&ver=5.6:5 JQMIGRATE: Migrate is installed, version 3.3.2
    typeaheadSearch.js:36 Uncaught TypeError: Cannot read property ‘title’ of null
    at typeaheadSearch.js:36
    at Array.reduce (<anonymous>)
    at typeaheadSearch.js:35
    at updateMemo (react-dom.development.js:15463)
    at Object.useMemo (react-dom.development.js:15920)
    at useMemo (react.development.js:1521)
    at TypeaheadSearch (typeaheadSearch.js:33)
    at renderWithHooks (react-dom.development.js:14803)
    at updateFunctionComponent (react-dom.development.js:17034)
    at beginWork (react-dom.development.js:18610)
    (anonymous) @ typeaheadSearch.js:36
    (anonymous) @ typeaheadSearch.js:35
    updateMemo @ react-dom.development.js:15463
    useMemo @ react-dom.development.js:15920
    useMemo @ react.development.js:1521
    TypeaheadSearch @ typeaheadSearch.js:33
    renderWithHooks @ react-dom.development.js:14803
    updateFunctionComponent @ react-dom.development.js:17034
    beginWork @ react-dom.development.js:18610
    callCallback @ react-dom.development.js:188
    invokeGuardedCallbackDev @ react-dom.development.js:237
    invokeGuardedCallback @ react-dom.development.js:292
    beginWork$1 @ react-dom.development.js:23203
    performUnitOfWork @ react-dom.development.js:22157
    workLoopSync @ react-dom.development.js:22130
    performSyncWorkOnRoot @ react-dom.development.js:21756
    (anonymous) @ react-dom.development.js:11089
    unstable_runWithPriority @ scheduler.development.js:653
    runWithPriority$1 @ react-dom.development.js:11039
    flushSyncCallbackQueueImpl @ react-dom.development.js:11084
    flushSyncCallbackQueue @ react-dom.development.js:11072
    scheduleUpdateOnFiber @ react-dom.development.js:21199
    dispatchAction @ react-dom.development.js:15660
    (anonymous) @ useStoryApi.js:105
    async function (async)
    (anonymous) @ useStoryApi.js:97
    (anonymous) @ index.js:86
    commitHookEffectListMount @ react-dom.development.js:19731
    commitPassiveHookEffects @ react-dom.development.js:19769
    callCallback @ react-dom.development.js:188
    invokeGuardedCallbackDev @ react-dom.development.js:237
    invokeGuardedCallback @ react-dom.development.js:292
    flushPassiveEffectsImpl @ react-dom.development.js:22853
    unstable_runWithPriority @ scheduler.development.js:653
    runWithPriority$1 @ react-dom.development.js:11039
    flushPassiveEffects @ react-dom.development.js:22820
    performSyncWorkOnRoot @ react-dom.development.js:21737
    (anonymous) @ react-dom.development.js:11089
    unstable_runWithPriority @ scheduler.development.js:653
    runWithPriority$1 @ react-dom.development.js:11039
    flushSyncCallbackQueueImpl @ react-dom.development.js:11084
    flushSyncCallbackQueue @ react-dom.development.js:11072
    unbatchedUpdates @ react-dom.development.js:21909
    legacyRenderSubtreeIntoContainer @ react-dom.development.js:24757
    render @ react-dom.development.js:24840
    initialize @ index.js:52
    initializeWithConfig @ index.js:64
    index.js:84 Uncaught TypeError: Cannot destructure property ‘id’ of ‘object null’ as it is null.
    at index.js:84
    at Array.map (<anonymous>)
    at index.js:84
    at mountMemo (react-dom.development.js:15442)
    at Object.useMemo (react-dom.development.js:15738)
    at useMemo (react.development.js:1521)
    at StoriesView (index.js:84)
    at renderWithHooks (react-dom.development.js:14803)
    at mountIndeterminateComponent (react-dom.development.js:17482)
    at beginWork (react-dom.development.js:18596)
    (anonymous) @ index.js:84
    (anonymous) @ index.js:84
    mountMemo @ react-dom.development.js:15442
    useMemo @ react-dom.development.js:15738
    useMemo @ react.development.js:1521
    StoriesView @ index.js:84
    renderWithHooks @ react-dom.development.js:14803
    mountIndeterminateComponent @ react-dom.development.js:17482
    beginWork @ react-dom.development.js:18596
    callCallback @ react-dom.development.js:188
    invokeGuardedCallbackDev @ react-dom.development.js:237
    invokeGuardedCallback @ react-dom.development.js:292
    beginWork$1 @ react-dom.development.js:23203
    performUnitOfWork @ react-dom.development.js:22157
    workLoopSync @ react-dom.development.js:22130
    performSyncWorkOnRoot @ react-dom.development.js:21756
    (anonymous) @ react-dom.development.js:11089
    unstable_runWithPriority @ scheduler.development.js:653
    runWithPriority$1 @ react-dom.development.js:11039
    flushSyncCallbackQueueImpl @ react-dom.development.js:11084
    flushSyncCallbackQueue @ react-dom.development.js:11072
    scheduleUpdateOnFiber @ react-dom.development.js:21199
    dispatchAction @ react-dom.development.js:15660
    (anonymous) @ useStoryApi.js:105
    async function (async)
    (anonymous) @ useStoryApi.js:97
    (anonymous) @ index.js:86
    commitHookEffectListMount @ react-dom.development.js:19731
    commitPassiveHookEffects @ react-dom.development.js:19769
    callCallback @ react-dom.development.js:188
    invokeGuardedCallbackDev @ react-dom.development.js:237
    invokeGuardedCallback @ react-dom.development.js:292
    flushPassiveEffectsImpl @ react-dom.development.js:22853
    unstable_runWithPriority @ scheduler.development.js:653
    runWithPriority$1 @ react-dom.development.js:11039
    flushPassiveEffects @ react-dom.development.js:22820
    performSyncWorkOnRoot @ react-dom.development.js:21737
    (anonymous) @ react-dom.development.js:11089
    unstable_runWithPriority @ scheduler.development.js:653
    runWithPriority$1 @ react-dom.development.js:11039
    flushSyncCallbackQueueImpl @ react-dom.development.js:11084
    flushSyncCallbackQueue @ react-dom.development.js:11072
    unbatchedUpdates @ react-dom.development.js:21909
    legacyRenderSubtreeIntoContainer @ react-dom.development.js:24757
    render @ react-dom.development.js:24840
    initialize @ index.js:52
    initializeWithConfig @ index.js:64
    react-dom.development.js:19527 The above error occurred in the <StoriesView> component:
    in StoriesView (at content/index.js:73)
    in div (created by contentGutter__StandardViewContentGutter)
    in contentGutter__StandardViewContentGutter (at content/index.js:70)
    in Unknown (at unitsProvider.js:56)
    in UnitsProvider (at content/index.js:64)
    in Unknown (at transformProvider.js:82)
    in TransformProvider (at content/index.js:63)
    in Unknown (at fontProvider.js:91)
    in FontProvider (at content/index.js:62)
    in div (created by scrollable__Inner)
    in scrollable__Inner (at scrollable.js:64)
    in div (created by scrollable__ScrollContent)
    in scrollable__ScrollContent (at scrollable.js:63)
    in Scrollable (at content/index.js:61)
    in Content (at myStories/index.js:144)
    in Provider (at myStories/index.js:133)
    in MyStories (at app/index.js:92)
    in Route (at app/index.js:89)
    in div (created by pageStructure__PageContent)
    in pageStructure__PageContent (at app/index.js:88)
    in div (created by pageStructure__AppFrame)
    in pageStructure__AppFrame (at app/index.js:86)
    in AppContent (at app/index.js:144)
    in Unknown (at routerProvider.js:98)
    in RouterProvider (at app/index.js:141)
    in Unknown (at navProvider.js:52)
    in NavProvider (at app/index.js:140)
    in Unknown (at apiProvider.js:95)
    in ApiProvider (at app/index.js:139)
    in Unknown (at provider.js:74)
    in ToastProvider (at app/index.js:138)
    in Unknown (at configProvider.js:28)
    in ConfigProvider (at app/index.js:137)
    in Ge (at app/index.js:136)
    in ye (at app/index.js:135)
    in App (at dashboard/index.js:55)
    in StrictMode (at dashboard/index.js:54)
    in FlagsProvider (at dashboard/index.js:53)

    Consider adding an error boundary to your tree to customize error handling behavior.
    Visit https://fb.me/react-error-boundaries to learn more about error boundaries.
    logCapturedError @ react-dom.development.js:19527
    logError @ react-dom.development.js:19564
    update.callback @ react-dom.development.js:20708
    callCallback @ react-dom.development.js:12490
    commitUpdateQueue @ react-dom.development.js:12511
    commitLifeCycles @ react-dom.development.js:19883
    commitLayoutEffects @ react-dom.development.js:22803
    callCallback @ react-dom.development.js:188
    invokeGuardedCallbackDev @ react-dom.development.js:237
    invokeGuardedCallback @ react-dom.development.js:292
    commitRootImpl @ react-dom.development.js:22541
    unstable_runWithPriority @ scheduler.development.js:653
    runWithPriority$1 @ react-dom.development.js:11039
    commitRoot @ react-dom.development.js:22381
    finishSyncRender @ react-dom.development.js:21807
    performSyncWorkOnRoot @ react-dom.development.js:21793
    (anonymous) @ react-dom.development.js:11089
    unstable_runWithPriority @ scheduler.development.js:653
    runWithPriority$1 @ react-dom.development.js:11039
    flushSyncCallbackQueueImpl @ react-dom.development.js:11084
    flushSyncCallbackQueue @ react-dom.development.js:11072
    scheduleUpdateOnFiber @ react-dom.development.js:21199
    dispatchAction @ react-dom.development.js:15660
    (anonymous) @ useStoryApi.js:105
    async function (async)
    (anonymous) @ useStoryApi.js:97
    (anonymous) @ index.js:86
    commitHookEffectListMount @ react-dom.development.js:19731
    commitPassiveHookEffects @ react-dom.development.js:19769
    callCallback @ react-dom.development.js:188
    invokeGuardedCallbackDev @ react-dom.development.js:237
    invokeGuardedCallback @ react-dom.development.js:292
    flushPassiveEffectsImpl @ react-dom.development.js:22853
    unstable_runWithPriority @ scheduler.development.js:653
    runWithPriority$1 @ react-dom.development.js:11039
    flushPassiveEffects @ react-dom.development.js:22820
    performSyncWorkOnRoot @ react-dom.development.js:21737
    (anonymous) @ react-dom.development.js:11089
    unstable_runWithPriority @ scheduler.development.js:653
    runWithPriority$1 @ react-dom.development.js:11039
    flushSyncCallbackQueueImpl @ react-dom.development.js:11084
    flushSyncCallbackQueue @ react-dom.development.js:11072
    unbatchedUpdates @ react-dom.development.js:21909
    legacyRenderSubtreeIntoContainer @ react-dom.development.js:24757
    render @ react-dom.development.js:24840
    initialize @ index.js:52
    initializeWithConfig @ index.js:64
    react-dom.development.js:19527 The above error occurred in the <TypeaheadSearch> component:
    in TypeaheadSearch (at pageHeading.js:119)
    in div (created by pageHeading__SearchInner)
    in pageHeading__SearchInner (at pageHeading.js:118)
    in div (created by pageHeading__SearchContainer)
    in pageHeading__SearchContainer (at pageHeading.js:117)
    in div (created by pageHeading__HeadingBodyWrapper)
    in pageHeading__HeadingBodyWrapper (at pageHeading.js:110)
    in PageHeading (at header/index.js:157)
    in div (created by squishable__Content)
    in squishable__Content (at squishable.js:68)
    in div (created by squishable__Squish)
    in squishable__Squish (at squishable.js:67)
    in Squishable (at header/index.js:156)
    in Header (at myStories/index.js:134)
    in Provider (at myStories/index.js:133)
    in MyStories (at app/index.js:92)
    in Route (at app/index.js:89)
    in div (created by pageStructure__PageContent)
    in pageStructure__PageContent (at app/index.js:88)
    in div (created by pageStructure__AppFrame)
    in pageStructure__AppFrame (at app/index.js:86)
    in AppContent (at app/index.js:144)
    in Unknown (at routerProvider.js:98)
    in RouterProvider (at app/index.js:141)
    in Unknown (at navProvider.js:52)
    in NavProvider (at app/index.js:140)
    in Unknown (at apiProvider.js:95)
    in ApiProvider (at app/index.js:139)
    in Unknown (at provider.js:74)
    in ToastProvider (at app/index.js:138)
    in Unknown (at configProvider.js:28)
    in ConfigProvider (at app/index.js:137)
    in Ge (at app/index.js:136)
    in ye (at app/index.js:135)
    in App (at dashboard/index.js:55)
    in StrictMode (at dashboard/index.js:54)
    in FlagsProvider (at dashboard/index.js:53)

    Consider adding an error boundary to your tree to customize error handling behavior.
    Visit https://fb.me/react-error-boundaries to learn more about error boundaries.
    logCapturedError @ react-dom.development.js:19527
    logError @ react-dom.development.js:19564
    update.callback @ react-dom.development.js:20708
    callCallback @ react-dom.development.js:12490
    commitUpdateQueue @ react-dom.development.js:12511
    commitLifeCycles @ react-dom.development.js:19883
    commitLayoutEffects @ react-dom.development.js:22803
    callCallback @ react-dom.development.js:188
    invokeGuardedCallbackDev @ react-dom.development.js:237
    invokeGuardedCallback @ react-dom.development.js:292
    commitRootImpl @ react-dom.development.js:22541
    unstable_runWithPriority @ scheduler.development.js:653
    runWithPriority$1 @ react-dom.development.js:11039
    commitRoot @ react-dom.development.js:22381
    finishSyncRender @ react-dom.development.js:21807
    performSyncWorkOnRoot @ react-dom.development.js:21793
    (anonymous) @ react-dom.development.js:11089
    unstable_runWithPriority @ scheduler.development.js:653
    runWithPriority$1 @ react-dom.development.js:11039
    flushSyncCallbackQueueImpl @ react-dom.development.js:11084
    flushSyncCallbackQueue @ react-dom.development.js:11072
    scheduleUpdateOnFiber @ react-dom.development.js:21199
    dispatchAction @ react-dom.development.js:15660
    (anonymous) @ useStoryApi.js:105
    async function (async)
    (anonymous) @ useStoryApi.js:97
    (anonymous) @ index.js:86
    commitHookEffectListMount @ react-dom.development.js:19731
    commitPassiveHookEffects @ react-dom.development.js:19769
    callCallback @ react-dom.development.js:188
    invokeGuardedCallbackDev @ react-dom.development.js:237
    invokeGuardedCallback @ react-dom.development.js:292
    flushPassiveEffectsImpl @ react-dom.development.js:22853
    unstable_runWithPriority @ scheduler.development.js:653
    runWithPriority$1 @ react-dom.development.js:11039
    flushPassiveEffects @ react-dom.development.js:22820
    performSyncWorkOnRoot @ react-dom.development.js:21737
    (anonymous) @ react-dom.development.js:11089
    unstable_runWithPriority @ scheduler.development.js:653
    runWithPriority$1 @ react-dom.development.js:11039
    flushSyncCallbackQueueImpl @ react-dom.development.js:11084
    flushSyncCallbackQueue @ react-dom.development.js:11072
    unbatchedUpdates @ react-dom.development.js:21909
    legacyRenderSubtreeIntoContainer @ react-dom.development.js:24757
    render @ react-dom.development.js:24840
    initialize @ index.js:52
    initializeWithConfig @ index.js:64
    react-dom.development.js:88 Warning: Can’t perform a React state update 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 a useEffect cleanup function.
    in ApiProvider (at app/index.js:139)
    in Unknown (at provider.js:74)
    in ToastProvider (at app/index.js:138)
    in Unknown (at configProvider.js:28)
    in ConfigProvider (at app/index.js:137)
    in Ge (at app/index.js:136)
    in ye (at app/index.js:135)
    in App (at dashboard/index.js:55)
    in StrictMode (at dashboard/index.js:54)
    in FlagsProvider (at dashboard/index.js:53)
    printWarning @ react-dom.development.js:88
    error @ react-dom.development.js:60
    warnAboutUpdateOnUnmountedFiberInDEV @ react-dom.development.js:23161
    scheduleUpdateOnFiber @ react-dom.development.js:21169
    dispatchAction @ react-dom.development.js:15660
    (anonymous) @ useStoryApi.js:121
    async function (async)
    (anonymous) @ useStoryApi.js:97
    (anonymous) @ index.js:86
    commitHookEffectListMount @ react-dom.development.js:19731
    commitPassiveHookEffects @ react-dom.development.js:19769
    callCallback @ react-dom.development.js:188
    invokeGuardedCallbackDev @ react-dom.development.js:237
    invokeGuardedCallback @ react-dom.development.js:292
    flushPassiveEffectsImpl @ react-dom.development.js:22853
    unstable_runWithPriority @ scheduler.development.js:653
    runWithPriority$1 @ react-dom.development.js:11039
    flushPassiveEffects @ react-dom.development.js:22820
    performSyncWorkOnRoot @ react-dom.development.js:21737
    (anonymous) @ react-dom.development.js:11089
    unstable_runWithPriority @ scheduler.development.js:653
    runWithPriority$1 @ react-dom.development.js:11039
    flushSyncCallbackQueueImpl @ react-dom.development.js:11084
    flushSyncCallbackQueue @ react-dom.development.js:11072
    unbatchedUpdates @ react-dom.development.js:21909
    legacyRenderSubtreeIntoContainer @ react-dom.development.js:24757
    render @ react-dom.development.js:24840
    initialize @ index.js:52
    initializeWithConfig @ index.js:64

    Plugin Support Luckyna San

    (@luckynasan)

    @panosgm2017 Thanks so much for the quick update! To confirm, you received this console error in an incognito window with all other plugins and firewalls temporarily disabled, correct?

    Thread Starter panosgm2017

    (@panosgm2017)

    Yes, that is correct.
    It is also worth noting that the site has less than 20 pages and 10 plugins.

    Plugin Support Luckyna San

    (@luckynasan)

    @panosgm2017 Please note we are still investigating this issue and really appreciate your help in finding the possible source of the issue. Could you please install and activate the Health Check & Troubleshooting plugin once more?

    After that, go to “Plugins” in your WordPress admin and click on “Troubleshoot” underneath “Web Stories” in the list of plugins.

    This will enable troubleshooting mode, with only that plugin active by default, and let you test further from there. Does “My Stories”, “Explore Templates” and “Settings” pages work in this case, and if not, what does the error message & network response look like?

    Thread Starter panosgm2017

    (@panosgm2017)

    Hello

    The error in the stories tab is

    load-scripts.php?c=0&load[chunk_0]=jquery-core,jquery-migrate,utils&ver=5.6:5 JQMIGRATE: Migrate is installed, version 3.3.2
    react-dom.development.js:24994 Download the React DevTools for a better development experience: https://fb.me/react-devtools
    typeaheadSearch.js:36 Uncaught TypeError: Cannot read property ‘title’ of null
    at typeaheadSearch.js:36
    at Array.reduce (<anonymous>)
    at typeaheadSearch.js:35
    at updateMemo (react-dom.development.js:15463)
    at Object.useMemo (react-dom.development.js:15920)
    at useMemo (react.development.js:1521)
    at TypeaheadSearch (typeaheadSearch.js:33)
    at renderWithHooks (react-dom.development.js:14803)
    at updateFunctionComponent (react-dom.development.js:17034)
    at beginWork (react-dom.development.js:18610)
    (anonymous) @ typeaheadSearch.js:36
    (anonymous) @ typeaheadSearch.js:35
    updateMemo @ react-dom.development.js:15463
    useMemo @ react-dom.development.js:15920
    useMemo @ react.development.js:1521
    TypeaheadSearch @ typeaheadSearch.js:33
    renderWithHooks @ react-dom.development.js:14803
    updateFunctionComponent @ react-dom.development.js:17034
    beginWork @ react-dom.development.js:18610
    callCallback @ react-dom.development.js:188
    invokeGuardedCallbackDev @ react-dom.development.js:237
    invokeGuardedCallback @ react-dom.development.js:292
    beginWork$1 @ react-dom.development.js:23203
    performUnitOfWork @ react-dom.development.js:22157
    workLoopSync @ react-dom.development.js:22130
    performSyncWorkOnRoot @ react-dom.development.js:21756
    (anonymous) @ react-dom.development.js:11089
    unstable_runWithPriority @ scheduler.development.js:653
    runWithPriority$1 @ react-dom.development.js:11039
    flushSyncCallbackQueueImpl @ react-dom.development.js:11084
    flushSyncCallbackQueue @ react-dom.development.js:11072
    scheduleUpdateOnFiber @ react-dom.development.js:21199
    dispatchAction @ react-dom.development.js:15660
    (anonymous) @ useStoryApi.js:105
    async function (async)
    (anonymous) @ useStoryApi.js:97
    (anonymous) @ index.js:86
    commitHookEffectListMount @ react-dom.development.js:19731
    commitPassiveHookEffects @ react-dom.development.js:19769
    callCallback @ react-dom.development.js:188
    invokeGuardedCallbackDev @ react-dom.development.js:237
    invokeGuardedCallback @ react-dom.development.js:292
    flushPassiveEffectsImpl @ react-dom.development.js:22853
    unstable_runWithPriority @ scheduler.development.js:653
    runWithPriority$1 @ react-dom.development.js:11039
    flushPassiveEffects @ react-dom.development.js:22820
    performSyncWorkOnRoot @ react-dom.development.js:21737
    (anonymous) @ react-dom.development.js:11089
    unstable_runWithPriority @ scheduler.development.js:653
    runWithPriority$1 @ react-dom.development.js:11039
    flushSyncCallbackQueueImpl @ react-dom.development.js:11084
    flushSyncCallbackQueue @ react-dom.development.js:11072
    unbatchedUpdates @ react-dom.development.js:21909
    legacyRenderSubtreeIntoContainer @ react-dom.development.js:24757
    render @ react-dom.development.js:24840
    initialize @ index.js:52
    initializeWithConfig @ index.js:64
    index.js:84 Uncaught TypeError: Cannot destructure property ‘id’ of ‘object null’ as it is null.
    at index.js:84
    at Array.map (<anonymous>)
    at index.js:84
    at mountMemo (react-dom.development.js:15442)
    at Object.useMemo (react-dom.development.js:15738)
    at useMemo (react.development.js:1521)
    at StoriesView (index.js:84)
    at renderWithHooks (react-dom.development.js:14803)
    at mountIndeterminateComponent (react-dom.development.js:17482)
    at beginWork (react-dom.development.js:18596)
    (anonymous) @ index.js:84
    (anonymous) @ index.js:84
    mountMemo @ react-dom.development.js:15442
    useMemo @ react-dom.development.js:15738
    useMemo @ react.development.js:1521
    StoriesView @ index.js:84
    renderWithHooks @ react-dom.development.js:14803
    mountIndeterminateComponent @ react-dom.development.js:17482
    beginWork @ react-dom.development.js:18596
    callCallback @ react-dom.development.js:188
    invokeGuardedCallbackDev @ react-dom.development.js:237
    invokeGuardedCallback @ react-dom.development.js:292
    beginWork$1 @ react-dom.development.js:23203
    performUnitOfWork @ react-dom.development.js:22157
    workLoopSync @ react-dom.development.js:22130
    performSyncWorkOnRoot @ react-dom.development.js:21756
    (anonymous) @ react-dom.development.js:11089
    unstable_runWithPriority @ scheduler.development.js:653
    runWithPriority$1 @ react-dom.development.js:11039
    flushSyncCallbackQueueImpl @ react-dom.development.js:11084
    flushSyncCallbackQueue @ react-dom.development.js:11072
    scheduleUpdateOnFiber @ react-dom.development.js:21199
    dispatchAction @ react-dom.development.js:15660
    (anonymous) @ useStoryApi.js:105
    async function (async)
    (anonymous) @ useStoryApi.js:97
    (anonymous) @ index.js:86
    commitHookEffectListMount @ react-dom.development.js:19731
    commitPassiveHookEffects @ react-dom.development.js:19769
    callCallback @ react-dom.development.js:188
    invokeGuardedCallbackDev @ react-dom.development.js:237
    invokeGuardedCallback @ react-dom.development.js:292
    flushPassiveEffectsImpl @ react-dom.development.js:22853
    unstable_runWithPriority @ scheduler.development.js:653
    runWithPriority$1 @ react-dom.development.js:11039
    flushPassiveEffects @ react-dom.development.js:22820
    performSyncWorkOnRoot @ react-dom.development.js:21737
    (anonymous) @ react-dom.development.js:11089
    unstable_runWithPriority @ scheduler.development.js:653
    runWithPriority$1 @ react-dom.development.js:11039
    flushSyncCallbackQueueImpl @ react-dom.development.js:11084
    flushSyncCallbackQueue @ react-dom.development.js:11072
    unbatchedUpdates @ react-dom.development.js:21909
    legacyRenderSubtreeIntoContainer @ react-dom.development.js:24757
    render @ react-dom.development.js:24840
    initialize @ index.js:52
    initializeWithConfig @ index.js:64
    react-dom.development.js:19527 The above error occurred in the <StoriesView> component:
    in StoriesView (at content/index.js:73)
    in div (created by contentGutter__StandardViewContentGutter)
    in contentGutter__StandardViewContentGutter (at content/index.js:70)
    in Unknown (at unitsProvider.js:56)
    in UnitsProvider (at content/index.js:64)
    in Unknown (at transformProvider.js:82)
    in TransformProvider (at content/index.js:63)
    in Unknown (at fontProvider.js:91)
    in FontProvider (at content/index.js:62)
    in div (created by scrollable__Inner)
    in scrollable__Inner (at scrollable.js:64)
    in div (created by scrollable__ScrollContent)
    in scrollable__ScrollContent (at scrollable.js:63)
    in Scrollable (at content/index.js:61)
    in Content (at myStories/index.js:144)
    in Provider (at myStories/index.js:133)
    in MyStories (at app/index.js:92)
    in Route (at app/index.js:89)
    in div (created by pageStructure__PageContent)
    in pageStructure__PageContent (at app/index.js:88)
    in div (created by pageStructure__AppFrame)
    in pageStructure__AppFrame (at app/index.js:86)
    in AppContent (at app/index.js:144)
    in Unknown (at routerProvider.js:98)
    in RouterProvider (at app/index.js:141)
    in Unknown (at navProvider.js:52)
    in NavProvider (at app/index.js:140)
    in Unknown (at apiProvider.js:95)
    in ApiProvider (at app/index.js:139)
    in Unknown (at provider.js:74)
    in ToastProvider (at app/index.js:138)
    in Unknown (at configProvider.js:28)
    in ConfigProvider (at app/index.js:137)
    in Ge (at app/index.js:136)
    in ye (at app/index.js:135)
    in App (at dashboard/index.js:55)
    in StrictMode (at dashboard/index.js:54)
    in FlagsProvider (at dashboard/index.js:53)

    Consider adding an error boundary to your tree to customize error handling behavior.
    Visit https://fb.me/react-error-boundaries to learn more about error boundaries.
    logCapturedError @ react-dom.development.js:19527
    logError @ react-dom.development.js:19564
    update.callback @ react-dom.development.js:20708
    callCallback @ react-dom.development.js:12490
    commitUpdateQueue @ react-dom.development.js:12511
    commitLifeCycles @ react-dom.development.js:19883
    commitLayoutEffects @ react-dom.development.js:22803
    callCallback @ react-dom.development.js:188
    invokeGuardedCallbackDev @ react-dom.development.js:237
    invokeGuardedCallback @ react-dom.development.js:292
    commitRootImpl @ react-dom.development.js:22541
    unstable_runWithPriority @ scheduler.development.js:653
    runWithPriority$1 @ react-dom.development.js:11039
    commitRoot @ react-dom.development.js:22381
    finishSyncRender @ react-dom.development.js:21807
    performSyncWorkOnRoot @ react-dom.development.js:21793
    (anonymous) @ react-dom.development.js:11089
    unstable_runWithPriority @ scheduler.development.js:653
    runWithPriority$1 @ react-dom.development.js:11039
    flushSyncCallbackQueueImpl @ react-dom.development.js:11084
    flushSyncCallbackQueue @ react-dom.development.js:11072
    scheduleUpdateOnFiber @ react-dom.development.js:21199
    dispatchAction @ react-dom.development.js:15660
    (anonymous) @ useStoryApi.js:105
    async function (async)
    (anonymous) @ useStoryApi.js:97
    (anonymous) @ index.js:86
    commitHookEffectListMount @ react-dom.development.js:19731
    commitPassiveHookEffects @ react-dom.development.js:19769
    callCallback @ react-dom.development.js:188
    invokeGuardedCallbackDev @ react-dom.development.js:237
    invokeGuardedCallback @ react-dom.development.js:292
    flushPassiveEffectsImpl @ react-dom.development.js:22853
    unstable_runWithPriority @ scheduler.development.js:653
    runWithPriority$1 @ react-dom.development.js:11039
    flushPassiveEffects @ react-dom.development.js:22820
    performSyncWorkOnRoot @ react-dom.development.js:21737
    (anonymous) @ react-dom.development.js:11089
    unstable_runWithPriority @ scheduler.development.js:653
    runWithPriority$1 @ react-dom.development.js:11039
    flushSyncCallbackQueueImpl @ react-dom.development.js:11084
    flushSyncCallbackQueue @ react-dom.development.js:11072
    unbatchedUpdates @ react-dom.development.js:21909
    legacyRenderSubtreeIntoContainer @ react-dom.development.js:24757
    render @ react-dom.development.js:24840
    initialize @ index.js:52
    initializeWithConfig @ index.js:64
    react-dom.development.js:19527 The above error occurred in the <TypeaheadSearch> component:
    in TypeaheadSearch (at pageHeading.js:119)
    in div (created by pageHeading__SearchInner)
    in pageHeading__SearchInner (at pageHeading.js:118)
    in div (created by pageHeading__SearchContainer)
    in pageHeading__SearchContainer (at pageHeading.js:117)
    in div (created by pageHeading__HeadingBodyWrapper)
    in pageHeading__HeadingBodyWrapper (at pageHeading.js:110)
    in PageHeading (at header/index.js:157)
    in div (created by squishable__Content)
    in squishable__Content (at squishable.js:68)
    in div (created by squishable__Squish)
    in squishable__Squish (at squishable.js:67)
    in Squishable (at header/index.js:156)
    in Header (at myStories/index.js:134)
    in Provider (at myStories/index.js:133)
    in MyStories (at app/index.js:92)
    in Route (at app/index.js:89)
    in div (created by pageStructure__PageContent)
    in pageStructure__PageContent (at app/index.js:88)
    in div (created by pageStructure__AppFrame)
    in pageStructure__AppFrame (at app/index.js:86)
    in AppContent (at app/index.js:144)
    in Unknown (at routerProvider.js:98)
    in RouterProvider (at app/index.js:141)
    in Unknown (at navProvider.js:52)
    in NavProvider (at app/index.js:140)
    in Unknown (at apiProvider.js:95)
    in ApiProvider (at app/index.js:139)
    in Unknown (at provider.js:74)
    in ToastProvider (at app/index.js:138)
    in Unknown (at configProvider.js:28)
    in ConfigProvider (at app/index.js:137)
    in Ge (at app/index.js:136)
    in ye (at app/index.js:135)
    in App (at dashboard/index.js:55)
    in StrictMode (at dashboard/index.js:54)
    in FlagsProvider (at dashboard/index.js:53)

    Consider adding an error boundary to your tree to customize error handling behavior.
    Visit https://fb.me/react-error-boundaries to learn more about error boundaries.
    logCapturedError @ react-dom.development.js:19527
    logError @ react-dom.development.js:19564
    update.callback @ react-dom.development.js:20708
    callCallback @ react-dom.development.js:12490
    commitUpdateQueue @ react-dom.development.js:12511
    commitLifeCycles @ react-dom.development.js:19883
    commitLayoutEffects @ react-dom.development.js:22803
    callCallback @ react-dom.development.js:188
    invokeGuardedCallbackDev @ react-dom.development.js:237
    invokeGuardedCallback @ react-dom.development.js:292
    commitRootImpl @ react-dom.development.js:22541
    unstable_runWithPriority @ scheduler.development.js:653
    runWithPriority$1 @ react-dom.development.js:11039
    commitRoot @ react-dom.development.js:22381
    finishSyncRender @ react-dom.development.js:21807
    performSyncWorkOnRoot @ react-dom.development.js:21793
    (anonymous) @ react-dom.development.js:11089
    unstable_runWithPriority @ scheduler.development.js:653
    runWithPriority$1 @ react-dom.development.js:11039
    flushSyncCallbackQueueImpl @ react-dom.development.js:11084
    flushSyncCallbackQueue @ react-dom.development.js:11072
    scheduleUpdateOnFiber @ react-dom.development.js:21199
    dispatchAction @ react-dom.development.js:15660
    (anonymous) @ useStoryApi.js:105
    async function (async)
    (anonymous) @ useStoryApi.js:97
    (anonymous) @ index.js:86
    commitHookEffectListMount @ react-dom.development.js:19731
    commitPassiveHookEffects @ react-dom.development.js:19769
    callCallback @ react-dom.development.js:188
    invokeGuardedCallbackDev @ react-dom.development.js:237
    invokeGuardedCallback @ react-dom.development.js:292
    flushPassiveEffectsImpl @ react-dom.development.js:22853
    unstable_runWithPriority @ scheduler.development.js:653
    runWithPriority$1 @ react-dom.development.js:11039
    flushPassiveEffects @ react-dom.development.js:22820
    performSyncWorkOnRoot @ react-dom.development.js:21737
    (anonymous) @ react-dom.development.js:11089
    unstable_runWithPriority @ scheduler.development.js:653
    runWithPriority$1 @ react-dom.development.js:11039
    flushSyncCallbackQueueImpl @ react-dom.development.js:11084
    flushSyncCallbackQueue @ react-dom.development.js:11072
    unbatchedUpdates @ react-dom.development.js:21909
    legacyRenderSubtreeIntoContainer @ react-dom.development.js:24757
    render @ react-dom.development.js:24840
    initialize @ index.js:52
    initializeWithConfig @ index.js:64
    react-dom.development.js:88 Warning: Can’t perform a React state update 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 a useEffect cleanup function.
    in ApiProvider (at app/index.js:139)
    in Unknown (at provider.js:74)
    in ToastProvider (at app/index.js:138)
    in Unknown (at configProvider.js:28)
    in ConfigProvider (at app/index.js:137)
    in Ge (at app/index.js:136)
    in ye (at app/index.js:135)
    in App (at dashboard/index.js:55)
    in StrictMode (at dashboard/index.js:54)
    in FlagsProvider (at dashboard/index.js:53)
    printWarning @ react-dom.development.js:88
    error @ react-dom.development.js:60
    warnAboutUpdateOnUnmountedFiberInDEV @ react-dom.development.js:23161
    scheduleUpdateOnFiber @ react-dom.development.js:21169
    dispatchAction @ react-dom.development.js:15660
    (anonymous) @ useStoryApi.js:121
    async function (async)
    (anonymous) @ useStoryApi.js:97
    (anonymous) @ index.js:86
    commitHookEffectListMount @ react-dom.development.js:19731
    commitPassiveHookEffects @ react-dom.development.js:19769
    callCallback @ react-dom.development.js:188
    invokeGuardedCallbackDev @ react-dom.development.js:237
    invokeGuardedCallback @ react-dom.development.js:292
    flushPassiveEffectsImpl @ react-dom.development.js:22853
    unstable_runWithPriority @ scheduler.development.js:653
    runWithPriority$1 @ react-dom.development.js:11039
    flushPassiveEffects @ react-dom.development.js:22820
    performSyncWorkOnRoot @ react-dom.development.js:21737
    (anonymous) @ react-dom.development.js:11089
    unstable_runWithPriority @ scheduler.development.js:653
    runWithPriority$1 @ react-dom.development.js:11039
    flushSyncCallbackQueueImpl @ react-dom.development.js:11084
    flushSyncCallbackQueue @ react-dom.development.js:11072
    unbatchedUpdates @ react-dom.development.js:21909
    legacyRenderSubtreeIntoContainer @ react-dom.development.js:24757
    render @ react-dom.development.js:24840
    initialize @ index.js:52
    initializeWithConfig @ index.js:64

    Thread Starter panosgm2017

    (@panosgm2017)

    And this is the console message from the templates tab

    load-scripts.php?c=0&load[chunk_0]=jquery-core,jquery-migrate,utils&ver=5.6:5 JQMIGRATE: Migrate is installed, version 3.3.2
    stories-dashboard.js?ver=3e030ea66fc827a4952487346ffac32d:157595 Download the React DevTools for a better development experience: https://fb.me/react-devtools
    stories-dashboard.js?ver=3e030ea66fc827a4952487346ffac32d:79859 [Web Stories] Tracking event “screen_view” took too long to fire.
    (anonymous) @ stories-dashboard.js?ver=3e030ea66fc827a4952487346ffac32d:79859
    setTimeout (async)
    (anonymous) @ stories-dashboard.js?ver=3e030ea66fc827a4952487346ffac32d:79858
    track @ stories-dashboard.js?ver=3e030ea66fc827a4952487346ffac32d:79851
    trackScreenView @ stories-dashboard.js?ver=3e030ea66fc827a4952487346ffac32d:80072
    (anonymous) @ stories-dashboard.js?ver=3e030ea66fc827a4952487346ffac32d:8609
    commitHookEffectListMount @ stories-dashboard.js?ver=3e030ea66fc827a4952487346ffac32d:152332
    commitPassiveHookEffects @ stories-dashboard.js?ver=3e030ea66fc827a4952487346ffac32d:152370
    callCallback @ stories-dashboard.js?ver=3e030ea66fc827a4952487346ffac32d:132789
    invokeGuardedCallbackDev @ stories-dashboard.js?ver=3e030ea66fc827a4952487346ffac32d:132838
    invokeGuardedCallback @ stories-dashboard.js?ver=3e030ea66fc827a4952487346ffac32d:132893
    flushPassiveEffectsImpl @ stories-dashboard.js?ver=3e030ea66fc827a4952487346ffac32d:155454
    unstable_runWithPriority @ stories-dashboard.js?ver=3e030ea66fc827a4952487346ffac32d:177669
    runWithPriority$1 @ stories-dashboard.js?ver=3e030ea66fc827a4952487346ffac32d:143640
    flushPassiveEffects @ stories-dashboard.js?ver=3e030ea66fc827a4952487346ffac32d:155421
    performSyncWorkOnRoot @ stories-dashboard.js?ver=3e030ea66fc827a4952487346ffac32d:154338
    (anonymous) @ stories-dashboard.js?ver=3e030ea66fc827a4952487346ffac32d:143690
    unstable_runWithPriority @ stories-dashboard.js?ver=3e030ea66fc827a4952487346ffac32d:177669
    runWithPriority$1 @ stories-dashboard.js?ver=3e030ea66fc827a4952487346ffac32d:143640
    flushSyncCallbackQueueImpl @ stories-dashboard.js?ver=3e030ea66fc827a4952487346ffac32d:143685
    flushSyncCallbackQueue @ stories-dashboard.js?ver=3e030ea66fc827a4952487346ffac32d:143673
    unbatchedUpdates @ stories-dashboard.js?ver=3e030ea66fc827a4952487346ffac32d:154510
    legacyRenderSubtreeIntoContainer @ stories-dashboard.js?ver=3e030ea66fc827a4952487346ffac32d:157358
    render @ stories-dashboard.js?ver=3e030ea66fc827a4952487346ffac32d:157441
    initialize @ stories-dashboard.js?ver=3e030ea66fc827a4952487346ffac32d:29181
    initializeWithConfig @ stories-dashboard.js?ver=3e030ea66fc827a4952487346ffac32d:29213

    Plugin Author Pascal Birchler

    (@swissspidy)

    Thank you so much for going through all these steps and provide the detailed error messages! Those are very helpful and allow us to further narrow down the issue.

    Just to confirm, these are from using the development version in combination with the troubleshooting plugin?

    If you could perhaps do one more thing, that would be great:

    1. Visit “My Stories”
    1. Open dev tools, and switch to the Network tab
    1. Reload the page
    1. Filter by “/web-story” in the little search input box
    1. Click on the one remaining request that should be in the list, and then on “Response”

    It should look like on this screenshot:

    Could you do that and share the same screenshot with us? You could upload it on a site like https://imgur.com/ or similar.

    Thread Starter panosgm2017

    (@panosgm2017)

    Ah yes I see

    It pulls data from the previous domain [guid rendered] and the current one [link].

    Is it supposed to do that?

    Ps

    If you want I can send you the full response in a txt somewhere.
    I am not comfortable posting the response in a public forum

    Plugin Author Pascal Birchler

    (@swissspidy)

    > Is it supposed to do that?

    If you did a domain migration, different URLs for guid and link are expected and is OK.

    > If you want I can send you the full response in a txt somewhere.

    That would be helpful, yes. Perhaps you could fill out the Site Health form again. There’s a field at the bottom to provide additional data.

    Another follow-up question to that:

    If you go to “All Stories” and move all your existing stories to the trash (don’t worry, you can restore them again!), and then go to “My Stories”, is this error still happening?

    Thread Starter panosgm2017

    (@panosgm2017)

    I did resubmit the site health form.

    As for the follow-up, I deleted them and, indeed, the ‘All stories’ works great now.

    Although, when I duplicate the newly created stories, I don’t see the contents of the duplicate. All I get is the full functioning editor with a blank canvas.

    Hope it helps

    Plugin Author Pascal Birchler

    (@swissspidy)

    Thank you so much, this helps a lot!

    The network response you shared also explains why you get a blank canvas. The “story_data” field for each story in the response is completely empty.

    While I am not able to reproduce this behavior on my site (story_data is never empty), this could perhaps be a result from migration. Did you do that migration recently? If so, how did you do it?

    If you have database access, could you check out the wp_posts table and search for posts with post type web-story, and check if their post_content_filtered column is not empty?

    As an SQL query, you could write it like this:

    SELECT ID, post_title, post_content_filtered FROM wp_posts WHERE post_type = 'web-story'

    If that column is empty for all stories, there was some data loss.
    If it’s not empty, we have to look further.

    Thread Starter panosgm2017

    (@panosgm2017)

    Unfortunately I don’t have access to the database

    There was an export from a previous WordPress installation but only for the posts and stories

    That said, I deleted the stories but I still experience (outside of troubleshooting mode) both the blank screen and the empty stories when duplicate

    Hope it helps

    Plugin Author Pascal Birchler

    (@swissspidy)

    Thanks for the additional info. That export might be an explanation for the previous stories.

    Then, the issue with duplication you’re describing is caused by the “Duplicate Page” plugin you are using. It does not duplicate all of the content. It duplicates post_content but not post_content_filtered— but the Web Stories plugin needs both.

    I suggest you to report this to the plugin developer as a bug.

    In the meantime, if you want to safely duplicate stories, you can do this via the “My Stories” view by clicking on the three dots next to a story and then clicking on “Duplicate”. This will correctly preserve all data.

    Thread Starter panosgm2017

    (@panosgm2017)

    Hello again

    I can’t duplicate Stories since I can’t see them in the tab
    Also
    I can’t edit newly created ones since I get the editor with a white page and no Stories content

    Plugin Author Pascal Birchler

    (@swissspidy)

    OK, sounds like we’re talking about a couple of different issues at the same time.

    Let’s ignore the duplication part for a second and let’s avoid going to the “My Stories” page.

    If you trash all your stories, and then create a new one in the editor, save it, and go straight to “My Stories”, you still cannot see it? And if you open it again in the editor the content is gone again?

Viewing 15 replies - 16 through 30 (of 40 total)
  • The topic ‘Web Stories white screen’ is closed to new replies.