React anchor with href renders locally but not in build

JavaScript
1

I just finished the front-end calculator project and was pretty happy so I decided to go back and try to fix up my quote machine project. It passed the tests but the tweet icon would not render on Netlify.

I spent all of yesterday trying different things to no avail.

Here’s the issue:

<a
          id="tweet-quote"
          href={"https://twitter.com/intent/tweet?text=" + state.quote[0]}
        >
          tweet
        </a>

Will render on localhost:3000. You can click it and it will work as intended. If I deploy on Netlify it won’t render. The element is there but it is invisible - hence you can pass the tests. If I npm run build and host locally with serve -s build the element also does not render.

Incidentally I can get it to work in a build version using a button with:

const handleClick = () => {
    window.location.href =
      "https://twitter.com/intent/tweet?text=" +
      state.quote +
      "  -  " +
      state.author;
  };

You can recreate this by running create react app. Add a href with "https://twitter.com/intent/tweet" and it will render in build and locally.

Change the href to "https://twitter.com/intent/tweet?text=" and it will render locally but not in the build version.

Any ideas?

2

Couldn’t reproduce. Works fine both in dev and prod.
EDIT: https://damp-eyrie-97302.herokuapp.com/

1 Like
3

4 words: Oh my god, Adblock. I’ve literally spent probably 5 or 6 hours yesterday trying to ‘fix’ this issue and it turns out Adblock was blocking social media icons. Obviously I disabled it on localhost or it ignores it by default.

@jenovs thanks for the confirmation that it was working. The price of privacy is eternal something or other.

1 Like
4

This topic was automatically closed 182 days after the last reply. New replies are no longer allowed.