Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

I keep getting a "Server Error -- SyntaxError: Unexpected token '.' " whenever I try visiting a dynamic route on my blog #36646

Closed
1 task done
kaf-lamed-beyt opened this issue May 3, 2022 · 2 comments
Closed
1 task done

I keep getting a "Server Error -- SyntaxError: Unexpected token '.' " whenever I try visiting a dynamic route on my blog #36646

kaf-lamed-beyt opened this issue May 3, 2022 · 2 comments
Labels
bug Issue was opened via the bug report template.

Comments

@kaf-lamed-beyt
Copy link

Verify canary release

  • I verified that the issue exists in Next.js canary release

Provide environment information

Operating System:
Platform: linux
Arch: x64
Version: #28-Ubuntu SMP Thu Apr 14 04:55:28 UTC 2022
Binaries:
Node: 12.22.9
npm: 8.5.1
Yarn: N/A
pnpm: N/A
Relevant packages:
next: 12.1.7-canary.0
react: 18.1.0
react-dom: 18.1.0

What browser are you using? (if relevant)

Version 101.0.4951.41 (Official Build) (64-bit)

How are you deploying your application? (if relevant)

No response

Describe the Bug

My blog is powered by Next.js and MDX

Everything works fine on the deployed version. But, when I try visiting a unique slug route locally, I get the error in the image below

image showing server error message

Expected Behavior

The slug route should render the unique blog post as expected

To Reproduce

// index page that renders all the blog posts

export default function Blog({ posts }) {
  return (
    <React.Fragment>
      <Head>
        <title>My blog</title>
      </Head>
      <Container>
        {posts.map((frontmatter) => {
          return <BlogCard key={frontmatter.slug} data={frontmatter} />;
        })}
      </Container>
    </React.Fragment>
  );
}

export async function getStaticProps() {
  let articles = await getAllArticles();

  const sortedArticles = articles.map((article) => article);

  sortedArticles.sort((a, b) => {
    return new Date(b.publishedAt) - new Date(a.publishedAt);
  });

  return {
    props: {
      posts: sortedArticles,
    },
  };
}
// the blog card component

const BlogCard = ({ data }) => {
  return (
    <>
      <Link href={`/${data.slug}`} passHref>
        <Card>
          <h1 className="title">{data.title}</h1>
          <p className="summary">{data.excerpt}</p>
          <p className="date">
            {dayjs(data.publishedAt).format("MMMM D, YYYY")} &mdash;{" "}
            {data.readingTime}
          </p>
        </Card>
      </Link>
    </>
  );
};

export default BlogCard;
@kaf-lamed-beyt kaf-lamed-beyt added the bug Issue was opened via the bug report template. label May 3, 2022
@kaf-lamed-beyt
Copy link
Author

This error is due to next-mdx-remote

Downgrading from the latest version to v3.0.8 fixed it.

@github-actions
Copy link
Contributor

github-actions bot commented Jun 3, 2022

This closed issue has been automatically locked because it had no new activity for a month. If you are running into a similar issue, please create a new issue with the steps to reproduce. Thank you.

@github-actions github-actions bot locked as resolved and limited conversation to collaborators Jun 3, 2022
Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Assignees
No one assigned
Labels
bug Issue was opened via the bug report template.
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests
1 participant
@kaf-lamed-beyt