'Express Redirect to index.html doesn't render app.js (React Refresh Cannot Get issue)

I'm relatively new to React, but facing an issue which I understand to be fairly common; my app works fine, but when I refresh or try to link directly to a route, I receive the "Cannot Get /XXX" error.

I understand why I'm getting this error and I have read several threads here, as well as blogs and videos to resolve it, but have thus far been unable to fix it. I have been attempting a catch-all fix which routes through to my index.html.

on my server index.js:

app.get('/*', function(req, res) {
    res.sendFile(path.join(__dirname, '../frontend/public/index.html'), function(err) {
        if (err) {
            res.status(500).send(err)
        }
    })
})

When deploying this and I try a refresh, I don't get the error anymore but instead I am shown my blank index.html file. In other words, my app.js isn't rendered and I receive no errors in the logs.

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <!-- <link rel="icon" href="%PUBLIC_URL%/favicon.ico" /> -->
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <meta name="theme-color" content="#000000" />
    <meta
      name="description"
      content="Web site created using create-react-app"
    />
    <link rel="apple-touch-icon" href="%PUBLIC_URL%/logo192.png" />

    <title>React App</title>
  </head>
  <body>
    <noscript>You need to enable JavaScript to run this app.</noscript>
    <div id="root"></div>

  </body>
</html>

I'm using a MERN stack with react router v6, the issue occurs when deployed onto Heroku (but not localhost). Could anybody help to point me in the right direction? Thanks in advance

Edit: My frontend index.js file:

import React from 'react';
import ReactDOM from 'react-dom/client';
import './index.css';
import App from './App';
import reportWebVitals from './reportWebVitals';

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
  <React.StrictMode>
    <App />
  </React.StrictMode>
);

// If you want to start measuring performance in your app, pass a function
// to log results (for example: reportWebVitals(console.log))
// or send to an analytics endpoint. 
reportWebVitals();
reactjsexpressredirectsingle-page-application


Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source

Related Questions