The inability to load the main.js script in index.html results in a blank website that only gets resolved upon refresh

Question

The inability to load the main.js script in index.html results in a blank website that only gets resolved upon refresh

Using the Vite / Rollup bundler with a Vue app as an example, we can see how this issue applies to any modern web stack.

Vite automatically adds a hash to each js chunk, asset, and main.js file to indicate when changes have been made. However, there is an issue where if the hash of the main.js file changes, the website fails to load the Vue router and gets stuck on a blank index.html page until manually refreshed. One potential solution could be adding an error handler directly in the HTML file like:

<script type="module" src="/src/main.hash1.js" onerror="onMainScriptLoadingError"></script>

And inside the onMainScriptLoadingError function, include:

window.location.reload();

This would allow for the page to refresh and download the new index.html with the updated main.hash2.js file without causing an infinite loop of refreshing. However, it seems strange that this approach is not mentioned in the official documentation of any bundler. Is there a better way to handle this issue without cluttering the server with multiple historic files or tying builds together?

javascript vue.js vite cicd rollup

Answer 1

Answer №1

With the help of a personalized vite plugin, you have the ability to achieve something similar to this. (Make sure to adjust the regex to match the name of your vue file! Note that this example is from a react application!)

vite.config.ts

export default defineConfig(({ mode }) => {
  const indexOnErrorPlugin = () => {
    return {
      name: 'index-on-error',
      transformIndexHtml(html: string) {
        return html.replace(
          /\/assets\/index-(\w+).js"/g,
          function (match, hashValue) {
            return match + ' onerror="window.location.reload()"'
          }
        )
      },
    }
  }

  return {
   
    plugins: [
      ...
      indexOnErrorPlugin(),
    ],
    
  }
})

Alternatively, for a more complex solution (avoiding reloading the same hash):

vite.config.ts plugin:

  const indexOnErrorPlugin = () => {
    return {
      name: 'index-on-error',
      transformIndexHtml(html: string) {
        return html.replace(
          /\/assets\/index-(\w+).js"/g,
          function (match, hashValue) {
            return (
              match + ' onerror="handleIndexScriptError(\'' + hashValue + '\')"'
            )
          }
        )
      },
    }
  }

index.html

    <script>
      function handleIndexScriptError(hash) {
        console.error('Error loading index script', hash);
        const hashArray = JSON.parse(localStorage.getItem('index_hashes')) || [];
        if (hashArray.includes(hash)) return;
        hashArray.push(hash);
        localStorage.setItem('index_hashes', JSON.stringify(hashArray));
        window.location.reload();
      }
    </script>

Answer 2

With the help of a personalized vite plugin, you have the ability to achieve something similar to this. (Make sure to adjust the regex to match the name of your vue file! Note that this example is from a react application!)

vite.config.ts

export default defineConfig(({ mode }) => {
  const indexOnErrorPlugin = () => {
    return {
      name: 'index-on-error',
      transformIndexHtml(html: string) {
        return html.replace(
          /\/assets\/index-(\w+).js"/g,
          function (match, hashValue) {
            return match + ' onerror="window.location.reload()"'
          }
        )
      },
    }
  }

  return {
   
    plugins: [
      ...
      indexOnErrorPlugin(),
    ],
    
  }
})

Alternatively, for a more complex solution (avoiding reloading the same hash):

vite.config.ts plugin:

  const indexOnErrorPlugin = () => {
    return {
      name: 'index-on-error',
      transformIndexHtml(html: string) {
        return html.replace(
          /\/assets\/index-(\w+).js"/g,
          function (match, hashValue) {
            return (
              match + ' onerror="handleIndexScriptError(\'' + hashValue + '\')"'
            )
          }
        )
      },
    }
  }

index.html

    <script>
      function handleIndexScriptError(hash) {
        console.error('Error loading index script', hash);
        const hashArray = JSON.parse(localStorage.getItem('index_hashes')) || [];
        if (hashArray.includes(hash)) return;
        hashArray.push(hash);
        localStorage.setItem('index_hashes', JSON.stringify(hashArray));
        window.location.reload();
      }
    </script>

The inability to load the main.js script in index.html results in a blank website that only gets resolved upon refresh

Answer №1

Similar questions

What role does the css-loader play in webpack?

Implement currency formatting in input text with v-model in Vue

Obtain the abbreviation inside the specified element

Accessing iframe's HTML using a server-side solution by circumventing the Cross-Domain Policy

Using ngFor directive to iterate through nested objects in Angular

Is it possible to make changes to dynamically inserted HTML using jQuery.ajax?

"Exploring the possibilities of combining AngularJS with PHP to manipulate

Tips for iterating through a nested JSON response using Vue.js

Turning a string into JSON (encountering an unexpected token u/')

Develop a TypeScript class by incorporating a static function from an external library, while ensuring type safety

Implementing a hamburger menu across various webpages

Looking for a way to determine in JavaScript whether the last item in an array is a number or not? Keep in mind that the last element could be either a number or a string, depending

Creating unique sizes for each quad in Three.js using InstancedBufferGeometry and ShaderMaterial

Updating an Object in vue.js Upon Click Event to Add a New Value

Utilize Axios in Vue.js to fetch and process data from a REST API endpoint in C#

Transformation in input value does not manifest in other components

Using Google's Closure Compiler to Optimize JSON Files

Mastering the Art of Tallying Select Choices in Protractor

Avoid mutating the prop directly and instead, utilize a data or computed property that is based on the value of the prop. The prop that is being mutated in this case is

Can you explain the inner workings of the sort function mechanism?