Uncaught TypeError: Failed to execute 'observe' on 'IntersectionObserver': parameter 1 is not of type 'Element'.

anthonyhan commented 5 years ago

[x] I have confirmed that this bug only appears in theme NexT, but cannot be reproduced in other themes (e.g. default theme landscape). In other words, prove that this is a NexT bug, not a bug from Hexo.
[x] I have already viewed Hexo Docs page, especially Templates, Variables, Helpers and Troubleshooting.
[x] I have already viewed NexT Documentation Site.
[x] I have searched for current issues which does not help me.

Expected behavior

The post with toc showing in the sidebar should be loaded normally.

Actual behavior

any post with a toc in the sidebar can not loaded. Error text shows as below:

utils.js?v=7.4.0:315 Uncaught TypeError: Failed to execute 'observe' on 'IntersectionObserver': parameter 1 is not of type 'Element'.
    at utils.js?v=7.4.0:315
    at Array.forEach (<anonymous>)
    at createIntersectionObserver (utils.js?v=7.4.0:315)
    at Object.registerSidebarTOC (utils.js?v=7.4.0:317)
    at Object.NexT.boot.refresh (next-boot.js?v=7.4.0:91)
    at next-boot.js?v=7.4.0:112
(anonymous) @ utils.js?v=7.4.0:315
createIntersectionObserver @ utils.js?v=7.4.0:315
registerSidebarTOC @ utils.js?v=7.4.0:317
NexT.boot.refresh @ next-boot.js?v=7.4.0:91
(anonymous) @ next-boot.js?v=7.4.0:112

links in toc from the sidebar seemed broken.

http://localhost:4000/about/#null

Steps to reproduce the behavior

Open any post will get this error.
Used Chrome DevTools to set a breakpoint at line 315sections.forEach(item => intersectionObserver.observe(item));.
There're 2 items in sections, but both of them are null.

I modified the code to fix the error temporarily, but didn't find the reason.

sections.forEach(item =>{if(item!=null) intersectionObserver.observe(item)});

Hexo Information

Package dependencies Information

{
  "name": "hexo-site",
  "version": "0.0.0",
  "private": true,
  "hexo": {
    "version": "3.9.0"
  },
  "dependencies": {
    "@iktakahiro/markdown-it-katex": "^3.1.0",
    "hexo": "^3.9.0",
    "hexo-deployer-git": "^2.0.0",
    "hexo-filter-optimize": "^0.2.7",
    "hexo-generator-archive": "^1.0.0",
    "hexo-generator-category": "^1.0.0",
    "hexo-generator-feed": "^2.0.0",
    "hexo-generator-index": "^1.0.0",
    "hexo-generator-sitemap": "^1.1.2",
    "hexo-generator-tag": "^1.0.0",
    "hexo-renderer-ejs": "^1.0.0",
    "hexo-renderer-markdown-it": "^3.4.1",
    "hexo-renderer-stylus": "^1.1.0",
    "hexo-server": "^1.0.0"
  }
}

Hexo Version

hexo: 3.9.0
hexo-cli: 2.0.0
os: Windows_NT 10.0.18362 win32 x64
http_parser: 2.8.0
node: 10.7.0
v8: 6.7.288.49-node.15
uv: 1.22.0
zlib: 1.2.11
ares: 1.14.0
modules: 64
nghttp2: 1.32.0
napi: 3
openssl: 1.1.0h
icu: 62.1
unicode: 11.0
cldr: 33.1
tz: 2018e

Hexo Configuration

# Writing
new_post_name: :title.md # File name of new posts
default_layout: post
titlecase: false # Transform title into titlecase
external_link: true # Open external links in new tab
filename_case: 1
render_drafts: false
post_asset_folder: false
relative_link: false
future: true
highlight:
  enable: true
  line_number: true
  auto_detect: false
  tab_replace:

# Category & Tag
default_category: uncategorized
category_map:
tag_map:

# Markdown-it config
## Docs: https://github.com/celsomiranda/hexo-renderer-markdown-it/wiki
markdown:
  render:
    html: true
    xhtmlOut: false
    breaks: true
    linkify: true
    typographer: true
    quotes: '“”‘’'
  plugins:
    - '@iktakahiro/markdown-it-katex'

NexT Configuration

