load page error

[krmao]

hello:1 GET http://localhost:3000/hello 500 (Internal Server Error) index.js?20a9:314 Uncaught at Object.next-markdown (file:///Users/kr.mao/Workspace/codesdancing/.next/server/pages/[...nextmd].js:32:1) at webpack_require (file:///Users/kr.mao/Workspace/codesdancing/.next/server/webpack-runtime.js:33:42) at eval (webpack-internal:///./src/pages/[...nextmd].jsx:8:71) at Function.webpack_require.a (file:///Users/kr.mao/Workspace/codesdancing/.next/server/webpack-runtime.js:106:13) at eval (webpack-internal:///./src/pages/[...nextmd].jsx:1:21) at Object../src/pages/[...nextmd].jsx (file:///Users/kr.mao/Workspace/codesdancing/.next/server/pages/[...nextmd].js:22:1) at webpack_require (file:///Users/kr.mao/Workspace/codesdancing/.next/server/webpack-runtime.js:33:42) at webpack_exec (file:///Users/kr.mao/Workspace/codesdancing/.next/server/pages/[...nextmd].js:52:39) at (file:///Users/kr.mao/Workspace/codesdancing/.next/server/pages/[...nextmd].js:53:28) at Object. (file:///Users/kr.mao/Workspace/codesdancing/.next/server/pages/[...nextmd].js:56:3) getNodeError @ nodeStackFrames.js?aca3:40 eval @ index.js?20a9:313 setTimeout（异步） _callee$ @ index.js?20a9:301 tryCatch @ runtime.js?96cf:63 invoke @ runtime.js?96cf:294 eval @ runtime.js?96cf:119 asyncGeneratorStep @ index.js?20a9:28 _next @ index.js?20a9:46 Promise.then（异步） asyncGeneratorStep @ index.js?20a9:37 _next @ index.js?20a9:46 eval @ index.js?20a9:51 eval @ index.js?20a9:43 _initNext @ index.js?20a9:363 initNext @ index.js?20a9:366 eval @ next-dev.js?3346:38 ./node_modules/next/dist/client/next-dev.js @ main.js?ts=1646807645629:600 options.factory @ webpack.js?ts=1646807645629:685 webpack_require @ webpack.js?ts=1646807645629:37 webpack_exec @ main.js?ts=1646807645629:1399 （匿名） @ main.js?ts=1646807645629:1400 webpackJsonpCallback @ webpack.js?ts=1646807645629:1268 （匿名） @ main.js?ts=1646807645629:9

[frouo]

Hello @krmao, not sure why you encounter an error 500. Could you share your [...nextmd].js file?

I have just updated the README.md by adding a better (and up-to-date) "Get started" section. Is your initialization the same as described in the readme?

Thanks

[krmao]

Hello @frouo , my steps as same as the readme, also use the new config about 'pathToContent'，and use your demo git readmes, while run 'npm run dev', and url to the path, show 'not supprt xxx' error, I don't know why, may be the versions is different.

"react": "^17.0.2",
"react-dom": "^17.0.2",
"next": "^11.1.2",

The yesterday code is revert, But just as same as the demo, no edit, thank you for the response.

now I have change the new way use gray-matter and marker and run ok.

/* eslint-disable camelcase */
// noinspection ES6CheckImport,JSUnusedGlobalSymbols,JSUnresolvedVariable

import React from "react";
import Image from "next/image";
import emptyImage from "@public/empty.png";
import style from "../index.module.scss";
import BasicLayout from "@common/basic-layout";
import fs from "fs";
import path from "path";
import matter from "gray-matter";
import {marked} from "marked";

export async function getStaticPaths() {
    const paths = fs
        .readdirSync(path.join("src/blog/markdowns"))
        .map((filename) => ({params: {pathname: filename.replace(".md", "")}}));
    return {paths, fallback: false};
}

export async function getStaticProps({params: {pathname}}) {
    const markdownWithMeta = fs.readFileSync(path.join("src/blog/markdowns", pathname + ".md"), "utf-8");
    const {data, content} = matter(markdownWithMeta);
    return {
        props: {
            basic: {style: BasicLayout.styles.HEAD_WITH_SIDER},
            data,
            pathname,
            content
        }
    };
}

export default class Page extends React.Component {
    constructor(props) {
        super(props);
        this.state = {data: {}};
    }

    componentDidMount() {}

    render() {
        const {
            data: {title, date, cover_image},
            content
        } = this.props;
        return (
            <React.Fragment>
                <div className={style["container"]}>
                    <div
                        className={style["container-empty"]}
                        style={{display: this.state?.data === null ? "flex" : "none"}}>
                        <Image width={280} height={280} alt={""} src={emptyImage} />
                        <div className={style["empty-text"]}>功能上线中，敬请期待~</div>
                    </div>
                    <div
                        className={style["container-data"]}
                        style={{display: this.state?.data === null ? "none" : "flex"}}>
                        <div className={style.containerMD}>
                            <h1 className={style.mdTitle}>{title}</h1>
                            <div className={style.mdDate}>Posted on {date}</div>
                            {/* eslint-disable-next-line @next/next/no-img-element */}
                            <img className={style.mdImage} alt={""} src={cover_image} />
                            <div className={style.mdContent}>
                                <div dangerouslySetInnerHTML={{__html: marked.parse(content)}} />
                            </div>
                        </div>
                    </div>
                </div>
            </React.Fragment>
        );
    }
}