Blank page in Firebase hosting with paramter in url reactjs - react-router

Question

I use Firebase hosting in combination with ReactJS. if I include a parameter in the url on my localhost, this works fine. The configuration is as follows:
Only when I deploy it to the firebase hosting I get a white blank page. such as eg:
in my routes.js:
{
path: "/ontbijt-betaling/:id",
layout: ModalLayout,
exact: false,
component: PayBreakfastView
},
In my view:
import React from "react";
import { Container, Row, Col } from "shards-react";
import PayBreakfastComponent from "../../components/Frontend/PayBreakfastComponent";
import FooterView from "../Footer";
import HeaderView from "../Header";
const PayBreakfastView = (props) => (
<Container fluid >
<HeaderView />
<PayBreakfastComponent id={props.match.params.id}/>
<FooterView />
</Container>
);
export default PayBreakfastView;
and the component:
import React, { Component } from 'react';
import ReactDOM from 'react-dom';
import { Link } from 'react-router-dom';
import { Row, Col, Card, CardHeader, CardBody, Button } from "shards-react";
import Firebase from 'firebase';
class PayBreakfastComponent extends React.Component {
constructor(props) {
super(props);
this.state = {
name:'',
mail:'',
shortDesc:'',
payment:[]
};
}
componentWillMount(){
console.log('mount')
let tempPayment = Firebase.database().ref('/clients/-uhfwoebfwioudb/content/temp-payments/'+this.props.id);
tempPayment.on('value', snapshot => {
let state = snapshot.val();
this.setState({
payment: state,
get: true
})
localStorage.setItem('name',state.name);
localStorage.setItem('mail',state.email);
localStorage.setItem('date',state.date);
localStorage.setItem('phone',state.phone);
localStorage.setItem('adres',state.adres);
localStorage.setItem('postal',state.zip);
localStorage.setItem('city',state.city);
localStorage.setItem('bookingID', state.bookingsnumber)
localStorage.setItem('amount',state.amount);
localStorage.setItem('shippingCost',state.shippingCost);
localStorage.setItem('unitPrice',state.unitPrice);
localStorage.setItem('total',state.totalPrice);
console.log(state.email)
})
}
payOrder(){
/* var xhr = new XMLHttpRequest();
xhr.open('POST', 'https://app.biejanssen.nl/paymentBreak');
xhr.setRequestHeader("Content-Type", "application/json");
let data ={
totalPrice: this.state.payment.totalPrice,
nameClient: this.state.payment.name,
emailClient: this.state.payment.email,
}
xhr.send(JSON.stringify(data));
xhr.onload = () => {
console.log("status is:"+xhr.responseURL);
window.location.href=xhr.responseURL;
};*/
}
render() {
return (
<div className="home-page">
<Row className="contact-row">
<Col sm={12} className="contact-colum">
<h2>Ontbijt betalen</h2>
</Col>
</Row>
<Row>
<Col sm={3}></Col>
<Col sm={6} className="frontend-table">
<h2>Uw bestel overzicht</h2>
<form method="post" action={"https://app.biejanssen.nl/paymentBreak"} id="hook-form" >
<table>
<tr>
<td><span className="total-fat">Order nummer</span></td>
<td>{this.state.payment.bookingsnumber} <input type="text" value={this.state.payment.bookingsnumber} hidden/></td>
</tr>
<tr>
<td><span className="total-fat">Omschrijving</span></td>
<td>Ontbijt</td>
</tr>
<tr>
<td><span className="total-fat">Uw naam</span></td>
<td>{this.state.payment.name} <input type="text" name="nameClient" value={this.state.payment.name} hidden/></td>
</tr>
<tr>
<td><span className="total-fat">Uw e-mail</span></td>
<td>{this.state.payment.email} <input type="text" name="emailClient" value={this.state.payment.email} hidden/></td>
</tr>
<tr>
<td><span className="total-fat">Uw telefoonnummer</span></td>
<td>{this.state.payment.phone}</td>
</tr>
<tr>
<td><span className="total-fat">Aflever datum</span></td>
<td>{this.state.payment.date}</td>
</tr>
<tr>
<td><span className="total-fat">Aflever adres</span></td>
<td>{this.state.payment.adres}, {this.state.payment.zip}, {this.state.payment.city}</td>
</tr>
<tr>
<td><span className="total-fat">Aantal ontbijtjes</span></td>
<td>{this.state.payment.amount}</td>
</tr>
<tr>
<td><span className="total-fat">Prijs per ontbijt</span></td>
<td>€ {this.state.payment.unitPrice}</td>
</tr>
<tr>
<td><span className="total-fat">Bezorgkosten ontbijt</span></td>
<td>€ {this.state.payment.shippingCost}</td>
</tr>
<tr>
<td><span className="total-oder">Totaal</span></td>
<td><span className="total-oder">€ {this.state.payment.totalPrice} <input type="text" name="totalPrice" value={this.state.payment.totalPrice} hidden/></span></td>
</tr>
</table>
<button type="submit" form="hook-form">Betaal</button>
</form>
<Button onClick={()=>this.payOrder()} >Betaal bestelling!</Button>
</Col>
<Col sm={3}></Col>
</Row>
</div>
);
}
};
export default PayBreakfastComponent;
Example url is: https://app.biejanssen.nl/ontbijt-betaling/-MWTRAO7Lhjqc47-y6z-
Does anyone understand where the difference is or how this is possible?

Answer 1

If you look at browser DevTools you'll see the following error:
Uncaught SyntaxError: Unexpected token '<'
[
This error typically means a JavaScript was requested from the server and it returned HTML instead.
If you look at the source of https://app.biejanssen.nl/ontbijt-betaling/-MWTRAO7Lhjqc47-y6z- You'll find the script tag loading the main chunk from a relative path:
<script src="./static/js/main.cc963dc1.chunk.js"></script>
Resulting in loading the JavaScript file from:
https://app.biejanssen.nl/ontbijt-betaling/static/js/main.cc963dc1.chunk.js
The file file doesn't exist at that path and if you look at the resources loaded for https://app.biejanssen.nl/dashboard you'll find the JavaScript file actually exists at:
https://app.biejanssen.nl/static/js/main.cc963dc1.chunk.js
You need to update the the app to always load JavaScript and other resources from the root of the domain. Something like the following without the . at the start of the path:
<script src="/static/js/main.cc963dc1.chunk.js"></script>