# ---------------------------------------------------------------
# Site Information Settings
# See: https://theme-next.org/docs/getting-started/
# ---------------------------------------------------------------

favicon:
  small: /favicon.ico
  medium: /favicon.ico
  apple_touch_icon: /apple-touch-icon.png
  safari_pinned_tab: /website_logo.svg
  android_manifest: /manifest.json
  #ms_browserconfig: /images/browserconfig.xml

# hexo-generator-feed required for rss support. Leave rss as blank to use site's feed link.
# Set rss to false to disable feed link. Set rss to specific value if you have burned your feed already.
rss:

footer:
  # Specify the date when the site was setup. If not defined, current year will be used.
  #since: 2015

  # Icon between year and copyright info.
  icon:
    # Icon name in Font Awesome. See: https://fontawesome.com/v4.7.0/icons/
    # `heart` is recommended with animation in red (#ff0000).
    name: heart
    # If you want to animate the icon, set it to true.
    animated: false
    # Change the color of icon, using Hex Code.
    color: "#ff0000"

  # If not defined, `author` from Hexo `_config.yml` will be used.
# Available values of license: by | by-nc | by-nc-nd | by-nc-sa | by-nd | by-sa | zero
# You can set a language value if you prefer a translated version of CC license, e.g. deed.zh
# CC licenses are available in 39 languages, you can find the specific and correct abbreviation you need on https://creativecommons.org
creative_commons:
  license: by-nc-sa
  sidebar: false
  post: true
  language:

# ---------------------------------------------------------------
# SEO Settings
# ---------------------------------------------------------------
# Value before `||` delimiter is the target link.
# Value after `||` delimiter is the name of Font Awesome icon. If icon (with or without delimiter) is not specified, question icon will be loaded.
# When running the site in a subdirectory (e.g. domain.tld/blog), remove the leading slash from link value (/archives -> archives).
# External url should start with http:// or https://
menu:
  home: / || home
  about: /about/ || user
  tags: /tags/ || tags
  #categories: /categories/ || th
  archives: /archives/ || archive
  #schedule: /schedule/ || calendar
  #sitemap: /sitemap.xml || sitemap
  #commonweal: /404/ || heartbeat

# ---------------------------------------------------------------
# Scheme Settings
# ---------------------------------------------------------------

# Schemes
#scheme: Muse
#scheme: Mist
#scheme: Pisces
scheme: Gemini

# ---------------------------------------------------------------
# Sidebar Settings
# See: https://theme-next.org/docs/theme-settings/sidebar
# ---------------------------------------------------------------
# Table Of Contents in the Sidebar

# Post meta display settings
post_meta:
  item_text: true
  created_at: true
  updated_at:
    enable: false
    another_day: true
  categories: true

# Optimize the display of scrollbars on webkit based browsers.
custom_scrollbar: false
#   - jsDelivr (cdn.jsdelivr.net), works everywhere even in China
#   - CDNJS (cdnjs.cloudflare.com), provided by cloudflare
# ---------------------------------------------------------------

# Math Formulas Render Support
math:
  enable: true

  # Default (true) will load mathjax / katex script on demand.
  # That is it only render those page which has `mathjax: true` in Front-matter.
  # If you set it to false, it will load mathjax / katex srcipt EVERY PAGE.
  per_page: true

    enable: false
    # See: https://mhchem.github.io/MathJax-mhchem/
    mhchem: false

  # hexo-renderer-markdown-it-plus (or hexo-renderer-markdown-it with markdown-it-katex plugin) required for full Katex support.
  katex:
    enable: true
    # See: https://github.com/KaTeX/KaTeX/tree/master/contrib/copy-tex
    copy_tex: false

# Gitalk
# Demo: https://gitalk.github.io
# For more information: https://github.com/gitalk/gitalk
gitalk:
  enable: true
  github_id:  ***************************** # GitHub repo owner
  repo:  ***************************** # Repository name to store issues
  client_id:  ***************************** # GitHub Application Client ID
  client_secret: ******************************# GitHub Application Client Secret
  admin_user: anthonyhan # GitHub repo owner and collaborators, only these guys can initialize 

# Google Analytics
google_analytics:
  tracking_id: UA-********-1 # <app_id>
  localhost_ignored: true

Other Information

welcome[bot] commented 5 years ago

