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...

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?*** — langpavel, Jan 20 '18 at 06:00
@langpavel 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 — Positonic, Jan 21 '18 at 19:21
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. — langpavel, Jan 22 '18 at 20:25

score 4 · Answer 1 · answered Jan 19 '18 at 11:09

4

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

answered Jan 19 '18 at 11:09

Dyo

4,429
1
15
30

fetchBalance calls loadMarkets inside. – Positonic Jan 21 '18 at 19:17

score 4 · Answer 2 · answered Jan 20 '18 at 06:05

4

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.

answered Jan 20 '18 at 06:05

langpavel

1,270
12
16

thanks for this, that does actually seem to be the cause of the page found error! – Positonic Jan 21 '18 at 20:24

React Starter Kit error - page not found

2 Answers2