Module build failed with all versions of gatsby-plugin-mdx supporting MDX v2

[csouchet]

Preliminary Checks

• This issue is not a duplicate. Before opening a new issue, please search existing issues: https://github.com/gatsbyjs/gatsby/issues
• This issue is not a question, feature request, RFC, or anything other than a bug report directly related to Gatsby. Please post those things in GitHub Discussions: https://github.com/gatsbyjs/gatsby/discussions

Description

I use mdx in my project to generate some parts of a page and not to generate one page by .mdx file.

Since the first version of gatsby-plugin-mdx who support MDX v2, I tried to migrate from 3.20.0 of gatsby-plugin-mdx to a more recent version. (I tested all the new versions until the 5.0.0)
But I have always the same error:

Module build failed (from ./node_modules/gatsby/dist/utils/babel-loader.js):
SyntaxError: /src/content/content_3.mdx: Missing semicolon. (1:3)

> 1 | You can create and build applications to visualize:```

Reproduction Link

https://codesandbox.io/s/gatsby-plugin-mdx-4-3-0-failed-5i4eud

Steps to Reproduce

1. npm i
2. npm run develop or npm run build

Expected Result

No error, and this rendering for the main page : https://codesandbox.io/s/gatsby-plugin-mdx-3-20-0-ok-swrtm0

Actual Result

We have the following error on all .mdx files:

Module build failed (from ./node_modules/gatsby/dist/utils/babel-loader.js):
SyntaxError: /src/content/content_3.mdx: Missing semicolon. (1:3)

> 1 | You can create and build applications to visualize:```

Environment

System:
    OS: macOS 12.6
    CPU: (12) x64 Intel(R) Core(TM) i7-8750H CPU @ 2.20GHz
    Shell: 5.8.1 - /bin/zsh
  Binaries:
    Node: 18.12.1 - ~/.nvm/versions/node/v18.12.1/bin/node
    Yarn: 1.22.19 - /usr/local/bin/yarn
    npm: 8.19.2 - ~/.nvm/versions/node/v18.12.1/bin/npm
  Browsers:
    Chrome: 107.0.5304.110
    Firefox: 106.0.5
    Safari: 16.1
  npmPackages:
    gatsby: ^5.0.1 => 5.0.1
    gatsby-plugin-google-gtag: ^5.0.0 => 5.0.0
    gatsby-plugin-mailchimp: ^5.2.2 => 5.2.2
    gatsby-plugin-manifest: ^5.0.0 => 5.0.0
    gatsby-plugin-material-ui: ^4.1.0 => 4.1.0
    gatsby-plugin-mdx: ^5.0.0 => 5.0.0
    gatsby-plugin-robots-txt: ^1.8.0 => 1.8.0
    gatsby-plugin-sitemap: ^5.24.0 => 5.24.0
    gatsby-plugin-styled-components: ^6.0.0 => 6.0.0
    gatsby-plugin-typescript: ^5.0.0 => 5.0.0
    gatsby-remark-responsive-iframe: ^6.0.0 => 6.0.0
    gatsby-source-filesystem: ^5.0.0 => 5.0.0
    gatsby-transformer-remark: ^6.0.0 => 6.0.0

Config Flags

No response

[LekoArts]

Hi!

As pointed out in the README (https://www.gatsbyjs.com/plugins/gatsby-plugin-mdx/#usage) you'll need to configure gatsby-source-filesystem to ingest your MDX files.

When you add this to your gatsby-config your reproduction will work:

{
  resolve: `gatsby-source-filesystem`,
  options: {
    name: `content`,
    path: `${__dirname}/src/content`
  }
}

[csouchet]

Hi @LekoArts !

Firstly, thank you for your answer.

I had followed the migration doc, but I didn't quite understand that part.
Thanks a lot for the solution 🙂

Have a good day

[LekoArts]

#37088 will hopefully make that clearer 👍