I have project on Next.js with Tailwind CSS and I am using MDX for some of my pages. Inside MDX file there is this export line:
export default ({children}) => <div className='prose'>{children}</div>
This line shows this error: A module cannot have multiple default exports.ts(2528)
In addition, I am using footnotes like this:
Mübalağa ve ziyade[^ziyade]lik manası...
[^ziyade]: ziyade: fazla, çok
and this line shows this error:
No link definition found: '^ziyade'(link.no-such-reference)
Until today there were no error like these. I have been trying to find a solution for hours but I could not.
I have tried to change .eslintrc.json settings following these instructions: Fixing MDX linting errors in Next.js using eslint-plugin-mdx, but did not work.
I have updated all packages and Next.js but did not work.
I am using VS Code MDX extension for syntax highlighting and I believe these errors are related to this extension. I have tried to change its settings as described in their page but it did not work either.
package.json
"dependencies": {
"@mdx-js/loader": "^3.0.0",
"@mdx-js/react": "^3.0.0",
"@next/mdx": "^14.0.2",
"rehype-slug": "^6.0.0",
"remark-gfm": "^4.0.0",
},
next.config.mjs
import remarkGfm from 'remark-gfm'
import rehypeSlug from 'rehype-slug';
import nextMDX from '@next/mdx'
const withMDX = nextMDX({
extension: /\.mdx?$/,
options: {
remarkPlugins: [
remarkGfm, // GitHub Flavored Markdown
],
rehypePlugins: [
rehypeSlug, // add IDs to any h1-h6 tag that doesn't have one, using a slug made from its text
],
}
})
/** @type {import('next').NextConfig} */
const nextConfig = {
output: 'export',
trailingSlash: true,
pageExtensions: ['js', 'jsx', 'ts', 'tsx', 'md', 'mdx'],
tsconfig.json
"mdx": {
"plugins": ["remark-gfm"]
},
Is there a way to prevent these error? Thanks.
This error was caused by the version 1.5.0. I have removed that version and installed 1.4.0. Error disappeared.