Cannot read propery 'suppressHydrationWarning' of null` error when rendering async importing & rendering MDX

[timfee]

Hi there,

I'm loading MDX files (with an md extension, so it works with Netlify's CMS), see referenced next.config.js.

When trying to render an article dynamically, the following produces

TypeError: Cannot read property 'suppressHydrationWarning' of null

at this line of code in client/index.js.

import React from 'react'

interface Props {
  layout: string
  title: string
  tldr: string
  date: Date
  thumbnail: string
  slug: string
  categories: string[]
  author: string
  default: React.ElementType
}

export default class Post extends React.Component<Props, State> {
  static async getInitialProps({ query }) {
    const { slug } = query
    return import(`../../_content/posts/${slug}.md`)
  }

  render() {
    const { default: Component, title } = this.props
    return (
      <>
        <h1>{title}</h1>
        <Component />
      </>
    )
  }
}

This is despite everything rendering correctly once the error is dismissed.

When I load content using a non-async import, as follows, everything is fine:

import { NextSeo, SocialProfileJsonLd } from 'next-seo'
import React from 'react'
import { Prose, Introduction, Title } from '../components/theme'

import Content, { title } from '../_content/bio.md'

const About: React.FC = () => {
  return (
    <>
      <Prose css={tw`prose`}>
        <Introduction>
          <Title>{title}</Title>
        </Introduction>
        <Prose style={{ maxWidth: `80ch` }}>
          <Content />
        </Prose>
      </Prose>
    </>
  )
}
export default About

I noticed that the culprit was inside of a conditional that wouldn't execute if reactMode !== legacy, and after adding that to my next.config.js, the error went away!

I'm not sure if this has something to do with how I'm using it, or if this is some pesky bug. In any event, I'm finally free from its grap, so I wanted to report it here :)

Environment files