MDXProvider ignored when using @mdx-js/runtime

[godmar]

Consider this code, which is a slightly modified version of the example on the package front page:

import React from 'react';
import MDX from '@mdx-js/runtime';
import { MDXProvider } from '@mdx-js/react';

const components = {
  Demo: props => <h1>This is a demo component</h1>
}

const mdx = `
# Hello, world!

<Demo />
`

export default () => {
  return (
    <MDXProvider components={components}>
      <MDX>
        {mdx}
      </MDX>
    </MDXProvider>
  );
}

when run, I see

Component `Demo` was not imported, exported, or provided by MDXProvider as global scope

My questions: am I using MDXProvider correctly? Should MDX take components provided by an enclosing MDXProvider into account? If not, why is it saying that Demo was not (...) provided by MDXProvider?

Thanks.

[godmar]

As per this comment it turns out that MDX and @mdx-js/runtime are deprecated (and apparently work differently in v2). The correct version is something like:

import React from 'react';
import * as runtime from 'react/jsx-runtime.js'
import * as provider from '@mdx-js/react'
import {evaluateSync} from '@mdx-js/mdx'
import { MDXProvider } from '@mdx-js/react';

const components = {
  Demo: props => <h1>This is a demo component from the provider</h1>
}

const mdx = `
# Hello, world!

<Demo />
`

export default () => {
  const {default: Content} = evaluateSync(mdx, {...provider, ...runtime})
  return (
    <MDXProvider components={components}>
      <Content />
    </MDXProvider>
  );
}

Source: https://mdxjs.com/migrating/v2/#mdx-jsruntime