7
Nevermind...

Mistake was related to the codebase (where I'm using monorepo and vercel.json was on the root directory. After moving vercel.js to package with react application everything was working perfectly.

The 404 Problem

I have a simple React.js application with wouter-based routing and Vercel deployments that drive me into a little issue where I have no idea about the solution. It always returns 404 after refresh (of subpage).

My code looks a bit like this.

    <>
        <Route path='/' component={Intro} />
        <Route path='/dashboard' component={Dashboard} />
    </>

Where on <Intro /> I have <Link /> to /dashboard which should transfer me to <Dashboard /> page. And it does work on my local machine, in a container, and on Linux-based deployment, but it doesn't really work in vercel deployment, even if I tried to resolve this issue with the configuration of vercel.json.

{
    "github": {
        "silent": true
    },
    "rewrites": [
        {
            "source": "(.*)",
            "destination": "/index.html"
        }
    ]
}

Also tried an alternative version of rewrites and still the same issue.

{
  "rewrites": [{ "source": "/(.*)", "destination": "/" }]
}

Link to live deployment available here: pointrest-6ttd9zep8-araclx.vercel.app

NOTE: I was also trying to use react-router but the same problem exists. Same problem exist when application is hosted on netlify but doesn't exist at all when hosted on heroku or run inside docker container.

keinsell
  • 426
  • 5
  • 16
  • https://stackoverflow.com/questions/69701743/how-can-i-configure-vites-dev-server-to-give-404-errors The solution has ben soved in this Question! – Kaio Dutra Mar 08 '22 at 09:48
  • Not exactly, I was not aware of that `vercel` can have a problems with monorepo structure. Question you provided is on completely different topic. – keinsell Mar 09 '22 at 10:28

2 Answers2

8

You can a create simple rewrites rules in the serve. In my case I use Vercel. Then you can find something similar this.

Create in the project root a file vercel.json

And writer

{
  "rewrites": [{ "source": "/(.*)", "destination": "/" }]
}

P.S.: Don't forget to enable rewrites in vercel.

Kaio Dutra
  • 181
  • 1
  • 6
  • 2
    Mate you're wrong, You cannot put `vercel.json` in Project Root, because if you're using monorepo structure this will not work. It's supposed to be in **Application Directory (with package.json)**. – keinsell Mar 18 '22 at 14:38
  • 1
    yea as @keinsell said, I put `vercel.json` in my application directory (mine is called `/client`) and it worked :) – adnjoo Feb 28 '23 at 04:10
  • 1
    Sorry! I meant. Exactly next to the package.json. – Kaio Dutra Mar 30 '23 at 04:19
1

TLDR

Add an empty 404.html in the public folder (you can put the title in the title tag) with this script in the head section

<script type="text/javascript">
  var pathSegmentsToKeep = 0;

  var l = window.location;
  l.replace(
    l.protocol + '//' + l.hostname + (l.port ? ':' + l.port : '') +
    l.pathname.split('/').slice(0, 1 + pathSegmentsToKeep).join('/') + '/?/' +
    l.pathname.slice(1).split('/').slice(pathSegmentsToKeep).join('/').replace(/&/g, '~and~') +
    (l.search ? '&' + l.search.slice(1).replace(/&/g, '~and~') : '') +
    l.hash
  );
    </script>

Then add this script to your index.html

<script type="text/javascript">
  (function(l) {
    if (l.search[1] === '/' ) {
      var decoded = l.search.slice(1).split('&').map(function(s) { 
        return s.replace(/~and~/g, '&')
      }).join('?');
      window.history.replaceState(null, null,
          l.pathname.slice(0, -1) + decoded + l.hash
      );
    }
  }(window.location))
    </script>

This worked perfectly for me after deploying my app to render.com

To handle the "real" not found response, you can add this route

<Route path="*" element={<p>Page not found</p>} />

For more information you can visit this repo spa-github-pages

Credits to @rafgraph

Mohamed Ali Ben Thaier
  • 68
  • 8