Headings for Children of Components do not work

[nikischin]

Describe the bug

Headings for children of imported documents do not work as expected. They behave very strange.

To Reproduce

sample.mdx

import Template from "./template.mdx";

<Template someProp="someValue">
    ## Subheading from Child should be inbetween second and third heading

    Some Text from child
</Template>

template.mdx

# Title of Imported file

Someprop has {props.someProp}

## First Heading of Imported file

Some Text of Imported file

## Second Heading of Imported file

Some Text of Imported file

Children is below this

{props.children}

## Third Heading of Imported file

Some Text of Imported file

## Fourth Heading of Imported file

Some Text of Imported file

Expected behavior

Children with heading should be inbetween other headings of parent imported file.

Screenshots

Desktop:

• OS: macOS
• Browser Safari
• Version 18.1.1

[nikischin]

Also it will crash if props are used within headings:

## Someheading containing {props.someProp}

Will produce an error like this:

Cannot read properties of undefined (reading 'props.someProp')
...
export function useTOC(props) {
  13 |   return [{
> 14 |     value: <>{"Someheading containing "}{props.someProp}</>,

Should I open a separate ticket for this?

[nikischin]

Generally headings in combination with embedded documents do not work well.

Even if I use something like

import TemplateWithoutChild from "./template.mdx";

<TemplateWithoutChild />

## Some other Heading outside template
This is displayed correctly in the sidebar but the heading is not displayed correctly in the content (The first heading of the Template is displayed instead here which should not be the case.

This does work for the sidebar but not the content itself.

[dimaMachina]

Describe the bug

Headings for children of imported documents do not work as expected. They behave very strange.

To Reproduce

sample.mdx

import Template from "./template.mdx";

<Template someProp="someValue">
    ## Subheading from Child should be inbetween second and third heading

    Some Text from child
</Template>

template.mdx

# Title of Imported file

Someprop has {props.someProp}

## First Heading of Imported file

Some Text of Imported file

## Second Heading of Imported file

Some Text of Imported file

Children is below this

{props.children}

## Third Heading of Imported file

Some Text of Imported file

## Fourth Heading of Imported file

Some Text of Imported file

Expected behavior

Children with heading should be inbetween other headings of parent imported file.

Screenshots

Desktop:

• OS: macOS
• Browser Safari
• Version 18.1.1

I think this hidden bug was fixed in Nextra 4 in https://github.com/shuding/nextra/pull/3698/files

[nikischin]

Hi @dimaMachina, thank you so much for your investigation and answer!

I totally understand your focus already is on v4, and I also followed your other threads on it. However I wasn't able to find the blog post for migration you were talking about, so I haven't yet started migration. Would you have a link for me to the blog post maybe? I would be happy to try the new version soon!

[dimaMachina]

Did’t yet post, I am on vacation and there is some new missing features to document

[nikischin]

Did’t yet post, I am on vacation and there is some new missing features to document

Ah no worries! Enjoy your vacation and happy to see some update after you are back. Thank you so much for still checking Github issues during vacation!

[nikischin]

@dimaMachina

I think this hidden bug was fixed in Nextra 4 in https://github.com/shuding/nextra/pull/3698/files

Unfortunately this bug still persists in v4.

[dimaMachina]

Hi, feel free to share a reproduction, so it could be fixed