LoginSignup
1

More than 3 years have passed since last update.

MDXでJSX Componentが無視される

Posted at

問題

Next.jsにおけるpagesディレクトリにある.mdファイルからレンダリングする際に、mdファイル内に記載されたjsxのコンポーネントが無視されてしまう。

解決

import文の直下にコンポーネントを置くと無視されてしまう模様。
つまり


# Hello World!!!
import MyComponent './mycomponent';
<MyComponent />

# This is MDX!

と書くとMyComponentが無視されてしまう。

# Hello World!!!
import MyComponent './mycomponent';

<MyComponent />

# This is MDX!

こうすれば大丈夫。必ず一行以上空けること。
対した問題ではないが、うっかりやってしまいそう。

環境

念のため環境を記載しておく。

  • @mdx-js/loader": "1.5.3",
  • @next/mdx": "9.1.6"

next.config.js

const withMDX = require('@next/mdx')({
  extension: /\.mdx?$/
})
const withCSS = require('@zeit/next-css')
const withSourceMaps = require('@zeit/next-source-maps')

module.exports =
  withSourceMaps(
    withCSS(
      withMDX({
        pageExtensions: ['js', 'jsx', 'ts', 'tsx', 'md', 'mdx'],
        cssModules: true,
        cssLoaderOptions: {
          importLoaders: 1,
        },
        webpack: (config, { dev }) => {
          if (dev) {
            config.watchOptions = {
              poll: true
            }
          }
          config.resolve.extensions = [".js", ".jsx", ".ts", ".tsx", ".json", ".css", ".md", ".mdx"];
          return config
        }
      })
    )
  )

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
1