How do I get the wrapper/layout to work?

[joshua-d-brown]

First of all, I apologize for the lack of detail. I'm dealing with legacy code here, I didn't write it. This is the component that generates the JSX:

<Activity components={components} />

"Activity" is dynamically generated as a JS file with the activity module needed.

The problem I am having is that the package is generating a <wrapper /> tag instead of a valid HTML tag like <div /> and I can't figure out how to change it. I have searched the discussions, I have read the docs, I have tried several different code examples, and nothing works. The version I am working with is 1.6.19. Any help would be appreciated. I will try to provide more detail if I can .

[ChristianMurphy]

It sounds like it is working.
MDX generates a JavaScript file which abstracts the individual components with a wrapper, which is resolved at runtime.
To resolve the final components/markup, run the generated JavaScript inside of React, for example if you want static markup use: https://reactjs.org/docs/react-dom-server.html#rendertostaticmarkup to render.

[joshua-d-brown]

I don't understand your answer at all, sorry. Yes, it is working in that it is creating a <wrapper> tag to wrap the content. But that is not valid HTML and I want it to be a <div>. I cannot figure out how to make that happen.

[ChristianMurphy]

Phrasing that another way.
MDX by default provides only standard HTML elements.
However, projects can choose to override or replace elements with custom elements such as <wrapper> if they choose.
Your project has chosen to do so.

There are several different ways that override could be happening: through plugins, through a component provider, through the components={} prop, among others.
In the limited amount of code that has been shared, I'd start by looking at components={} (try removing it entirely and see if it fixes it, if it does, figure out which of your custom components is misconfigured).

If it does not, again see my second comment https://github.com/orgs/mdx-js/discussions/2097#discussioncomment-3353127 a more complete example would be needed to know which of the dozens of MDX integrations you are using and how you are using it.

In either case, this is likely not a bug in MDX, but project provided overrides/configuration passed to MDX.

[joshua-d-brown]

We found a workaround. Thank you for your assistance.

[wooorm]

@joshua-d-brown Can you please post what worked for you so people stumbling on this get to see an answer?

https://www.reddit.com/r/ProgrammerHumor/comments/a14wif/nvm_i_figured_it_out/

https://xkcd.com/979/

[joshua-d-brown]

Not really, because like I said it's legacy code and probably implemented in a strange way. My workaround is not from anything Christian gave me above.