Error: Container #swup not found on page #646

daphnevisuals · 2023-04-19T10:01:43Z

daphnevisuals
Apr 19, 2023

Description of the issue

Hi !

here is my html (i am using posthtml, so i have an index.html page and a base-layout.html. Here is my index.html, where i want the background-image (in a div) to fade.

<div id="swup" class="background-image transition-fade"></div>
  <div class="content">
    <main>
      <!-- contenu du block -->
      <block name="content-homepage">
        <div class="menu">
          <a href="">click me !</a>
          <p>CONTENU</p>
        </div>
      </block>
    </main>
  </div>

here is my base-layout page with my nav :

 <body>
    <!-- spécifier le contenu du header ici car il se répète -->
    <header>
      <block name="header">
        <nav>
          <ul>
            <li><a id="mylink" href="./index.html">Accueil</a></li>
            <li><a href="./about.html">À propos</a></li>
            <li><a href="./photography-page.html">Photographie</a></li>
            <li><a href="./webdesign-page.html">Webdesign</a></li>
          </ul>
        </nav>
      </block>
    </header>
    <!-- spécifier tous nos blocks différents qui correspondent aux pages -->
    <block name="content-home"></block>
    <block name="content-about"></block>
    <block name="content-photography"></block>
    <block name="content-webdesign"></block>
    <!-- spécifier le contenu du footer ici car il se répète -->
    <footer>
      <block name="footer">© Daphné Visuals</block>
    </footer>
    <script src="js/main.js" type="module"></script>
    <script src="https://unpkg.com/swup@3"></script>
  </body>

here is my css :

.transition-fade {
  transition: 1s;
  opacity: 1;
}

html.is-animating .transition-fade {
  opacity: 0;
}

html.leaving .transition-fade {
  opacity: 0;
}

html.rendering .transition-fade {
  opacity: 1;
}

my js :

import Swup from "swup";

const swup = new Swup({
  containers: ["#swup"],
});

Console shows this error when i navigate from index to another page.

[swup] Container #swup not found on page.
(anonymous) @ about.18dbc454.js:696
g @ about.18dbc454.js:695
enable @ about.18dbc454.js:971
O @ about.18dbc454.js:968
1SICI.@parcel/transformer-js/src/esmodule-helpers.js @ about.18dbc454.js:538
newRequire @ about.18dbc454.js:71
(anonymous) @ about.18dbc454.js:122
(anonymous) @ about.18dbc454.js:145

The animation won't apply on the background image and I tried to search why but I don't really understand.
Thanks in advance ! :)

daun · 2023-04-19T10:10:11Z

daun
Apr 19, 2023
Maintainer

To make things easier for people to help, I'd suggest creating a test case where people can see the problem or site in action. Currently, it's not very clear what part does what. People unfamiliar with posthtml don't know what <block> is, for example. Feel free to use and fork this CodeSandbox template: codesandbox.io/s/swup-test-case-template-6ci5si

3 replies

daphnevisuals Apr 19, 2023
Author

So i tried to reproduce (with c/c changing the img aswell in the css) what i did in vscode but the extend of base-layout.html doesn't work on the codesandbox.
https://codesandbox.io/s/portfolio-test-swup-posthml-c7v8zd?file=/index.html

daphnevisuals Apr 19, 2023
Author

sorry, c/c means cmd c cmd v. I copied my code from vs to codesandbox :p

daun Apr 19, 2023
Maintainer

Try a version without posthtml required. The idea isn't to have the same code somewhere else — it's to have a minimal version without external dependencies (except swup) so people can make sense of it without all the context.

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

swup

Error: Container #swup not found on page #646

{{title}}

Replies: 1 comment 3 replies

{{title}}

{{title}}

{{title}}

{{title}}

Select a reply

swup

Error: Container #swup not found on page #646

daphnevisuals Apr 19, 2023

Replies: 1 comment · 3 replies

daun Apr 19, 2023 Maintainer

daphnevisuals Apr 19, 2023 Author

daphnevisuals Apr 19, 2023 Author

daun Apr 19, 2023 Maintainer

daphnevisuals
Apr 19, 2023

Replies: 1 comment 3 replies

daun
Apr 19, 2023
Maintainer

daphnevisuals Apr 19, 2023
Author

daphnevisuals Apr 19, 2023
Author

daun Apr 19, 2023
Maintainer