Next js, TypeError: Cannot read property 'Fragment' of undefined

[Mike]

While using next js and combining components with html pug crashes with the error "TypeError: Cannot read property 'Fragment' of undefined". How do I debug something like this? Can I see what the plugin in generating to find the problem?

plugin version

"babel-plugin-transform-react-pug": "^7.0.1",

Page code

import { React, Component } from 'react'
import Link from 'next/link'

function Func(props) {
    return pug`
        Link(href="/") Home
        span Hello
    `;
}

export default Func

The same thing in jsx should be

return (
        <>
            <Link href="/">Home</Link>
            <span>Hello</span>
        </>
    )

[Mike]

If anyone comes across this it's because I had two root components

ok:

pug`
  div
    span 1
    span 2
`

not ok:

pug`
  span 1
  span 2
`

[Eugene Zhlobo]

@Mrono yeah, I apologize to keep this too far away from modern react. The issue occurs because we use React.Fragment to compose siblings while modern react relies only on <>.

For now you can manually import and use Fragment instead of div, and it will be a better approach.

Soon the update will be delivered with correct behavior for cases you experienced.