Develop Reference

Gatsby site, Script not available on first page request with Helmet

I have a Gatsby site that I'm trying to add a third-party js widget to but for some strange reason it will only load if I refresh the page manually. On first page load, it as is if it doesn't exist at all, no errors in dev-tools, nothing... but if I refresh the page, it then appears. It's almost as if it's lazy loading? Is there a way to force load?
I've checked the elements, console, and network tabs in dev tools but there's nothing to indicate any errors. elements shows the tags that I would expect, console shows nothing at all, and network everything shows up with 200.
Could this be an issue with Gatsby and/or Helmet, it might be but I don't think it's an issue with the widget itself (it's third-party, I have no control over it, see last paragraph)?
<Helmet
script={[
{
type: 'text/javascript',
src: '//widget-url.com/path/to/jsfile.min.js',
},
{
type: 'text/javascript',
innerHTML: `
(function() {
var widget = Stuff.happens.here();
widget.Initialise();
})();
`,
},
]}
/>
In the body I then have:
<div id='widget-id'></div>
Things I've tried to attempt to understand where the issue is:
As I mentioned, I have to force refresh the page where the widget is located. If I force refresh any other page, it doesn't help. So something I tried is: rather than only including the JS into the head of the page in question, I would including it on ALL pages. But this has made no difference.
I've also tried adding the widget to a simple stand-alone html file, the widget loads without problem. Which leads me to think that it's probably not a widget issue?
I don't know where to go from here :(

The problem is that you are pointing a DOM element that may or may not be rendered at the moment your request the script.
In your case, I'd try:
<Helmet>
<script async defer src="//widget-url.com/path/to/jsfile.min.js" />
<script async defer>
{`
(function() {
var widget = Stuff.happens.here();
widget.Initialise();
})();
`}
</script>
</Helmet>
Or using one of the multiple Server-Side Rendering APIs. onRenderBody should work:
// gatsby-ssr.js
import React from "react"
export const onRenderBody = ({ setHeadComponents, setPostBodyComponents }) => {
setHeadComponents([
<script
src="//widget-url.com/path/to/jsfile.min.js"
type="text/javascript"
async
/>,
<script
dangerouslySetInnerHTML={{
__html: `
(function() {
var widget = Stuff.happens.here();
widget.Initialise();
})();
`,
}}
/>,
])
}

How to use mailerlite popups in a Next.js application

I'm integrating a mailerlite popup for a client's next.js project, and I'm having a difficult time converting the JavaScript snippets into the jsx required to make the popups function properly. On first load it seems to work just fine, but on relaod I'm getting the following error.
window is not defined
I've encountered the issue while dealing with DOM manipulation, but in this case, judging from the code in the snippet, I need the window object.
Install the following snippet of Javascript on every page of your website right before the closing tag.You only need to add this snippet once, even if you plan to have a few different webforms.
<!-- MailerLite Universal -->
<script>
(function(m,a,i,l,e,r){ m['MailerLiteObject']=e;function f(){
var c={ a:arguments,q:[]};var r=this.push(c);return "number"!=typeof r?r:f.bind(c.q);}
f.q=f.q||[];m[e]=m[e]||f.bind(f.q);m[e].q=m[e].q||f.q;r=a.createElement(i);
var _=a.getElementsByTagName(i)[0];r.async=1;r.src=l+'?v'+(~~(new Date().getTime()/1000000));
_.parentNode.insertBefore(r,_);})(window, document, 'script', 'https://static.mailerlite.com/js/universal.js', 'ml');
var ml_account = ml('accounts', '912433', 'd5p1f7l9g0', 'load');
</script>
<!-- End MailerLite Universal -->
I've placed this code in my Layout wrapper. As previously stated, it works fine on first load, but as soon as the user navigates to a new page above error shows up.
PS I found an old question regarding this topic here, but it's old and not quite relevant to my situation. I need to figure out how to convert the above snippet for nextjs. Any help at all would be appreciated.

This approach treats the MailerLite universal tag as its own <script> hosted on your site's domain.
Add a NextJS custom document.
Create a JavaScript file containing the MailerLite universal tag code in ./public. I put mine in ./public/scripts/ml.js.
Add a <script> tag loading #2 in your custom _document.js file:
import Document, { Html, Head, Main, NextScript } from 'next/document'
class MyDocument extends Document {
static async getInitialProps(ctx) {
const initialProps = await Document.getInitialProps(ctx)
return { ...initialProps }
}
render() {
return (
<Html>
<Head>
<script async src="/scripts/ml.js"></script>
</Head>
<body>
<Main />
<NextScript />
</body>
</Html>
)
}
}
export default MyDocument
Everything worked as intended from there! (Caveat: I'm only using embedded forms).

Multiple Vue instances bind to parent & child elements

I would like to ask for best setup of Vue instances (components), when I do not want use SPA.
My HTML looks like:
<html>
<div id="layout">
<div>Some Layout based content...</div>
<div id="homepage">
<simple-form-component></simple-form-component>
</div>
</div>
<script type=text/javascript src="homepage.js"></script>
<script type=text/javascript src="layout.js"></script>
</html>
Currently I have simple example ot two .js files:
layout.js
homepage.js
// layout.js
import Vue from 'vue/dist/vue.js'
new Vue({
el: '#layout',
});
// homepage.js
import Vue from 'vue/dist/vue.js';
import SimpleForm from '../../../../components/SimpleForm.vue';
new Vue({
el: '#homepage',
components: {
SimpleForm,
},
});
It seems to work fine, but I am suspicious that this is not 100% correct, due to console error:
[Vue warn]: Unknown custom element: - did you register
the component correctly? For recursive components, make sure to
provide the "name" option.
(found in )
Do you have any ideas/experience how to setup my scenario correctly?
PS: I would like to have my JS split into different files, managed by webpack and distributed by backend.
Thank you,
Mario

I've found workaround v-pre, my HTML will change the line: <div id="homepage" v-pre>. One small issue is, that I will not see my components in Vue Devtools.

Loading JSX file from content server asp.net

I am facing a issue when I am trying to get my JSX file by a content server. The application has a view Test.cshtml and in this calls a jsx file to render the react portion of the UI to the 'content' div.
When I run it locally in the project using the file structure from the solution it works fine.
<div id="content">
#*react renders here*#
</div>`
#section Scripts{
<script src="_linktoReact_/react-0.14.0.js"></script>
<script src="_linktoReact_/react-dom-0.14.0.js"></script>
<script src="~/Scripts/JSX/test.jsx">
</script>
}
But when I try to run from content server to host the files in a central location (which in this case is localhost:8111) it does not work. The file loads into the browser, but the jsx doesnt execute. This will give me an error of "Uncaught SyntaxError: Unexpected token <" which points to the first line of HTML in the jsx file.
<div id="content">
#*react renders here*#
</div>`
#section Scripts{
<script src="_linktoReact_/react-0.14.0.js"></script>
<script src="_linktoReact_/react-dom-0.14.0.js"></script>
<script src="http://localhost:8111/Scripts/JSX/test.jsx">
</script>
}
So I tried adding the type tag to reference jsx, like below. This removed the "uncaught syntax error" but then doesn't give any errors but also doesn't render the react.
<div id="content">
#*react renders here*#
</div>`
#section Scripts{
<script src="_linktoReact_/react-0.14.0.js"></script>
<script src="_linktoReact_/react-dom-0.14.0.js"></script>
<script type="text/jsx" src="http://localhost:8111/Scripts/JSX/test.jsx">
</script>
}
I tried to find the problem a few different ways and have tinkered with solutions around scoping, CORS, maybe even an issue with routing on the server, but not sure what fixes it.
Attempts to fix:
One suggestion was to use window instead of var like
var TestDataTile = React.createClass({
replace with
window.TestDataTile = React.createClass({
But that to is not working. I am using react-0.14.0.js, react-dom-0.14.0.js
Tried to recompile into js file, which rendered as expected in the solution, but still some issues with some of the code in the test.js file in regard to some api calls.
What could be causing the jsx disconnect?
Can anyone guide me towards correct direction?

VueJS components

I want to make use of VueJS components to clean up my scripts. Therefore I have a component for each page I am loading in into Laravel. Everything works fine so far. But I have issues transfering my current script logic to a component.
This is the current script setup importing the to be used components:
main.js
import HomeView from './components/HomeView.vue';
import IncidentView from './components/IncidentView.vue';
window.app = new Vue({
el: '.content',
components: {
HomeView, IncidentView
},
methods: {
// Init GIS
init: function() {
// Initialize GIS Map
initGISMap(this.$els.map);
},
}
(...)
}
Key for me is the window.app = new Vue... part. I make use of google maps and therefore when the page is loaded it searches for an app.init method. This is part of the script I am loading within the blade template:
<!DOCTYPE html>
<html>
<body class="hold-transition skin-blue sidebar-mini">
<section class="content-header">
<h1>
#yield('page_title')
<small>#yield('page_description')</small>
</h1>
</section>
<!-- Main content -->
<section class="content">
#if (isset($vueView))
<component is="{{ $vueView }}">
#endif
#yield('content')
</component>
</section>
<!-- /.content -->
<script src="https://maps.googleapis.com/maps/api/js?key=KEY&libraries=places&callback=app.init" async defer></script>
</body>
</html>
The individual pages (where I create for each a module in Vue) look like this:
#extends('app', ['vueView' => 'home-view'])
#section('page_title', 'title')
#section('page_description', 'title')
#section('content')
content
#endsection
By defining the vueView variable, the correct module I am importing in my script is used.
The goal is to use HomeView component as the main google maps view. And the other components for different pages I load when clicking the corresponding link in my theme. At the end, I do not want to have all VueJS code in one script. Therefore the models.
When I transfer all the content of this current JS file, I get an error complaining that app.init is not a function. The component looks like this:
<script>
export default {
data: {
// SEARCH
addressComponents: '',
autocompletePlace: '',
autocompleteAddress: '',
(...)
}
How do I modify my component in a way, that the app.init load would still work?

Someone has already mentioned GuillaumeLeclerc/vue-google-maps which is available on npm as vue-google-maps, but be warned that that version only works with vue 1.x
If you are using v2, look at this great vue2 fork xkjyeah/vue-google-maps - it's available as vue2-google-maps on npm.
The API is straightforward and doesn't diverge far from the v1 version, and the repository is much more active than its upsteam counterpart.
It really made my vue map work a lot more painless than rolling my own, which is what I was initially doing.
I hope that helps

Maybe you should use, or at least study the code, of a package that does that.
For example, you can check vue-google-maps on Github : https://github.com/GuillaumeLeclerc/vue-google-maps/
It defines a whole lot of Components related to Google Maps.

If I understand you right, you have a Google Maps script which, when loaded, calls window.app.init, right?
Does your Vue component have an init() method (none is shown above)? If there was one, it would need to be at app.methods.init() remember for VueJS, standard callable methods live under methods key.
Alternatively: you don't mention if your app.init is part of the Vue component or not. If its not it would appear that your app.init function is being overridden because you are redefining window.app as your vue component.
Lastly, if your init is part of Vue, is your google maps fn callback calling this init() before the Vue is loaded and therefore no such method exists (yet)?