shopify-webpack-themekit
shopify-webpack-themekit copied to clipboard
hayes0724
npm start: Uncaught SyntaxError: missing ) after argument list
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?
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!
Perfect! Are you going to include these changes into the main repo soon?
Thanks for this contribution, it helps so much.
@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.
@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.