React-snap: When building with CRA, we are seeing Localhost:45678 in the output

[wInevitable]

Hi @stereobooster,

We have a react app built with create-react-app. After setting up react-snap (https://github.com/stereobooster/react-snap#basic-usage-with-create-react-app) and running the build script (yarn run build), localhost:45678 is set as the origin URL in the output files. So, if we deploy the app, it will try to make calls to that URL instead of the window's origin. We receive an error message in the browser console like this:

Failed to execute 'postMessage' on 'DOMWindow': The target origin provided ('http://localhost:45678') does not match the recipient window's origin

According to the readme, no extra configuration is required when using CRA. Is there an environment variable or other value we can set to fix this behavior? Or do you know what might be causing this to happen?

Thanks for your help and please let me know if there is other information that would be helpful in debugging this matter.

[stereobooster]

I haven't seen this one before. I suppose this can be fixed by this feature https://github.com/stereobooster/react-snap/issues/157

[stereobooster]

You can create example application with reproducible error. Maybe your case does not need general solution (e.g. #157).

[ohwhen]

I see the same thing happening when building an CRA app on Jenkins. Locally it works fine.

[stereobooster]

@ohwhen @wInevitable can you provide reproducible example? If this env specific, like Jenkins, maybe it can be reproduced with Docker.

[stereobooster]

I do not have reproducible example, so can not fix it. Feel free to reopen with example

[Findiglay]

I'm experiencing the same problem using CRA.

[Findiglay]

Here's my reproducible steps: this seems to occur when including the Facebook SDK.

<script>
  window.fbAsyncInit = function() {
       FB.init({
          appId: "fb-app-id",
          cookie: true,
          xfbml: true,
          version: "v3.0"
        });

        FB.AppEvents.logPageView();
      };

      (function(d, s, id) {
        var js,
          fjs = d.getElementsByTagName(s)[0];
        if (d.getElementById(id)) {
          return;
        }
        js = d.createElement(s);
        js.id = id;
        js.src = "//connect.facebook.net/en_US/sdk.js";
        fjs.parentNode.insertBefore(js, fjs);
      })(document, "script", "facebook-jssdk");
</script>

If I remove the SDK and rebuild, the issue disappears. Note I have skipThirdPartyRequests set to true.

[Findiglay]

I managed to resolve this issue by wrapping the SDK code-snippet in:

if (navigator.userAgent !== 'ReactSnap') {...}

(as outlined in recipes)

Thanks for this amazing piece of software fyi!