Dvc.org: Cannot read property 'htmlAst' of null (local dev env)

[gitcommitshow]

I'm getting this error, when I try to load a blog page on my local setup of the project

// At src/templates/doc.tsx:27
TypeError: Cannot read property 'htmlAst' of null
DocPage
src/templates/doc.tsx:27
  24 | const DocPage: React.FC<IDocPageProps> = ({
  25 |   data,
  26 |   pageContext: { slug, headings }
> 27 | }) => {
  28 |   const {
  29 |     page: { htmlAst, title, description }
  30 |   } = data

Its not consistent, sometimes I see this error on sometimes on /doc and sometimes on any command reference page.

• System : [email protected]
• node version : v12.18.4
• npm version: 6.14.6
• yarn version: 1.21.1
• The code is from remote master, with no local changes at all (latest pull at the time of posting v1.0.0)
• All npm packages have been installed using yarn before running yarn develop
• All tests are passing

Corresponding dev tools logs

Uncaught TypeError: Cannot read property 'htmlAst' of null
    at DocPage (doc.tsx:27)
    at renderWithHooks (react-dom.development.js:14804)
    at mountIndeterminateComponent (react-dom.development.js:17483)
    at beginWork (react-dom.development.js:18597)
    at HTMLUnknownElement.callCallback (react-dom.development.js:189)
    at Object.invokeGuardedCallbackDev (react-dom.development.js:238)
    at invokeGuardedCallback (react-dom.development.js:293)
    at beginWork$1 (react-dom.development.js:23204)
    at performUnitOfWork (react-dom.development.js:22158)
    at workLoopSync (react-dom.development.js:22131)
    at performSyncWorkOnRoot (react-dom.development.js:21757)
    at scheduleUpdateOnFiber (react-dom.development.js:21189)
    at updateContainer (react-dom.development.js:24374)
    at react-dom.development.js:24759
    at unbatchedUpdates (react-dom.development.js:21904)
    at legacyRenderSubtreeIntoContainer (react-dom.development.js:24758)
    at render (react-dom.development.js:24841)
    at app.js:94
react-dom.development.js:89 Warning: componentWillMount has been renamed, and is not recommended for use. See https://fb.me/react-unsafe-component-lifecycles for details.

* Move code with side effects to componentDidMount, and set initial state in the constructor.
* Rename componentWillMount to UNSAFE_componentWillMount to suppress this warning in non-strict mode. In React 17.x, only the UNSAFE_ name will work. To rename all deprecated lifecycles to their new names, you can run `npx react-codemod rename-unsafe-lifecycles` in your project source folder.

Please update the following components: SideEffect(NullComponent)
printWarning @ react-dom.development.js:89
index.js:2177 The above error occurred in the <DocPage> component:
    in DocPage (created by HotExportedDocPage)
    in AppContainer (created by HotExportedDocPage)
    in HotExportedDocPage (created by PageRenderer)
    in div (at Layout/index.tsx:54)
    in div (at LayoutWidthContainer/index.tsx:17)
    in LayoutWidthContainer (at Layout/index.tsx:26)
    in div (at MainLayout/index.tsx:55)
    in MainLayout (at Layout/index.tsx:22)
    in Layout (at Page/index.tsx:53)
    in Page (at PageWrapper/index.js:5)
    in PageRenderer (at query-result-store.js:86)
    in PageQueryStore (at root.js:56)
    in RouteHandler (at root.js:78)
    in div (created by FocusHandlerImpl)
    in FocusHandlerImpl (created by Context.Consumer)
    in FocusHandler (created by RouterImpl)
    in RouterImpl (created by Context.Consumer)
    in Location (created by Context.Consumer)
    in Router (created by EnsureResources)
    in ScrollContext (at root.js:69)
    in RouteUpdates (at root.js:68)
    in EnsureResources (at root.js:66)
    in LocationHandler (at root.js:124)
    in LocationProvider (created by Context.Consumer)
    in Location (at root.js:123)
    in Root (at root.js:132)
    in StaticQueryStore (at root.js:138)
    in _default (at app.js:94)

React will try to recreate this component tree from scratch using the error boundary you provided, AppContainer.
__stack_frame_overlay_proxy_console__ @ index.js:2177
index.js:2177 TypeError: Cannot read property 'htmlAst' of null
    at DocPage (doc.tsx:27)
    at renderWithHooks (react-dom.development.js:14804)
    at mountIndeterminateComponent (react-dom.development.js:17483)
    at beginWork (react-dom.development.js:18597)
    at HTMLUnknownElement.callCallback (react-dom.development.js:189)
    at Object.invokeGuardedCallbackDev (react-dom.development.js:238)
    at invokeGuardedCallback (react-dom.development.js:293)
    at beginWork$1 (react-dom.development.js:23204)
    at performUnitOfWork (react-dom.development.js:22158)
    at workLoopSync (react-dom.development.js:22131)
    at performSyncWorkOnRoot (react-dom.development.js:21757)
    at scheduleUpdateOnFiber (react-dom.development.js:21189)
    at updateContainer (react-dom.development.js:24374)
    at react-dom.development.js:24759
    at unbatchedUpdates (react-dom.development.js:21904)
    at legacyRenderSubtreeIntoContainer (react-dom.development.js:24758)
    at render (react-dom.development.js:24841)
    at app.js:94
__stack_frame_overlay_proxy_console__ @ index.js:2177
react-hot-loader.development.js:2406 Uncaught TypeError: Cannot read property 'htmlAst' of null
    at DocPage (doc.tsx:27)
    at renderWithHooks (react-dom.development.js:14804)
    at mountIndeterminateComponent (react-dom.development.js:17483)
    at beginWork (react-dom.development.js:18597)
    at HTMLUnknownElement.callCallback (react-dom.development.js:189)
    at Object.invokeGuardedCallbackDev (react-dom.development.js:238)
    at invokeGuardedCallback (react-dom.development.js:293)
    at beginWork$1 (react-dom.development.js:23204)
    at performUnitOfWork (react-dom.development.js:22158)
    at workLoopSync (react-dom.development.js:22131)
    at performSyncWorkOnRoot (react-dom.development.js:21757)
    at scheduleUpdateOnFiber (react-dom.development.js:21189)
    at updateContainer (react-dom.development.js:24374)
    at react-dom.development.js:24759
    at unbatchedUpdates (react-dom.development.js:21904)
    at legacyRenderSubtreeIntoContainer (react-dom.development.js:24758)
    at render (react-dom.development.js:24841)
    at app.js:94
index.js:2177 The above error occurred in the <AppContainer> component:
    in AppContainer (created by HotExportedDocPage)
    in HotExportedDocPage (created by PageRenderer)
    in div (at Layout/index.tsx:54)
    in div (at LayoutWidthContainer/index.tsx:17)
    in LayoutWidthContainer (at Layout/index.tsx:26)
    in div (at MainLayout/index.tsx:55)
    in MainLayout (at Layout/index.tsx:22)
    in Layout (at Page/index.tsx:53)
    in Page (at PageWrapper/index.js:5)
    in PageRenderer (at query-result-store.js:86)
    in PageQueryStore (at root.js:56)
    in RouteHandler (at root.js:78)
    in div (created by FocusHandlerImpl)
    in FocusHandlerImpl (created by Context.Consumer)
    in FocusHandler (created by RouterImpl)
    in RouterImpl (created by Context.Consumer)
    in Location (created by Context.Consumer)
    in Router (created by EnsureResources)
    in ScrollContext (at root.js:69)
    in RouteUpdates (at root.js:68)
    in EnsureResources (at root.js:66)
    in LocationHandler (at root.js:124)
    in LocationProvider (created by Context.Consumer)
    in Location (at root.js:123)
    in Root (at root.js:132)
    in StaticQueryStore (at root.js:138)
    in _default (at app.js:94)

React will try to recreate this component tree from scratch using the error boundary you provided, LocationProvider.
__stack_frame_overlay_proxy_console__ @ index.js:2177
index.js:81 Uncaught TypeError: Cannot read property 'htmlAst' of null
    at DocPage (doc.tsx:27)
    at renderWithHooks (react-dom.development.js:14804)
    at mountIndeterminateComponent (react-dom.development.js:17483)
    at beginWork (react-dom.development.js:18597)
    at HTMLUnknownElement.callCallback (react-dom.development.js:189)
    at Object.invokeGuardedCallbackDev (react-dom.development.js:238)
    at invokeGuardedCallback (react-dom.development.js:293)
    at beginWork$1 (react-dom.development.js:23204)
    at performUnitOfWork (react-dom.development.js:22158)
    at workLoopSync (react-dom.development.js:22131)
    at performSyncWorkOnRoot (react-dom.development.js:21757)
    at scheduleUpdateOnFiber (react-dom.development.js:21189)
    at updateContainer (react-dom.development.js:24374)
    at react-dom.development.js:24759
    at unbatchedUpdates (react-dom.development.js:21904)
    at legacyRenderSubtreeIntoContainer (react-dom.development.js:24758)
    at render (react-dom.development.js:24841)
    at app.js:94
index.js:2177 The above error occurred in the <LocationProvider> component:
    in LocationProvider (created by Context.Consumer)
    in Location (at root.js:123)
    in Root (at root.js:132)
    in StaticQueryStore (at root.js:138)
    in _default (at app.js:94)

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.
__stack_frame_overlay_proxy_console__ @ index.js:2177
react-dom.development.js:11103 Uncaught TypeError: Cannot read property 'htmlAst' of null
    at DocPage (doc.tsx:27)
    at renderWithHooks (react-dom.development.js:14804)
    at mountIndeterminateComponent (react-dom.development.js:17483)
    at beginWork (react-dom.development.js:18597)
    at HTMLUnknownElement.callCallback (react-dom.development.js:189)
    at Object.invokeGuardedCallbackDev (react-dom.development.js:238)
    at invokeGuardedCallback (react-dom.development.js:293)
    at beginWork$1 (react-dom.development.js:23204)
    at performUnitOfWork (react-dom.development.js:22158)
    at workLoopSync (react-dom.development.js:22131)
    at performSyncWorkOnRoot (react-dom.development.js:21757)
    at scheduleUpdateOnFiber (react-dom.development.js:21189)
    at updateContainer (react-dom.development.js:24374)
    at react-dom.development.js:24759
    at unbatchedUpdates (react-dom.development.js:21904)
    at legacyRenderSubtreeIntoContainer (react-dom.development.js:24758)
    at render (react-dom.development.js:24841)
    at app.js:94
index.js:2177 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 SearchForm (at Layout/index.tsx:44)
    in div (at Layout/index.tsx:43)
    in div (at LayoutWidthContainer/index.tsx:17)
    in LayoutWidthContainer (at Layout/index.tsx:26)
    in div (at MainLayout/index.tsx:55)
    in MainLayout (at Layout/index.tsx:22)
    in Layout (at Page/index.tsx:53)
    in Page (at PageWrapper/index.js:5)
    in PageRenderer (at query-result-store.js:86)
    in PageQueryStore (at root.js:56)
    in RouteHandler (at root.js:78)
    in div (created by FocusHandlerImpl)
    in FocusHandlerImpl (created by Context.Consumer)
    in FocusHandler (created by RouterImpl)
    in RouterImpl (created by Context.Consumer)
    in Location (created by Context.Consumer)
    in Router (created by EnsureResources)
    in ScrollContext (at root.js:69)
    in RouteUpdates (at root.js:68)
    in EnsureResources (at root.js:66)
    in LocationHandler (at root.js:124)
__stack_frame_overlay_proxy_console__ @ index.js:2177
index.js:2177 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 SidebarMenu (at Layout/index.tsx:45)
    in div (at Layout/index.tsx:43)
    in div (at LayoutWidthContainer/index.tsx:17)
    in LayoutWidthContainer (at Layout/index.tsx:26)
    in div (at MainLayout/index.tsx:55)
    in MainLayout (at Layout/index.tsx:22)
    in Layout (at Page/index.tsx:53)
    in Page (at PageWrapper/index.js:5)
    in PageRenderer (at query-result-store.js:86)
    in PageQueryStore (at root.js:56)
    in RouteHandler (at root.js:78)
    in div (created by FocusHandlerImpl)
    in FocusHandlerImpl (created by Context.Consumer)
    in FocusHandler (created by RouterImpl)
    in RouterImpl (created by Context.Consumer)
    in Location (created by Context.Consumer)
    in Router (created by EnsureResources)
    in ScrollContext (at root.js:69)
    in RouteUpdates (at root.js:68)
    in EnsureResources (at root.js:66)
    in LocationHandler (at root.js:124)

[jorgeorpinel]

What's the blog page @gitcommitshow ? So I can try to reproduce locally myself. Thanks

[gitcommitshow]

What's the blog page @gitcommitshow ? So I can try to reproduce locally myself. Thanks

I meant just visit the website http://localhost:8000/doc or any content there

[jorgeorpinel]

Ah, well everything works for me. Can you share your system details as well as node and npm versions please? Thanks

[gitcommitshow]

Ah, well everything works for me. Can you share your system details as well as node and npm versions please? Thanks

• System : [email protected]
• node version : v12.18.4
• npm version: 6.14.6
• yarn version: 1.21.1

(just updated the issue with these details as well now)

[jorgeorpinel]

May want to upgrade Node and try again.

And we may need to update the min. req version in https://dvc.org/doc/user-guide/contributing/docs#development-environment cc @rogermparent do you know? Thanks!

[jorgeorpinel]

Actually I have similar versions and it works on my [email protected] LTS... 🤔

[rogermparent]

Nothing jumps out at me immediately, but odd "node doesn't exist" errors like this are often related to cache. While gatsby clean works, it'll force a rebuild of all images, so I'd try deleting .cache in the local dev env and see if that fixes the issue.

[gitcommitshow]

Nothing jumps out at me immediately, but odd "node doesn't exist" errors like this are often related to cache. While gatsby clean works, it'll force a rebuild of all images, so I'd try deleting .cache in the local dev env and see if that fixes the issue.

Confirmed, deleting .cache fixes the problem. Thanks for quick resolution.

[jorgeorpinel]

Thanks @rogermparent

[jorgeorpinel]

Woah I just had this problem too after switching branches while running the dev server! Let's keep an eye on it...

I stopped the server and re-ran yarn && yarn develop to fix it (no need to clear the cache) but even just that takes some time.