I'm trying to use this npm module to implement the possibility to subscribe to a Mailchimp newsletter via double opt-in.
In the example provided by the plugin author everything looks simple and easy and the example works, as far as I can tell. However, when I try it locally, in the simplest way, just as in the example, but with the correct URL, id and u parameters, it always gives me this error:
Loading failed for the with source “https://xxx.us17.list-manage.com/subscribe/post-json?u=e11e628c90e2d07b9bd406c69&id=9e0ccb1924&EMAIL=name%40domain.tld&c=__jp0”.
(Note: Of course I changed the email address and client name in the sub-domain in order to not make them public.)
All of this happens inside a React app I created with create-react-app
running locally. The default AJAX subscription form that Mailchimp offers also didn't work. It gave me the same error.
I have tried, searched for and looked up a myriad of likely and not so likely reasons for this error, but so far nothing worked and it seems I'm finally at my wit's end.
Since the app runs locally and with the default create-react-app
settings, is it possible that the above is some kind of SSL/TLS related error, a CORS problem or (notice the __jp0
at the end of the URL in the error message) some more or less obscure JSONP problem? If so, any clues as to what's going on or what I could be doing wrong?
I hope I explained myself transparently enough. Any help is greatly appreciated.
EDIT:
When I call the URL in the error message with a browser I'm getting this response: __jp0({"result":"success","msg":"Thank you for subscribing!"})
So the subscription actually works, and the response seems to be JSONP indeed. The question is, is this the actual error or just part of it.
EDIT: 2018-01-11:
Nobody even knows a potential answer to my question? Anybody? Am I just being as thick as a tar slushy here?
I still haven't solved this problem and I still have no clue why I'm getting a JSONP string back that casues an error in each browser when the npm packages I used should actually be able deal with this. As it was already established via a comment from a helpful user below, I am using the JSONP/action url form in an app created via create-react-app
. I've tried the following npm modules for adding simple forms to the app that give you feedback after sending your email addresss to mailchimp.
The actual subscription even works, but Firefox gives me the error: Loading failed for the <script> with source […]
and other browsers do the same. I've tried the follwoing npm modules:
react-mailchimp-subscribe-forme
react-mailchimp-subscribe
So far no dice with either one. Maybe my understanding is flawed here, but am I at least right with these assumptions:
Again, I'm grateful for any new clues as to what I'm doing wrong (and obviously I must be doing something wrong).
I know what's causing this now. The problem seems to be tracking.
I had switched off all Firefox plugins and all the plugins in other browsers I was trying to get this working in, so an adblocker wasn't the culprit, as I already had established prior to posting this issue. In Firefox it suddenly works when I set the Tracking options to "Never" or "Only in private windows" and try it in a private window.
The interesting part is, I should have been shown a message by the browser telling me that the request or response has been blocked, because of the tracking options. After switching off all plugins again and explicitly switching the tracking options from maximum privacy to moderate setting I got the error message, so I switched it off completely and then it suddenly worked.
At this point I know the tracking options where the culprit, but there seems to be a browser bug too.
I'll mark this as the solution for now, but I'm open for suggestion, if anybody knows more.