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!
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.
Have you tried renaming your home.js to index.js?
After that, clean the cache by gatsby clean.
This may be due to data in your browser cache. Clear the cache in Safari with Option + Command + E
Clearing browser caché was the solution for mee too, as #JohnysSon says
Related
I'm trying to build my Next.js project but it keeps giving me this error in the terminal:
Error: Build optimization failed: found page without a React Component as default export in
pages/components/context/Context
That's the React context API file, there isn't supposed to be any default export there. Is this a bug or what?
You should move your components outside the pages folder. pages/ should only be used for page components as Next.js routing is based on its structure.
Next.js has a file-system based router built on the concept of pages.
When a file is added to the pages directory it's automatically available as a route.
By default, Next.js assumes anything under the pages folder is a page component and will try to build each file as a page.
Even though the above is the default behaviour, you can configure your Next.js app to include non-page files in the pages directory.
To do so, you can modify the pageExtensions entry in the next.config.js file as shown below. Then rename your page components to have a file extension that includes .page (_document.page.js, _app.page.js, index.page.js, etc).
module.exports = {
pageExtensions: ['page.tsx', 'page.ts', 'page.jsx', 'page.js']
}
With this configuration, Next.js will ignore any file that doesn't contain .page for the purpose of building pages/API routes and routing.
In my case, I had an empty file index.js in a folder. Using Nextjs Default Router
It seems to be not declared default export keyword in context component.
Try it as follow:
const Context = ()=>{
...
}
export default Context
I had the same error.
If you comment out all other code but leave this NextJS won't get mad at you:
export default function Home1() {
return <>{/* nothing */}</>;
}
I like to keep older index files and components locally and on github so this is a nice hack. I just copy all of the existing code add it to a new file and then add 1 to it for example:
index1.js
You can also leave a comment to kind of bring you and other devs up to speed as to why you did this for example:
//good for history of index implementation and associated syntax logic
I'm trying to build my Next.js project but it keeps giving me this error in the terminal:
Error: Build optimization failed: found page without a React Component as default export in
pages/components/context/Context
That's the React context API file, there isn't supposed to be any default export there. Is this a bug or what?
You should move your components outside the pages folder. pages/ should only be used for page components as Next.js routing is based on its structure.
Next.js has a file-system based router built on the concept of pages.
When a file is added to the pages directory it's automatically available as a route.
By default, Next.js assumes anything under the pages folder is a page component and will try to build each file as a page.
Even though the above is the default behaviour, you can configure your Next.js app to include non-page files in the pages directory.
To do so, you can modify the pageExtensions entry in the next.config.js file as shown below. Then rename your page components to have a file extension that includes .page (_document.page.js, _app.page.js, index.page.js, etc).
module.exports = {
pageExtensions: ['page.tsx', 'page.ts', 'page.jsx', 'page.js']
}
With this configuration, Next.js will ignore any file that doesn't contain .page for the purpose of building pages/API routes and routing.
In my case, I had an empty file index.js in a folder. Using Nextjs Default Router
It seems to be not declared default export keyword in context component.
Try it as follow:
const Context = ()=>{
...
}
export default Context
I had the same error.
If you comment out all other code but leave this NextJS won't get mad at you:
export default function Home1() {
return <>{/* nothing */}</>;
}
I like to keep older index files and components locally and on github so this is a nice hack. I just copy all of the existing code add it to a new file and then add 1 to it for example:
index1.js
You can also leave a comment to kind of bring you and other devs up to speed as to why you did this for example:
//good for history of index implementation and associated syntax logic
I want to deploy a React app to netlify but the build fails. When I check the build logs I find that it fails where I used lazy loading to get a component.
When I use lazy loading to get a component, as shown below,
import React, {lazy } from 'react';
const SidebarLeft = lazy(() => import('./pages/SidebarLeft'))
the build fails with the error message
12:26:05 AM: Cannot find file './pages/WorldCases' in './src'.
What could be the cause of this, and how do I fix it?
For anyone who might run into this problem, it turned out that git didn't change the folder name when I did. I initially created a Pages folder. I later renamed it to pages, with a small p. But git didn't pick up that change. So I had to change the name back to Pages.
I've been having trouble getting react-pdf to work properly in my react app that I created using 'create-react-app'. From various github comments on the react-pdf page, it seems that there's an issue setting up the workerSrc in React applications that were created with 'create-react-app'.
One work around that seemed to solve the issue (temporarily) was to copy the pdf.worker.js file from the node-modules/build/pdfjs-dist/build folder and place it in the public folder of my react app. Then in my index.js file put the following code:
import {pdfjs} from 'react-pdf'
window.PDFJS.workerSrc = process.env.PUBLIC_URL + '/pdf.worker.js'
This worked just fine for a week, until I installed a new module into my application with npm. Now, I'm getting the same error I did in the beginning, and nothing has changed:
index.js:14 Uncaught TypeError: Cannot set property 'workerSrc' of undefined
These were the initial comments that helped me narrow down the error:
https://github.com/facebook/create-react-app/issues/1574#issuecomment-280436498
https://github.com/wojtekmaj/react-pdf/issues/291
but now that it's back I'm kind of at a loss for ideas. Has anyone else experienced this and been able to solve it? Any help would be greatly appreciated!
Based on what I have seen in the docs and in forums, it appears you should be altering the global PDFJS object.
PDFJS.workerSrc, instead of window.workerSrc.
I managed to get this working by loading the worker from CDN.
import { Document, Page, pdfjs } from 'react-pdf';
pdfjs.GlobalWorkerOptions.workerSrc=//cdnjs.cloudflare.com/ajax/libs/pdf.js/${pdfjs.version}/pdf.worker.js
I used create-react-app to play with react. I noticed that no matter what I type in after localhost:3000/ (which is the default url on dev machine) I always get the content from localhost:3000
This means I cannot access images so that sort of means I can't really do anything with it.
Is this a bug or is it some awesome new feature that I just don't understand? How can this be switched off?
Create React App uses historyApiFallback for the webpack-dev-server, which means that all requests that give a 404 response will fall back to load the index.html file.
If you e.g. add an image to the public folder, you can see that the image takes precedence over the index.html file.
You can also import the image with the help of Webpack and use the import as src in your code, and Webpack will make sure the image ends up in the final build folder for you.
import img from './image.png';
you can use
render() {
return <img src={process.env.PUBLIC_URL + '/img/logo.png'} />;
}
for more information please refer Adding Assets Outside of the Module System