Gatsby error when creating a new route: Preparing requested page

Question

I setup a new Gatsby project through the installer but when I try to create a new file in /src/pages, but if then I go to that route, the browser says

Preparing requested page

in loop. In the browser console it outputs:

[Error] Unhandled Promise Rejection: Error: We couldn't find the correct component chunk with the name "component---src-pages-home-js" (anonymous function) (loader.js:45) promiseReactionJob

This is my home.js (in a normal React environment works perfectly):

import React from "react";

const Home = () => {
  return (
    <div>
      <title>Test</title>
      <p>Hello</p>
    </div>
  );
};

export default Home;

Project structure:

pages
 - 404.js
 - index.js
 - second.js

What could be the problem? I already tried to reinstall Gatsby again and tried cleaning caches or making another file, with a different file names. The file is seen by Gatsby because if I try to access the route without creating the file, it gives me the 404 page.

Thanks.

UPDATE:

If you're using a Mac with M1 Chip, make sure you installed Gatsby with Rosetta!

Answer 1

Also hit the same problem with M1 MacBook Air when adding pages to Gatsby sample project. The solution (found elsewhere) was to empty the browser cache.