Broken/Not working links

Developing with Prismic
1

Hello,

I'm open this topic because I'm figuring a problem with our website, where links to some pages are "borken", I mean when I hover them I correctly see the path of the ("a href="...) but nothing happens when I click.

It's a bit weird and I discovered it a few days ago (it was working before the last week).

I also don't know why but it happens on links to subpages like: https://polyphoniamusic.com/blog & https://polyphoniamusic.com/artists

So if you go on the website, every links from the menu/footer are working, but when you try to click on a link which is on the blog page of the artists page, nothing happens.

Do you know what can cause this?
Also, I saw this same error on another website which uses Prismic, also on the blog page.
Also 2, the bug isn't present on phone.

Thank you so much for your help,

Andy

2

Hi Andy,

Welcome to the community!

I can see the behaviour you described above. If the link appears on hover, but it doesn't allow you to click through, then the issue is in the code of your website project. The website code is not handled within Prismic, so you'll need to contact your web developer so they can fix the code of this Next.js project.

If they can share the code for these links we'll be happy to help :slight_smile:

Thanks.

3

Thank you for you reply! :slight_smile:
I'm a the developper (beginner aha) and for example, here is the code of the Blog slice:

import { Content } from "@prismicio/client";
import { PrismicNextImage, PrismicNextLink } from "@prismicio/next";
import { PrismicRichText, SliceComponentProps } from "@prismicio/react";
import { format } from 'date-fns';

/**
 * Props for `BlogSection`.
 */
export type BlogSectionProps = SliceComponentProps<Content.BlogSectionSlice>;

/**
 * Component for "BlogSection" Slices.
 */
const BlogSection = ({ slice }: BlogSectionProps): JSX.Element => {

  const currentDate = new Date(); // Récupérez la date actuelle

  // Triez les articles par date, en séparant les futurs des passés
  const sortedArticles = slice.items.sort((a, b) => {
    const dateA: string = a.date as string; // Convertir date en string
    const dateB: string = b.date as string; // Convertir date en string

    const dateAObj = new Date(dateA);
    const dateBObj = new Date(dateB);

    if (dateAObj > dateBObj) return -1;
    if (dateAObj < dateBObj) return 1;
    return 0;
  });

  return (
    <section className="blog" id="blog" data-slice-type={slice.slice_type} data-slice-variation={slice.variation}>
      <div className="blog-container">
        <PrismicRichText field={slice.primary.heading} components={{
          paragraph: ({ children }) => (
            <h1 className="blog-heading">{children}</h1>
          )
        }} />
        <div className="blog-grid-container">
          {sortedArticles.map((article) => {
            if (article.date) {
              const date: string = article.date;
              const articleDate = new Date(date);
              const isPastArticle = currentDate > articleDate;
              const formattedDate = format(articleDate, "EEE, d MMM. yyyy");

              return (
                <>
                  <PrismicNextLink className={`blog-grid-block ${isPastArticle ? "past-article" : "upcoming-article"}`} field={article.link}>
                    <div className="blog-grid-block-column">
                      <div>
                        <p className="blog-title">{article.title}</p>
                        <p className="blog-date">{formattedDate}</p>
                      </div>
                      <p className="blog-button"><span>Read More</span><img className="blog-button-arrow" src="/assets/images/icons/arrow-icon-white.svg"/></p>
                    </div>
                    <PrismicNextImage className="blog-image" field={article.image}/>
                  </PrismicNextLink>
                </>
              );
            }
            return null; // Gestion des dates nulles
          })}
        </div>
      </div>
    </section>
  );
};

export default BlogSection;

But the thing is that it works in local, but this bug appears when the site is deployed, both on Vercel & Netlify.

Thank you for your help,
I can share with you the repo in private if you want ;)

5

So this error keeps happening when I try to inspect the page. Are you seeing this too?

Screenshot 2023-11-07 at 15.44.46
Screenshot 2023-11-07 at 15.44.462334Ă—502 106 KB

My guess from what I could see is that this is a CSS issue where your cursor isn't clicking the anchor link. Because the link is rendered correctly in the anchor tag, so all the Prismic stuff is working correctly.

I think the blog-grid-container class might be blocking this, but since it's a CSS issue, I can't really help you any further.

Let me know if you have any further Prismic questions and I'll be happy to help.

Star Wars gif. Harrison Ford as Han Solo gives us a little salute as he wishes us: Text, "Good luck."

6

Hey, thank you for telling me that I could be a CSS problem!

I understandood that the problem started to appear after I added a "useMatchMedia" function in my header and apparently this was causing the problem. b
Because, the pages Blog & Artists worked fine on mobile but when I tried on my computer when I clicked on the links nothing appeared until a changed the viewport size to under 1050px, as my "useMatchMedia" function aha!! This is now solved :smiley:

This function maybe don't work fine with NextJS SSR sites (for those who got the same problem).

Thank you for helping me!! :slight_smile:

1 Like