[Bug?] Uncaught (in promise) TypeError: error loading dynamically imported module...

xmgz commented 1 week ago

I bring this here in case anyone is having the same issue in their server

Describe the bug A clear and concise description of what the bug is.

phanpy installed in my own server (nginx)

assets/icons do not load, but are accesible by browser when clicking on the link

example: domain.tld/assets/icons/filter-line-1KEfnWDm.js (up to 90 resources)

https://domain.tld/assets/icons/rocket-line-rZbVYYCZ.js

with the same Uncaught (in promise) TypeError: error loading dynamically imported module: warning/error

Additional context Add any other context about the problem here.

I have turned off any adblocker, privacy feature (I know of) on my domain, as I see in other projects with the same issue could be the root cause. Example with vitejs

Ctrl+R (force update) "sometimes" resolves the issue (load these elements), not always.

assets are available (firefox loads and shows javascript code after clicking in the failed resource)

I personally suspect about some nginx config I'm missing. Even ./assets permissions/ownership on the server.

To Reproduce Steps to reproduce the behavior:

open phanpy and icons and other visual elements are not present open browser console (f12) and read the warnings

by the way, I can post/reply and do all expeted things, but visual elements are not visible.

Expected behavior

load that assets/icons

Screenshots

I think this image is lacking some elements, but actions are still available when mouse pointer is over them

Desktop (please complete the following information):

latest firefox (tested with other browsers, same issue)
latest phanpy
nginx on debian 11

cheeaun commented 1 week ago

Is this self-hosted?
What's the cache control header timeout for index.html?

xmgz commented 1 week ago

Yes. Both phanpy and my fediverse server (gotosocial) are on the same server but diferent domains.
reply headers for domain.tld/phanpy (index.html, I presume)

HTTP/2 304 Not Modified
server: nginx
date: Thu, 27 Jun 2024 09:52:26 GMT
last-modified: Sun, 23 Jun 2024 09:40:58 GMT
x-sso-wat: You've just been SSOed
etag: "6677edaa-ac3"
content-security-policy: upgrade-insecure-requests
x-content-type-options: nosniff
x-xss-protection: 1; mode=block
x-download-options: noopen
x-permitted-cross-domain-policies: none
x-frame-options: SAMEORIGIN
permissions-policy: interest-cohort=()
strict-transport-security: max-age=63072000; includeSubDomains; preload
X-Firefox-Spdy: h2

no cache-control value?

could it be due theres's some origin references in the index.html document to «phanpy.social», so be a cross-origin problem as those resources being actually in my domain.tld?
the SSOed thing reason is because I'm in a yunohost server with access restricted to registered users

More info:

in Firefox, pressing F12, then Debugger and then click in one of those missing modules, ... on the rigth there's a "phanpy" link to see given (missed) module source:

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta
      name="viewport"
      content="width=device-width, initial-scale=1, viewport-fit=cover"
    />
    <title>Phanpy</title>
    <meta
      name="description"
      content="Minimalistic opinionated Mastodon web client"
    />
    <meta name="color-scheme" content="dark light" />
    <link rel="icon" type="image/x-icon" href="./favicon.ico" />
    <link rel="apple-touch-icon" href="./apple-touch-icon.png" />
    <meta name="apple-mobile-web-app-title" content="Phanpy" />
    <meta name="apple-mobile-web-app-capable" content="yes" />
    <meta name="mobile-web-app-capable" content="yes" />
    <link rel="canonical" href="https://phanpy.social" />
    <meta
      name=""
      data-theme-setting="manual"
      content="#242526"
      data-theme-light-color="#fff"
      data-theme-light-color-temp="#ffff"
      data-theme-dark-color="#242526"
      data-theme-dark-color-temp="#242526ff"
    />
    <meta
      name="theme-color"
      data-theme-setting="auto"
      content="#fff"
      data-content="#fff"
      data-content-temp="#fffa"
      media="(prefers-color-scheme: light)"
    />
    <meta
      name="theme-color"
      data-theme-setting="auto"
      content="#242526"
      data-content="#242526"
      data-content-temp="#242526aa"
      media="(prefers-color-scheme: dark)"
    />
    <meta name="google" content="notranslate" />
    <link rel="me" href="https://hachyderm.io/@phanpy" />

    <!-- Metacrap https://broken-links.com/2015/12/01/little-less-metacrap/ -->
    <meta property="twitter:card" content="summary_large_image" />
    <meta property="og:url" content="https://phanpy.social" />
    <meta property="og:title" content="Phanpy" />
    <meta
      property="og:description"
      content="Minimalistic opinionated Mastodon web client"
    />
    <meta property="og:image" content="https://phanpy.social/og-image-2.jpg" />
    <script type="module" crossorigin src="./assets/main-hRAbIWke.js"></script>
    <link rel="modulepreload" crossorigin href="./assets/useTitle-TOnOofzE.js">
    <link rel="modulepreload" crossorigin href="./assets/tinyld-light-PxOyhYWY.js">
    <link rel="modulepreload" crossorigin href="./assets/index-gNUvm9kb.js">
    <link rel="modulepreload" crossorigin href="./assets/fuse-sLNor9NY.js">
    <link rel="stylesheet" crossorigin href="./assets/style-LhJ7Rndd.css">
  <link rel="manifest" href="./manifest.webmanifest"><script id="vite-plugin-pwa:inline-sw">if('serviceWorker' in navigator) {window.addEventListener('load', () => {navigator.serviceWorker.register('./sw.js', { scope: './' })})}</script></head>
  <body>
    <div id="app"></div>
    <div id="modal-container"></div>
  </body>
