How do you use components with runSync?

[colin969]

I'm sure I'm missing something simple, but this has been driving me up the wall.

The code below does render the mdx properly, but I can't get it to use the component replacements no matter what I change? I need to change the attributes of links, but no matter what I change it never gets used.

import { GameComponentProps } from 'flashpoint-launcher-renderer';
import { compileSync, runSync } from '@mdx-js/mdx';
import { ExtData } from './types';
import * as runtime from 'react/jsx-runtime';
import { ErrorBoundary } from 'react-error-boundary';

export default function NgAuthorComments(props: GameComponentProps) {
  const extData: ExtData | undefined = props.game.extData?.nga;
  const comments = extData?.author_comments;

  let content: any = undefined;
  if (comments) {
    const baseUrl = 'https://example.com';
    const code = String(compileSync(comments, {
      outputFormat: 'function-body'
    }));
    const { default: MDXContent } = runSync(code, { ...runtime, baseUrl });
    content = <ErrorBoundary fallbackRender={({ error }) => <>{`Error rendering author comments: ${error}`}</>}>
      <MDXContent
        components={{
          a({ href }) {
            return <a href={href} target='_blank'/>;
          }
        }}/>
    </ErrorBoundary>;
  } else {
    content = <p>No Author Comments</p>;
  }

  return (
    <div className='browse-right-sidebar__row'>
      <p>NG Author Comments:</p>
      <div className='ng-author-comments'>
        {content}
      </div>
    </div>
  );
}

[remcohaszing]

What’s not working? What does the MDX code look like? What does code look like? That should give you a hint.

Also move components outside of NgAuthorComments. Defining React components during render is a bad practice and will cause unnecessary re-renders.

[colin969]

Ended up getting around it by using rehype instead. I'm guessing it's because they're actual a tags in the text and it's not generating a tags for markdown?