Menu
I have updated my project from Next.js 10 to 12. Among all the changes, one of my sections stops working, particularly, the one that generates pages from a markdown file. I keep getting the error:
TypeError: (0 , marked__WEBPACK_IMPORTED_MODULE_7__.default) is not a function
My Next.js Javascript template is:
/** @format */
import fs from 'fs';
import path from 'path';
import matter from 'gray-matter';
import Head from 'next/head';
import marked from 'marked';
import { defaultLocale } from '../../i18n.json';
import useTranslation from 'next-translate/useTranslation';
import Header from '../../components/ui/Header/Header';
import Footer from '../../components/ui/Footer/Footer';
import Main from '../../components/ui/Main/Main';
const postsDirectory = path.join(process.cwd(), '__docs');
export default function Doc({ htmlString, data }) {
let { t } = useTranslation();
return (
<>
<Head>
<title>
{data.title} – {t('common:version', { version: data.version })}
</title>
<link rel='icon' href='/favicon.png' />
</Head>
<Header background='1' elevation='4' />
<Main css='padding--16 display--grid'>
<h1>{data.title}</h1>
<div
dangerouslySetInnerHTML={{ __html: htmlString }}
className='color--gray line-height--24'
/>
<hr />
<p className='color--gray line-height--24'>
{t('common:version', { version: data.version })}. Last update:{' '}
{data.date}
</p>
</Main>
<Footer />
</>
);
}
export const getStaticPaths = async ({ locales }) => {
let paths = [];
const docs = fs.readdirSync('__docs');
console.log(docs);
for (let slug of docs) {
for (let locale of locales) {
let fullpath = path.join(
postsDirectory,
slug,
locale === defaultLocale ? 'index.md' : `index.${locale}.md`
);
if (!fs.existsSync(fullpath)) {
continue;
}
paths.push({ params: { slug }, locale });
}
}
return {
paths,
fallback: false,
};
};
export const getStaticProps = async ({ params: { slug }, locale }) => {
// we need to find and read the file
const filename = locale === defaultLocale ? 'index.md' : `index.${locale}.md`;
const markdownWithMetadata = fs
.readFileSync(path.join(postsDirectory, slug + '/' + filename))
.toString();
// we parse the content to strip the metadata
const parsedMarkdown = matter(markdownWithMetadata);
// we parse the content to convert it to html with marked
const htmlString = marked(parsedMarkdown.content);
return {
props: {
htmlString,
data: parsedMarkdown.data,
},
};
};
My current package.json is this one:
{
"name": "Minide",
"version": "0.1.0",
"private": true,
"scripts": {
"dev": "next dev",
"build": "next build",
"start": "next start",
"lint": "next lint"
},
"dependencies": {
"gray-matter": "^4.0.3",
"marked": "^4.0.5",
"mdx": "^0.3.1",
"next": "12.0.4",
"next-translate": "^1.2.0",
"path": "^0.12.7",
"react": "17.0.2",
"react-dom": "17.0.2",
"react-number-format": "^4.8.0",
"remark": "^14.0.2",
"remark-html": "^15.0.0"
},
"devDependencies": {
"eslint": "7",
"eslint-config-next": "^12.0.4"
}
}
I have updated React, and I also tried to import React on the page, but it didn't work at all. Next.js imports react by default but in another component, I had to force import, and when I use import React from 'react' on the template i go from MODULE_7 to MODULE_8.
TypeError: (0 , marked__WEBPACK_IMPORTED_MODULE_8__.default) is not a function
576
asked Aug 31 '26 01:08
I had the same problem. You imported marked wrong. As it says on the remark documentation, you should do this instead import { marked } from 'marked';
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With