Error

[thefubon]

typeerror:%20null%20is%20not%20an%20object%20(evaluating%20'document.body.querySelector('[data-swup="'+s+'"]').outerHTML=t.blocks[s]')

<main id="swup" class="main transition-fade" data-uk-height-viewport="expand: true">
	    {% block content %}{% endblock %}
  	</main>

<script src="https://unpkg.com/swup@latest/dist/swup.min.js"></script>
		<script src="/assets/js/swup/SwupScrollPlugin.min.js"></script>
		<script src="/assets/js/swup/SwupProgressPlugin.min.js"></script>
		<script>
			const options = {
				containers: ["#navbar", "#swup", "#content"],
				plugins: [
					new SwupScrollPlugin(
						{
							doScrollingRightAway: false,
							animateScroll: false,
							scrollFriction: 0.3,
							scrollAcceleration: 0.04,
						}
					),
					new SwupProgressPlugin(
						{
							className: 'swup-progress-bar',
							transition: 500,
							delay: 300
						}
					),
				],
				};
			const swup = new Swup(options);
		</script>

{% extends "index.twig" %}
{% set bodyClass = "page-blog" %}

{% block content %}
  <div id="content" class="uk-container uk-container-mini">
    {{ sprig('/blog/_sprig/lists', {
      limit: 3,
      section: 'blog'
    }) }}
  </div>
	

  <!-- This is the modal -->
  <div id="my-modal" class="uk-flex-top uk-modal-container" uk-modal>
    <div class="uk-modal-dialog uk-margin-auto-vertical uk-border-rounded">
			<div class="uk-position-relative">
		      <div class="modal-content">
		      </div>
	      <div class="modal-spinner uk-position-center">
	        <div uk-spinner></div>
	      </div>
	    </div>
		</div>
  </div>
{% endblock %}

{% js %}
  const modalContent = document.querySelector('#my-modal .modal-content');
	const modalSpinner = document.querySelector('#my-modal .modal-spinner');
	const currentTitle = document.title;
	let currentUrl = ''; // variable to store current url

	/**
	 * before send hx-get
	 *    empty modal content and show the spinner
	 *    then show the modal
	 */
	document.addEventListener('htmx:beforeSend', function(event) {
		modalContent.innerHTML = '';
		modalSpinner.classList.remove('uk-hidden');
		currentUrl = window.location.href; // save the current url before a modal is open

		if (event.target.hasAttribute('data-has-modal')) {
			UIkit.modal('#my-modal').show()
				.then(() => {
					const slug = event.target.getAttribute('hx-get');
					console.log('modal shown : ', slug);

					// updating url on modal opened is handled by hx-push-url in lists.twig
				});
		}
	});

	/**
	 * hide the spinner before the content is swapped into modal
	 */
	document.addEventListener('htmx:beforeSwap', function() {
		modalSpinner.classList.add('uk-hidden');
	});

	/**
	 * on close modal
	 *    reset to original document title
	 *    restore previous url by replacing history state
	 * @see https://www.30secondsofcode.org/blog/s/javascript-modify-url-without-reload
	 */
	UIkit.util.on('#my-modal', 'hidden', function () {
		document.title = currentTitle;

		const state = { additionalInformation: 'Updated the URL with JS' };
		// This will replace the current entry in the browser's history, without reloading
		window.history.replaceState(state, currentTitle, currentUrl);
	});
{% endjs %}

[daun]

Make sure all the containers actually exist (looks like #navbar is missing).