Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

npm start: Uncaught SyntaxError: missing ) after argument list #11

Open
josechirivella opened this issue Oct 26, 2020 · 4 comments
Open

Comments

@josechirivella
Copy link

josechirivella commented Oct 26, 2020

Hello! Great contribution btw.

But, I'm encountering an error when running npm run start . When the browser opens, input my store password, this shows up.

"); } else { win._boomrl = function() { bootstrap(); }; if (win.addEventListener) { win.addEventListener("load", win._boomrl, false); } else if (win.attachEvent) { win.attachEvent("onload", win._boomrl); } } doc.close(); } var link = document.createElement("link"); if (link.relList && typeof link.relList.supports === "function" && link.relList.supports("preload") && ("as" in link)) { window.BOOMR.snippetMethod = "p"; link.href = window.BOOMR.url; link.rel = "preload"; link.as = "script"; link.addEventListener("load", promote); link.addEventListener("error", function() { iframeLoader(true); }); setTimeout(function() { if (!promoted) { iframeLoader(true); } }, LOADER_TIMEOUT); BOOMR_lstart = new Date().getTime(); parentNode.appendChild(link); } else { iframeLoader(false); } function boomerangSaveLoadTime(e) { window.BOOMR_onload = (e && e.timeStamp) || new Date().getTime(); } if (window.addEventListener) { window.addEventListener("load", boomerangSaveLoadTime, false); } else if (window.attachEvent) { window.attachEvent("onload", boomerangSaveLoadTime); } if (document.addEventListener) { document.addEventListener("onBoomerangLoaded", function(e) { e.detail.BOOMR.init({ producer_url: "https://monorail-edge.shopifysvc.com/v1/produce", ResourceTiming: { enabled: true, trackedResourceTypes: ["script", "img", "css"] }, }); e.detail.BOOMR.t_end = new Date().getTime(); }); } else if (document.attachEvent) { document.attachEvent("onpropertychange", function(e) { if (!e) e=event; if (e.propertyName === "onBoomerangLoaded") { e.detail.BOOMR.init({ producer_url: "https://monorail-edge.shopifysvc.com/v1/produce", ResourceTiming: { enabled: true, trackedResourceTypes: ["script", "img", "css"] }, }); e.detail.BOOMR.t_end = new Date().getTime(); } }); } })(); window.ShopifyAnalytics.lib.page( null, {"pageType":"home"} ); var match = window.location.pathname.match(/checkouts\/(.+)\/(thank_you|post_purchase)/) var token = match? match[1]: undefined; if (!hasLoggedConversion(token)) { setCookieIfConversion(token); } }); var eventsListenerScript = document.createElement('script'); eventsListenerScript.async = true; eventsListenerScript.src = "//cdn.shopify.com/s/assets/shop_events_listener-d81deda6557a113fbcc6a993184828adcef6f241e4ca52b6a21169cb03169317.js"; document.getElementsByTagName('head')[0].appendChild(eventsListenerScript); })();

In the Chrome Dev Tools, I'm getting Uncaught SyntaxError: missing ) after argument list which makes sense but can't find where the issue lives.

Any idea?

@lizsterine
Copy link

That's an issue with Browser Sync and Shopify's header scripts. Shopify scripts insert a document.write() line that has a <body> tag in the string value. Browser Sync sees that <body> tag and tries to put its scripts onto that - this is that print out of Javascript you are seeing.

What I've done to overcome this is have a twig variable that holds the environment, 'dev' or 'prod' depending on the build environment. I have this living in my 'style-tags.liquid' snippet:

<% if (htmlWebpackPlugin.options.isDevServer === true) { %>
{% assign env = 'dev' %}
<% } else { %>
{% assign env = 'prod' %}
<% } %>

Then in my 'theme.liquid' file I make a small change where Shopify's header scripts are included if in dev mode so Browser Sync doesn't find the <body> tag in these scripts:

  {% if env != 'dev' or content_for_header contains 'designMode' %}
    {{ content_for_header }}
  {% else %}
    {{ content_for_header | replace: "<body onload='document._boomrl();'>", "<bodx onload='document._boomrl();'>" }}
  {% endif %}

Make sure this happens AFTER the inclusion of your style tags snippet or wherever you set the environment variable.

So far, I haven't found changing Shopify's scripts like this impacts features as I'm developing, and when building a deploying a production build, everything functions as expected.

Hope that helps!

@josechirivella
Copy link
Author

Perfect! Are you going to include these changes into the main repo soon?

Thanks for this contribution, it helps so much.

@josechirivella
Copy link
Author

@lizsterine and @hayes0724 . I'm noticing that browser sync is not working, and when I say is not working I mean the force-reload is not triggering. Any ideas?

The code is pretty much up to date from the lib folder standpoint.

@lizsterine
Copy link

@JoseChirivella14 Unfortunately, I'm not going to be of much help on this one.

I've had the same issue on occasion in some other projects with different build environments (not webpack, different node version, etc). I haven't had the time to been able to debug why that was occurring either - just been manually refreshing those projects for now.

Because I've experienced it with other build setups, I'm going to suggest it might not be an issue with this particular setup and browser sync itself....? Hopefully that might give you a starting point on how to track down the issue (if it is the same thing).

Would love to hear if you find an answer.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

2 participants