問題
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
}
})
)
)