Hitting back button sometimes breaks and doesn't load page?

[Lippiun]

Hello,

For some reason, every now and again when I navigate through the pages using the back and forward buttons the back button stops working.

The URL changes but the content remains the same?

I've checked the console for errors and there is this: TypeError: Cannot read property 'state' of undefined

Do you know why this is happening? Like I said, the majority of the time it works okay but all of sudden it doesn't.

The code I'm using is like so:

$(function(){
  'use strict';
  var options = {
    prefetch: true,
    debug:true,
    cacheLength: 0,
    repeatDelay: 500,

    onStart: {
      duration: 0, // Duration of our animation
      render: function ($container) {
        // Add your CSS animation reversing class
        $container.addClass('is-exiting');

        // Restart your animation
        smoothState.restartCSSAnimations();
      }
    },

    onProgress: {
    // How long this animation takes
    duration: 0,
    // A function that dictates the animations that take place
    render: function ($container) {
                    $container.addClass('is-loading');

                    $('#progressBar').append('<div id="bar"></div>');   
                    var progress = '100%';

                    $('#bar').animate({
                        width: progress
                    }, 400);
    }
    },

    onReady: {
      duration: 0,
      render: function ($container, $newContent) {
        $container.removeClass('is-loading is-exiting');
        // Inject the new content
        $container.html($newContent);
      },
    },

    onAfter: function() {
            navbarAnimate();
            closeMenu();
            ImageSliders();
            initPhotoSwipeFromDOM('.gallery');
            ImageOverlay(); 
            window.parsePinBtns();
            backToTop();

    }
  },

  smoothState = $('#main').smoothState(options).data('smoothState');
});

[Eugene1984]

I have exactly the same issue on all my sites using smoothstate.

[Lippiun]

Yeah it looks like a common problem but no one seems to have the answer! Hopefully the developer will explain

[Luc45]

Increase your cache.

Replace cacheLength: 0 with something like cacheLength: 10 or something.

The issue comes from this function:

    /** Handles the popstate event, like when the user hits 'back' */
    onPopState = function ( e ) {
        if(e.state !== null) {
            var url = window.location.href,
                $page = $('#' + e.state.id),
                page = $page.data('smoothState'),
                diffUrl = (page.href !== url && !utility.isHash(url, page.href)),
                diffState = (e.state !== page.cache[page.href].state);

            if(diffUrl || diffState) {
                if (diffState) {
                    page.clear(page.href);
                }
                page.load(url, false);
            }
        }
    },

As you can see, it compares the state of given object with the one in the page cache, in e.state !== page.cache[page.href].state.

If the page you are currently viewing is not saved in the cache, it will throw an undefined index at that line.

Worked for me.