How can I change the JSXIdentifier node?

[zfben]

My mdx content is below and want to render it in react native:

export const Cat = () => <img src="https://placekitten.com/200/200" />

<Cat />

It throws: Invariant Violation: View config getter callback for component img must be a function (received undefined). Make sure to start component names with a capital letter.

Then I try to use unist-util-visit's visit to change the img node, but I found it's a JSXIdentifier node and can't be visited.

Is there a way to change a JSXIdentifier node? Thanks for helping.

[remcohaszing]

First I would propose some alternatives:

1. Don’t use <img />. Import and use a custom component instead.

   import { Image } from '../components/Image'
   
   export const Cat = () => <Image src="https://placekitten.com/200/200" />
   
   <Cat />

2. Same as 1, but use a provider.

If you still want to do a custom transform, you can use the ESTree nodes. You first need to find mdxjsEsm nodes with unist-util-visit (or unist-util-visit-parents). This node has a property data.program which contains the ESTree program. You can walk this program with estree-walker.

import { walk } from 'estree-walker'
import { visit } from 'unist-util-visit'

/** @type {import('mdast').Root} */
let root;

visit(root, 'mdxjsEsm', (mdxjsEsm) => {
  const program = mdxjsEsm.data?.program

  if (!program) {
    return
  }

  walk(program, {
    enter(node) {
      switch (node.type) {
        case 'JSXIdentifier': {
          // Handle your node
        }
      }
    }
  })
})

[zfben]

@remcohaszing I have injected img component to provider's components, but it not works.
How can let it works?

import { evaluateSync } from '@mdx-js/mdx'
import * as runtime from 'react/jsx-runtime'
import { Image } from 'react-native'

const MDXContent = evaluateSync(`export const Cat = () => <img src="https://placekitten.com/200/200" />

<Cat />`, runtime).default

return default const App = () => <MDXContent components={{ img: ({src}) => <Image src={src} /> }} />

[remcohaszing]

You’re passing the components prop. That doesn’t work. You really need to use a provider for this.

[ChristianMurphy]

Adding on.
MDX both with components and with Provider works like JSX does.
Custom components (those starting with an uppercase letter) can be customized, built-ins (components starting with a lowercase letter) cannot.