</html>

I'm by no mean a web developer so excuse me if I'm posting non-relevant info. Thank you for phanpy and your work

cheeaun commented 1 week ago

If it's 304, means the etag matched and server decided to return 304. You can try to force reload or clear browser cache then load. Once it's 200, check the headers again.

In short, the problem is when index.html got cached for too long and never refresh. When you deploy the new Phanpy build files, you probably deleted the old build files and they'll end up 404. All the file names are hashed, so they changed based on references. index.html could still point to the old files, and the JS files will also point to the other old asset files, and so on, continuing the chain of breakage.

There are 3 ways to solve this:

When deploying, keep the previous build files, don't delete them. This will use a lot of server disk space if you keep deploying new builds for many years without deleting old ones.
Set a very long (a year?) cache-control header on the asset files, so either the browser or your CDN server cache them. If your CDN is edge-based, this might not work as one node might cache them, the other node might not. Don't set it for index.html — you'll need this to refresh every time a new build is deployed.
Set index.html cache-control to no-cache or very low cache expiry (5 mins? I've done this before and it breaks because there's still that 5-min window of older files gone missing)

xmgz commented 1 week ago

Thank you, I can not do it right now but I will try later.

you probably deleted the old build files and they'll end up 404. All the file names are hashed, so they changed based on references.

exactly what I did.

Please, how should I update to a new version?

Currently I download .tar.gz file from releases, delete (rm -R *.* assets/ compose/) all current files and paste there the new ones. (then chown and chmod)

I'm glad it is just a personal problem but maybe this issue could help other people too. Thank you.

Fastidious commented 1 week ago

@xmgz this is how I do it. I clone the repository, and I do a git pull, then patch it[1], then an npm install, then an npm run build. I have my web root directory set to the dist directory, where the new Phanpy build is placed.

[1]

diff --git a/src/components/status.css b/src/components/status.css
-  margin-left: calc(-50px - 16px);
+  margin-left: calc(-50px - 5px);

cheeaun commented 1 week ago

@xmgz in my opinion, most reliable and simple solution is (3) — no-cache. Try this to see if the icon comes back.

xmgz commented 1 week ago

I've made a reinstall and set nginx to add_header 'Cache-Control' "no-cache";

with mixed results :smile:

I still get random problems with some visual elements/assets not loading on first load, but forcing reload (ctrl+caps+r) I can reliably load them.

At this point I think this is NOT a phanpy problem so thank you for your help and feel free to close this issue. I will keep debugging and learning following your tips.

https://medium.com/heybooster/handling-of-dynamically-imported-module-errors-46b61dab4739

cheeaun / phanpy

[Bug?] Uncaught (in promise) TypeError: error loading dynamically imported module... #583

More info: