Problems upgrading to v2 #2340

jensug · 2023-08-28T14:14:05Z

jensug
Aug 28, 2023

Hello,

I have taken over a project using mdx-jx and im trying to upgrade the dependencies but im having issues when it comes to mdx-js/loader because some of the methods used are outdated like the isMDXComponent function.

In my project MDX files have a meta prop whith a Layout component imported and other data like titles.

This is the file where problems occur (_app.js)

`import React, { useState, useEffect } from 'react'
import PropTypes from 'prop-types'
import { UIContext, defaultUIConfig } from '../components/contexts/ui'
import { useIsMd } from '../components/useIsScreenSize'
import '../styles/index.css'

const App = ({ Component, pageProps }) => {
const isMd = useIsMd()
const [uiConfig, setUIConfig] = useState({
...defaultUIConfig,
showMenu: true,
setShowMenu: value => setUIConfig(v => ({ ...v, showMenu: value })),
})

useEffect(() => {
    uiConfig.setShowMenu(!isMd)
}, [isMd])

if (Component.isMDXComponent) {
    const mdxProps = Component({}).props
    const meta = mdxProps.meta
    const Layout = meta.Layout

    return (
        <UIContext.Provider value={uiConfig}>
            <Layout meta={meta}>
                <Component {...pageProps} />
            </Layout>
        </UIContext.Provider>
    )
}

return (
    <UIContext.Provider value={uiConfig}>
        <Component {...pageProps} />
    </UIContext.Provider>
)

}`

And this is where the code creates some issues:

if (Component.isMDXComponent) { const mdxProps = Component({}).props const meta = mdxProps.meta const Layout = meta.Layout

Any help is appreciated.
Thanks

Answered by remcohaszing

Aug 31, 2023

I just created recma-mdx-is-mdx-component. You may want to use that for now.

View full answer

ChristianMurphy · 2023-08-28T14:32:22Z

ChristianMurphy
Aug 28, 2023
Maintainer

Welcome @jensug! 👋
I'd recommend starting with the migration guide https://mdxjs.com/migrating/v2/
If the recommendations there don't meet your needs, take a bit of time to frame what you are actually trying to achieve by using these functions and props https://mdxjs.com/community/support/

0 replies

jensug · 2023-08-30T13:51:49Z

jensug
Aug 30, 2023
Author

Hi Christian,

Thanks for the reply and sorry for my lack of explaining. I have tried to follow the mirgration guide but failed to understood where i could have gone wrong, considering this project has fallen into my lap without the people who developed it being around anymore.

The props consist of a meta component with strings of titles and such. It also includes a component Layout which is wrapped around the mdx content, which has been working fine until the upgrade.

After upgrading to v2 the isMDXComponent function is obviously gone, so first thing would be how do i best change this?
The other thing is component.props dont seem to consist of anything. Could there have been a change somewhere here?

Any help is appriciated.

2 replies

jensug Aug 30, 2023
Author

Acctualy the props contaims the children but not the meta.

This is an example meta from an mdx

export const meta = { Layout, title: 'test', subtitle: 'test', courseId: 'test', topicId: 'test', lessonId: 'test', }

ChristianMurphy Aug 30, 2023
Maintainer

@jensug taking a few steps back

what are you trying to achieve with the meta and isMDXComponent?
Are you trying to build a course/site structuring using the data? Is it used in the router? Is it used to edit the <head> tag similar to react helmet? or something else entirely?
how are you using the integration? You mention mdx-js/loader are you using that directly in a webpack file? Or using a Next/Gatsby wrapper?

My best guess reading between the lines of your comments, is that it is somewhere between:

Are you trying to build a course/site structuring

and

used to edit the <head> tag similar to react helmet

in which case, you just need to access the export, and the need for isMDXComponent is unclear (it's probably not needed).

Assuming you are leveraging webpack directly, make sure you are following the configuration guide at https://mdxjs.com/docs/getting-started/#webpack
Then you can import the meta directly.

import Component, { meta } from './my-document.mdx'

and sent the meta data wherever you need it to go.

jensug · 2023-08-31T08:06:23Z

jensug
Aug 31, 2023
Author

Hi,

I am trying to build a course/site structuring.

The meta is just meta data for each course page mdx file containg titles and such. As well as the Layout component which is a setup i dont know why th eprevious developer chose. But i am not trying to add meta tags to the head.

I think the isMDXComponet was used for cases where pages were not supposed to be wrapped in a Layout.

Thanks!

1 reply

remcohaszing Aug 31, 2023
Maintainer

I just created recma-mdx-is-mdx-component. You may want to use that for now.

Answer selected by ChristianMurphy

jensug · 2023-08-31T08:28:15Z

jensug
Aug 31, 2023
Author

I migth have found a solution where i put export default ({ children }) => <Layout meta={meta}>{children}</Layout>; at the end of every mdx file. It just involves copy pasting a lot of pages.

0 replies

jensug · 2023-08-31T12:08:59Z

jensug
Aug 31, 2023
Author

This post : #759 is looking at the same issue as i am.

0 replies

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

mdx-js

Problems upgrading to v2 #2340

{{title}}

Replies: 5 comments 3 replies

{{title}}

{{title}}

{{title}}

{{title}}

{{title}}

{{title}}

{{title}}

{{editor}}'s edit

{{editor}}'s edit

{{title}}

Select a reply

mdx-js

Problems upgrading to v2 #2340

jensug Aug 28, 2023

Replies: 5 comments · 3 replies

ChristianMurphy Aug 28, 2023 Maintainer

jensug Aug 30, 2023 Author

jensug Aug 30, 2023 Author

ChristianMurphy Aug 30, 2023 Maintainer

jensug Aug 31, 2023 Author

remcohaszing Aug 31, 2023 Maintainer

jensug Aug 31, 2023 Author

jensug Aug 31, 2023 Author

jensug
Aug 28, 2023

Replies: 5 comments 3 replies

ChristianMurphy
Aug 28, 2023
Maintainer

jensug
Aug 30, 2023
Author

jensug Aug 30, 2023
Author

ChristianMurphy Aug 30, 2023
Maintainer

jensug
Aug 31, 2023
Author

remcohaszing Aug 31, 2023
Maintainer

jensug
Aug 31, 2023
Author

jensug
Aug 31, 2023
Author