[v2] Next.js example doesn't work with Next.js v12

Subject of the issue

I am not sure if this is a Next.js or mdx issue. Next.js v12 was released yesterday. The current Next.js example found on the v2 mdx docs at https://v2.mdxjs.com/docs/getting-started/#nextjs doesn’t work for Next.js v12. I can confirm it does work for v11.

Your environment

• OS: macOS 11.6
• Packages: @mdx-js/loader@2.0.0-rc.1 + next@12.0.1
• Env: NPM v7.24.0

Steps to reproduce

I created a repo to reproduce it. https://github.com/michaeloliverx/mdx-v2-nextjs-v12-bug

These are the steps I followed

1. Create a fresh next.js project with npx create-next-app@latest --typescript
2. Run npm add @mdx-js/loader@2.0.0-rc.1
3. Add the required config to next.config.js
4. Create an test.mdx file underneath /pages
5. Start the dev server
6. Navigate to /test
7. View error in console

Expected behaviour

Page should load.

Actual behaviour

Error appears in console:

info  - automatically enabled Fast Refresh for 1 custom loader
event - compiled successfully in 3.7s (172 modules)
wait  - compiling /...
event - compiled successfully in 400 ms (190 modules)
wait  - compiling /_error...
event - compiled successfully in 117 ms (191 modules)
wait  - compiling /test...
thread '<unnamed>' panicked at 'not yet implemented: proper error reporting for wrong `@jsxRuntime`', /Users/runner/.cargo/registry/src/github.com-1ecc6299db9ec823/swc_ecma_transforms_react-0.55.0/src/jsx/mod.rs:289:25
note: run with `RUST_BACKTRACE=1` environment variable to display a backtrace
thread '<unnamed>' panicked at 'not yet implemented: proper error reporting for wrong `@jsxRuntime`', /Users/runner/.cargo/registry/src/github.com-1ecc6299db9ec823/swc_ecma_transforms_react-0.55.0/src/jsx/mod.rs:289:25
error - ./pages/test.mdx
Error: failed to process not yet implemented: proper error reporting for wrong `@jsxRuntime`
(node:26740) [DEP_WEBPACK_MODULE_ISSUER] DeprecationWarning: Module.issuer: Use new ModuleGraph API
(Use `node --trace-deprecation ...` to show where the warning was created)

Error appears in browser:

I assume this is because of the new Rust compiler.

[michaeloliverx]

Confirming that this is now working in v12.0.2. Thanks everyone!

[ykzts]

This is a temporary fix until a fix is made to swc or MDX v2, but if you set the option jsx: true and empty all pragmas, MDX v2 will work with Next.js (with swc). Here is a sample configuration:

/** @type {import('next').NextConfig} */
module.exports = {
  // ...
  // Support loading `.md`, `.mdx`:
  webpack(config, options) {
    config.module.rules.push({
      test: /\.mdx?$/,
      use: [
        // The default `babel-loader` used by Next:
        options.defaultLoaders.babel,
        {
          loader: '@mdx-js/loader',
          /** @type {import('@mdx-js/loader').Options} */
          options: {
            jsx: true,
            jsxImportSource: '',
            jsxRuntime: '',
          },
        },
      ],
    });

    return config;
  },
  // ...

Another solution is to put babel.config.js in the root with module.exports = { presets: 'next/babel' } to disable swc and fallback to Babel.