I have a gatsby site with multiple pages. Gatsby develop is working , but once i try to build it and prepare it for deploy to hosting, it fails with the error :
Truncated Page data information for page...
Building static HTML failed for path "/wallet/WalletPage
I am beginning to think that maybe my **Pages ** folder structure is wrong , because in it i have:
pages/
- about/About.js
- bank/BankPage.js
- partner/Partner.js
- wallet/ Wallet.js
- etc.
Can that be a problem ? I will post some picures as well of the error and the structure and my gatsby config.
At first i thought it is because i had other pages in that folder that i no longer use and they are not in the Router , so i cleaned them up from everywhere : cache etc.
But the it failed again.
Also in some of the pages i have requests to external services to retrieve some data to display, as i do not have a server and database , it was supposed to be a static one page site but it grew to more pages and more things to display. But for now my only concern is to fix this error and see from there
Here is my gatsby-config.js :
module.exports = {
siteMetadata: {
title: `changex`,
siteUrl: `https://www.changex.io`,
description: `Non-custodial DeFi wallet with integrated banking and Visa Debit Card. Buy crypto, invest, and grow your wealth on easy mode.`
},
plugins: [{
resolve: 'gatsby-plugin-google-analytics',
options: {
"trackingId": "UA-221374557-1"
}
},
"gatsby-plugin-image",
"gatsby-plugin-react-helmet",
"gatsby-plugin-sitemap",
{
resolve: 'gatsby-plugin-manifest',
options: {
"icon": "src/assets/images/icon.png"
}
},
"gatsby-plugin-mdx",
"gatsby-transformer-remark",
"gatsby-plugin-sharp",
"gatsby-transformer-sharp", {
resolve: 'gatsby-source-filesystem',
options: {
"name": "images",
"path": "static/images/"
},
__key: "images"
}, {
resolve: 'gatsby-source-filesystem',
options: {
"name": "pages",
"path": "./src/pages/"
},
__key: "pages"
}],
flags: {
DEV_SSR: true
}
};
And my index.js file :
import * as React from "react";
import {useEffect, useLayoutEffect} from "react";
import { HashRouter as Router, Routes, Route, useLocation} from "react-router-dom";
import { fetchApy, fetchPrice } from "../api/fetch";
import CookieConsentModal from "../Utils/CookieConsent";
import MetaDecorator from "../Utils/MetaDecorator";
import Home from "../components/Home/Home";
import Navigation from "../components/Navbar/Nav";
import Footer from "../components/Footer";
import NotFoundPage from "./404";
import BankPage from "./bank/BankPage";
import WealthPage from "./wealth/WealthPage";
import TokenPage from "./Token/TokenPage";
import About from "./about/About";
import WalletPage from "./wallet/WalletPage";
import Tokens from "./Token/Tokens";
import Partner from "./partner/Partner";
import content from "../../static/assets/content/content.json";
import {ScrollToTop} from "../Utils/ScrollToTop";
const imageUrl = "/assets/images/OG.jpeg";
const IndexPage = () => {
useEffect(() => {
fetchPrice().catch((err) => {
console.log(`Fetch Price failed ${err}`);
});
fetchApy().catch((err) => {
console.log(`Fetch Apy failed, ${err}`);
});
setTimeout(fetchPrice, fetchApy, 30000);
}, []);
return (
<Router>
<CookieConsentModal />
<MetaDecorator
description={content.pageDescription}
title={content.pageTitle}
imageAlt={content.metaImageAlt}
imageUrl={imageUrl}
/>
<Navigation />
<main className="pages">
<ScrollToTop>
<Routes>
<Route path="/" element={<Home />} />
<Route path="/bank" element={<BankPage />} />
<Route path="/wealth" element={<WealthPage />} />
<Route path="/wallet" element={<WalletPage />} />
<Route path="/token-page" element={<TokenPage />} />
<Route path="/supported-tokens" element={<Tokens />} />
<Route path="/about" element={<About />} />
<Route path="/partner" element={<Partner />} />
<Route path="*" element={<NotFoundPage />} />
</Routes>
</ScrollToTop>
</main>
<Footer />
</Router>
);
};
export default IndexPage;
I have also added to gatsby-node.js rules for outside libraries which i use :
exports.onCreateWebpackConfig = ({ stage, loaders, actions }) => {
if (stage === "build-html" || stage === "develop-html") {
actions.setWebpackConfig({
module: {
rules: [
{
test: /react-multi-carousel/,
use: loaders.null(),
},
{
test: /antd/,
use: loaders.null(),
},
{
test: /react-scroll/,
use: loaders.null(),
},
{
test: /@sendgrid/,
use: loaders.null(),
},
{
test: /animate.css/,
use: loaders.null(),
},
{
test: /axios/,
use: loaders.null(),
},
{
test: /emailjs-com/,
use: loaders.null(),
},
{
test: /@ant-design/,
use: loaders.null(),
},
{
test: /scrollable-component/,
use: loaders.null(),
}],
},
});
}
};
