Next-plugins: MDX import results in "Module parse failed: Unexpected character..."

[harrysolovay]

Bug report

Describe the bug

I'm trying to use the @zeit/next-mdx package to import .mdx files (and their metadata) into one of my pages. I'm pretty sure I'm using the plugin correctly. I'm also using TypeScript (potential source of error), but have defined an mdx.d.ts:

`

declare module '*.mdx' {
    let MDXComponent: (props) => JSX.Element
    export default MDXComponent
}

`

I believe that I've properly configured the plugin in my next.config.js. To see the project more in depth, check out the repository.

To Reproduce

1. clone the repository
2. yarn && yarn start
3. open the locally-served site in Chrome and make sure it displays without errors
4. open the project in your code editor and navigate to pages/Landing/index.tsx
5. uncomment lines 6 & 7
6. save & refresh
7. BUG BUG BUG

Expected behavior

The console log (line 7 in pages/Landing/index.tsx) is supposed to print out the imported MD as a JSX/TSX-compatible component and the metadata as an object literal.

System information

• Version of macOS: High Sierra 10.13.5
• Version of Chrome: 68.0.3440.75
• Version of Next.js: 6.1.1

Additional context

Thank you so so so much for taking the time to look this over. Please let me know if you have any questions. I searched pretty hard and don't see this issue elsewhere. Apologies in advance if the answer is obvious. Hopefully this is helpful to others as well.

[harrysolovay]

Hey, just checking in. I'd love to implement MDX in a NextJS site. I would really really really appreciate any suggestions or support 🙏 loving the framework and can't wait to use it in production.

Thank you,

Harry

[emplums]

Having the same issue here as well!

[harrysolovay]

Hi hi hi

[tkesgar]

I noticed that next-mdx has a different signature with the other plugins (#320).

You should add () to your next.config.js and it should work:

// https://github.com/harrysolovay/NextJS-TypeScript-MDX/blob/master/next.config.js
const withSourceMaps = require('@zeit/next-source-maps')
const withMDX = require('@zeit/next-mdx')() // <--
const mdxImagesPlugin = require('remark-images')
const mdxEmjoiPlugin = require('remark-emoji')