React Starter Kit error - page not found

Question

I created a new route from the react-starter-kit project and it does an async fetch of some data, then renders it, but a second later the page reloads with a message saying "Page not found - sorry but the page you're trying to view does not exist".

In the console I see - "Warning: Text content did not match. Server: "Balances" Client: "Page Not Found"

async function action() {

let bittrex = new ccxt.bittrex ({
    'apiKey': '',
    'secret': ''
})

try {

    // fetch account balance from the exchange
    let bittrexBalance = await bittrex.fetchBalance ()
    /**** commenting above and uncommenting this block stops it from happening.... 
    let bittrexBalance = {};
    bittrexBalance.info= [];
    let currency = {};
    currency.Currency = "BTC";
    currency.Value=999;
    // output the result
    bittrexBalance.info.push(currency);*/
    console.log ('balance', bittrexBalance)

    let balances = [];
    balances.push(bittrexBalance)
    return {
        title: "Balances",
        component: (
            <Layout>
                <Balances balances={balances} />
            </Layout>
        ),
    };


} catch (e) {
    console.log('SOME sort of error', e);
}

Does anyone have any idea what this could be?

Edit to add, I realise now that if I disable Javascript everything works perfectly...

It seems to be running through the universal router twice. The first time

That's the only clue I've found so far... I don't understand why it's reloading the page once it has already loaded...

The Page not found error is coming from it going through :

catch (e) the second time... I suspect something is happening inside the ccxt library but that the problem is actually that it is called a second time because the page is somehow reloaded...

Fijian

Hi, your snippet is not telling me much. This error will happen if your server side rendering (SSR) code path cannot fetch, load, know same data, but your client can — when you hit refresh, F5, land from other website or similar. Do your server knows all the data? – Proselytize

@Proselytize yes I am hitting f5, the page loads correctly from the server side code above. Then it refreshes somehow and I get the "Page not found error" this does not happen if I disable Javascript – Fijian

Then you have already half of problem solved. Your client cannot get same data as server can, then after client code mount, client re-execute router and router on client decide to render something different. It's incostinceny between your server and client data fetching code. – Proselytize

Answer 1

It seems you have to call await bittrex.loadProducts() before fetching your Balance.

Edit : Seems also that bittrex.loadProducts() has been renamed by bittrex.loadMarkets() More info in this issue on github

Amand

fetchBalance calls loadMarkets inside. – Fijian

Answer 2

Your server code reached exception, which turns into rejection of route, because action method returns undefined, so server will fall down through — next routes will not fit and finally it reaches the not found route.

Proselytize

thanks for this, that does actually seem to be the cause of the page found error! – Fijian