Gatsby: Button onClick not working in Gatsby build

[mkhaledche]

Hi;
I am planning to migrate my website from Wordpress to Gatsby. My plan is that I will use my existing Bluehost account to avoid any complications with transferring domains, especially that I will still use my Wordpress API for the back end. Accordingly, I will build my website locally using, then I will upload the "public" folder to my host folders.
Now the case is that I need to add a contact form, I am planning to use ajax call from the front end to a PHP file on my server to send the email.

The issue I am facing now is that when I add the onClick prop to the button, the event fires on the development phase. However when I run gatsby build and upload the HTML files on the server, no event is fired, I inspected the tag, it has no onclick event. This is my code on front end:

        <input type="text" id="fname" value="John" />
        <input type="email" id="mail" value="" />
        <input type="text" id="subject" value="" />
        <input type="text" id="content" value="" />
        <button
          onClick={() => {
            console.log("What's going on?")
            sendMail()
          }}
        >
          Send Email
        </button>

This is the mail ajax function. I tried to add it to the front end, and I also tried to add it as a script with the react Helmet component linking to an external file. In all cases, no event is fired when I upload the public folder on the host.

const sendMail = () => {
  console.log("function called from inside")
  var display = document.getElementById("firstname")
  var mail = document.getElementById("mail").value
  var name = document.getElementById("fname").value
  var content = document.getElementById("content").value

  var subject = document.getElementById("subject").value
  var xmlhttp = new XMLHttpRequest()
  xmlhttp.open("POST", "contact-form.php")
  xmlhttp.setRequestHeader("Content-Type", "application/x-www-form-urlencoded")
  xmlhttp.send(
    "fname=" +
      name +
      "&subject=" +
      subject +
      "&content=" +
      content +
      "&mail=" +
      mail
  )
  xmlhttp.onreadystatechange = function () {
    if (this.readyState === 4 && this.status === 200) {
      display.innerHTML = this.responseText
    } else {
      display.innerHTML = "Loading..."
    }
  }
}

Thanks for your support

[herecydev]

Can you put together a reproduction using the guidance here please: https://www.gatsbyjs.org/contributing/how-to-make-a-reproducible-test-case/

[mkhaledche]

It's ok. Here is the repository:
https://github.com/mkhaledche/bug-repro
Here is also a link of the public folder on a host:
http://tagaruby.online/gatsby/public/

The event will be triggered on localhost (will give an error but it will be triggered which means the function is called), but on the link to the "public" folder, it will not be triggered.

[muescha]

at first glimpse i see there is in console a bug:

GET http://tagaruby.online/page-data/index/page-data.json net::ERR_ABORTED 404 (Not Found)

but the page data is found here:

http://tagaruby.online/gatsby/public/page-data/index/page-data.json

did you build it with pathPrefix ( https://www.gatsbyjs.org/docs/path-prefix/ )?

[muescha]

in your example repo i miss the form ...

[muescha]

Tested:

• i build your site with gatsby build
• then i started with gatsby serve
• clicks are writing a log entry in the console
• to simulate your subdirectory i moved all from public to a new directory: public/more
• then i started with gatsby serve
• i see the same error about page-data.json and no click event is triggered if i open the site at http://localhost:9000/more/
• no log entry in the console when i click

[muescha]

following the steps in https://www.gatsbyjs.org/docs/path-prefix/

added:

module.exports = {
  pathPrefix: `/more`,
  siteMetadata: {

gatsby build --prefix-paths
gatsby serve --prefix-paths

opened browser at http://localhost:9000/more/
clicks making a log entry in console

[muescha]

in your case you need the following pathPrefix because your link on server is http://tagaruby.online/gatsby/public/

module.exports = {
  pathPrefix: `/gatsby/public`,
  siteMetadata: {

[muescha]

hint: here is a tutorial how to do form submissions back to the wordpress backend: https://www.youtube.com/watch?v=ZRQ94PMNEcg

[mkhaledche]

Thanks @muescha for your reply. I'll check the path prefix and the solution in the video which seems to be interesting.
However, in my case, I don't think I need the form tag as all the functionality I need is a button that collects some input values and sends them to the server through ajax requests. I have already tested it on a non-gatsby static file with no form tag and it worked well.

[mkhaledche]

It worked now. The issue was with pathPrefix. Thanks @muescha

[muescha]

Glad to hear that you solved the issue.

Thx for the feedback

Happy coding!