Initialize and use Swup in Meteor js

Question

I am trying to use swup in meteor js framework. I added the script tag that contains unpkg link for swup in main.html and initialized Swup in Meteor.startup function of main.js. But when i run the app, it is throwing "Cannot set property 'responseURL' of null" error.

in main.html:

<script src="unpkg.com/swup@latest/dist/swup.min.js"></script>  
<script>
    const swup = new Swup();
</script>

And added swup id to layout.html which is like the container in which all routing occurs.

I just recently started to work on Meteor, so i am a bit confused. I would be glad, if anyone could help me in initializing and setting up swup. Thanks in Advance.

Added and to main.html. And added swup id to layout.html which is like the container in which all routing occurs. If i run that, then i get the error i mentioned above. — Ram, Apr 27 '20 at 18:39
It's good practice to edit your original question to show the code - then it can be formatted for readability. — Mikkel, Apr 28 '20 at 01:02
I edited the question for you. Are you using React or Blaze? — Mikkel, Apr 28 '20 at 01:05
@Mikkel Thank You. I am relatively new to stackoverflow...:D I am using Blaze. — Ram, Apr 28 '20 at 18:33

score 1 · Accepted Answer · answered Apr 29 '20 at 12:03

Blaze strips any script tag including it's content to prevent XSS. Install swup via npm and import it in your Template to resolve this:

$ meteor npm install --save swup

and in your client/main.js you initialize swup:

import Swup from 'swup';
const swup = new Swup();

Initialize and use Swup in Meteor js

1 Answers1