Thanks for opening this issue, maintainers will get back to you as soon as possible!

issue-label-bot[bot] commented 5 years ago

Issue-Label Bot is automatically applying the label Bug to this issue, with a confidence of 0.72. Please mark this comment with :thumbsup: or :thumbsdown: to give our bot feedback!

Links: app homepage, dashboard and code for this bot.

stevenjoezhang commented 5 years ago

Could you please provide URLs to your blog? I can't reach your localhost...

anthonyhan commented 5 years ago

Could you please provide URLs to your blog? I can't reach your localhost...

https://www.limbonova.com

next theme version: 7.4.0

thanks for your time!

Limbo-Nova
Limbo-Nova
Carpe Diem

stevenjoezhang commented 5 years ago

The top of contents section in your page is malformed: https://github.com/anthonyhan/anthonyhan.github.io/blob/eb29ba01d164a86a5d0f2f167c8393afcc18c7ba/about/index.html#L354

<a class="nav-link" href="#null">

Check if all headings in your markdown source code is used properly: https://github.com/theme-next/hexo-theme-next/issues/882#issuecomment-494202392

GitHub
anthonyhan/anthonyhan.github.io
hexo blog. Contribute to anthonyhan/anthonyhan.github.io development by creating an account on GitHub.

jiangtj commented 5 years ago

If you are using marked, make sure headerIds is enabled.

anthonyhan commented 5 years ago

Thanks for your kind reply!

@jiangtj I'm using hexo-renderer-markdown-it

@stevenjoezhang I tried it in a new post with a heading # only and had not luck.

---
title: hello world
date: 2019-09-18 14:30:29
tags:
---

# Test
some text.

jiangtj commented 5 years ago

I'm using hexo-renderer-markdown-it

Yes, there are problems in hexo-renderer-markdown-it Orz

anthonyhan commented 5 years ago

for reproducing this issue, I created a new site for testing.

package.json: replace marked with markdown-it only

{
  "name": "hexo-site",
  "version": "0.0.0",
  "private": true,
  "hexo": {
    "version": "3.9.0"
  },
  "dependencies": {
    "hexo": "^3.9.0",
    "hexo-generator-archive": "^0.1.5",
    "hexo-generator-category": "^0.1.3",
    "hexo-generator-index": "^0.2.1",
    "hexo-generator-tag": "^0.2.0",
    "hexo-renderer-ejs": "^0.3.1",
    "hexo-renderer-stylus": "^0.3.3",
    "hexo-renderer-markdown-it": "^3.4.1",
    "hexo-server": "^0.3.3"
  }
}

modifications on _config.yml of HEXO

# Markdown-it config
## Docs: https://github.com/celsomiranda/hexo-renderer-markdown-it/wiki
markdown:
  render:
    html: true
    xhtmlOut: false
    breaks: false
    linkify: false
    typographer: false
    quotes: '“”‘’'

create a new post

---
title: hello world
date: 2019-09-18 14:54:03
tags:
---
# Test
some text.

It will reproduce this error exactly. @jiangtj is right. It seems there's something wrong with hexo-renderer-markdown-it.

Hope it helps. Do I need to close issue?

stevenjoezhang commented 5 years ago

You can close it. It's a bug of hexo-renderer-markdown-it: https://github.com/hexojs/hexo-renderer-markdown-it/issues/55

stevenjoezhang commented 5 years ago

anthonyhan commented 5 years ago

I fixed it by adding a plugin of hexo-renderer-markdown-it markdown-it-named-headings.

Thanks again!

GIWTO commented 4 years ago

Now I also encountered this problem, through npm install markdown-it-named-headings --save， then add option - markdown-it-named-headings in Hexo main config.yml.This is good!

curbengh commented 4 years ago

I fixed it by adding a plugin of hexo-renderer-markdown-it markdown-it-named-headings.

hexo-renderer-markdown-it actually has built-in support for adding anchor link to headings, but alas it's not enabled by default and the documentation is quite hidden.

To enable,

markdown:
  anchor:
    level: 2

level 2 starts with ## title. If you want to start with # title, set level 1 (not recommended because post's title usually is <h1>, so toc would include post title).

I'll submit a PR to enable it by default.

Edit: https://github.com/hexojs/hexo-renderer-markdown-it/pull/90

theme-next / hexo-theme-next