Error: "No hoisted script at index 1" | Astro Lounge | Page 1

outer sundial Nov 17, 2023, 4:38 PM

#

I'm attempting to add <script> tags to my astro pages/components, and suddenly the hot-module reload starts throwing the aforementioned error. A search of Discord reveals this is a repeating problem across multiple versions of Astro...the only solution I've seen posted is "restart your dev server". The problem is, after restarting the dev server, the problem comes back instantly the moment I touch a <script> tag again. As is, Astro is unusable once I start using <script> tags. If I touch a <script> tag, which causes the problem, then undo the change I made...the error continues anyway and I need to restart the dev server. I'm getting nowhere.
My dependencies:

  "dependencies": {
    "@astro-community/astro-embed-youtube": "^0.4.1",
    "@astrojs/mdx": "^1.1.3",
    "@astrojs/rss": "^2.4.3",
    "@astrojs/sitemap": "^1.3.2",
    "@sanity/astro": "2.1.1",
    "@sanity/client": "^6.4.12",
    "@sanity/image-url": "^1.0.2",
    "astro": "^3.4.0",
    "astro-portabletext": "^0.9.6",
    "react": "^18.2.0",
    "react-dom": "^18.2.0",
    "sanity": "*"
  }

Thoughts?

#

Here are the three <script> tags I've been playing with:

  <script type="text/javascript">
    window.REQUIRED_CODE_ERROR_MESSAGE = "Please choose a country code";
    window.LOCALE = "en";
    window.EMAIL_INVALID_MESSAGE = window.SMS_INVALID_MESSAGE =
      "The information provided is invalid. Please review the values you enetered and try again.";
  
    window.REQUIRED_ERROR_MESSAGE = "This field cannot be left blank. ";
  
    window.GENERIC_INVALID_MESSAGE =
      "The information provided is invalid. Please review the values you enetered and try again.";
  
    window.translation = {
      common: {
        selectedList: "{quantity} list selected",
        selectedLists: "{quantity} lists selected",
      },
    };
  
    var AUTOHIDE = Boolean(1);
  </script>
  
  <script defer src="https://sibforms.com/forms/end-form/build/main.js"></script>

<script src="https://www.google.com/recaptcha/api.js?hl=en"></script>

Incidentally, on the rare occasion where I can place a <script> tag without error...the above scripts will not behave as expected. For example, the first two scripts always appear in my HTML <body> section...regardless of where in my HTML I attempt to insert them. That third <script>, referencing the google recaptcha, never shows up anywhere, ever...like it simply disappears into the ether.

#

I'd be happy to do a zoom/google chat/MS Teams screen-share with support, to help diagnose this.

outer sundial Nov 19, 2023, 8:22 PM

#

I continue to debug this. As before, placing a <script> then removing it...still leaves the dev build (hot-module-reload) broken. However, I've made an additional observation. My index page includes an <EmailSubscribe> element exactly one time...and yet there are multiple scripts for that component in the generated HTML. That should never happen in Astro! And since the error message is about "scipts at index 1"...I noticed that each of those dupes has an index parameter (highlighted in green). What's going on here?

outer sundial Nov 19, 2023, 9:47 PM

#

The more I attempt to isolate the problem, the more the problem mutates. My index.astro page references the EmailSubscribe component. To make this problem stop, I simply removed the EmailSubscribe reference entirely. Despite that, Astro continues to find/load the EmailSubscribe.astro component and assert errors about that component. In particular, I was told that a <link> element contained "ref" which was unexpected text. I decided to delete all contents of that EmailSubscribe component, except for "Hello". Despite that, Astro still found an "unterminated regular expression" error to report (see photo).

#

I then deleted the <div>Hellos</div> so that the EmailSubscribe component would be empty. It then gave me a different error...see photo.

#

I have now renamed the EmailSubscription astro component to EmailSignup. This has caused the dev build to give a "404" error about the missing component...even though my code nowhere references this component...with either the new name or old name.

#

What's even more amazing, is that my index.astro page is still rendering the entire "email subscription" form...even though it is nowhere referenced in my code (and the error above provides a "404" of it being gone). So, in short, the Astro "run dev" has access to a post-build cache, where the entire index.astro page has been kept...and is not letting it go! Where is it cached?
I then decided to rename the index.astro page to default.astro. When I launch "run dev", I'm given a 404 on the root "/" location...but it still renders the index.astro page from two days ago. If I visit any other pages of the app, and change a corresponding astro file, it hot-module-reloads immediately. It is only the index.astro page that is permanently static.

outer sundial Nov 19, 2023, 11:09 PM

#

Ok, a break-through. It looks like the caching problem is my chrome browser tab for localhost:4321. As soon as there is a page refresh involving a <script> tag...the chrome browser then goes backwards in time to reference the page as it was two days ago. If however I simply close the chrome tab, and re-open it...suddenly I can see my pages as they actually are! However, if I touch a <script> tag again...then suddenly I'm back to a cached version of the page...and I need to close and reopen the chrome tab.
Even so, I have still not found a way to make run dev stop reporting "404 EmailSubscribe.astro". It doesn't matter that I've completely removed any reference to that in my code.

outer sundial Nov 19, 2023, 11:33 PM

#

Next finding. Given the problem of chrome somehow caching older run dev pages, and repeatedly bringing them back if I touch a <script> tag...I decided to open Firefox and use that instead. Now I seem to have no problems at all with refreshes...including when touching <script> tags. That is, in Firefox all the hot-module-reloading works exactly as expected. Said differently, all my problems are now gone...including the original error "No hoisted script at index 1".
Incidentally, I suspect the reason Chrome is causing this problem...is because I may have "localhost:4321" open more than once, on more than one tab, and I suspect that causes some strange update/caching issues.

#Error: "No hoisted script at index 1"