我有一个带有多个页面的 Gatsby 网站。Gatsby develop 正常运行，但一旦尝试构建并准备将其部署到托管，它会失败并显示如下错误：
这可能成为问题吗？我还会发布一些错误和结构以及我的 Gatsby 配置的图片。
但是它又失败了。
此外，在某些页面中，我有请求外部服务以检索一些数据以显示，因为我没有服务器和数据库，所以它应该是一个静态的单页网站，但它变得更多页面和更多要展示的东西。但现在我的唯一关注是修复这个错误并从那里查看。
这是我的gatsby-config.js:
我的 index.js 文件如下：
我还在gatsby-node.js中添加了我使用的外部库的规则：
Truncated Page data information for page...
Building static HTML failed for path "/wallet/WalletPage
我开始认为可能我的 **Pages** 文件夹结构有问题，因为其中包含：
pages/
- about/About.js
- bank/BankPage.js
- partner/Partner.js
- wallet/ Wallet.js
- 等等。这可能成为问题吗？我还会发布一些错误和结构以及我的 Gatsby 配置的图片。
但是它又失败了。
此外，在某些页面中，我有请求外部服务以检索一些数据以显示，因为我没有服务器和数据库，所以它应该是一个静态的单页网站，但它变得更多页面和更多要展示的东西。但现在我的唯一关注是修复这个错误并从那里查看。
这是我的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
}
};
我的 index.js 文件如下：
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;
我还在gatsby-node.js中添加了我使用的外部库的规则：
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(),
}],
},
});
}
};
WebpackError: 元素类型无效：应该是字符串（用于内置组件）或类/函数（用于复合组件），但是却得到了undefined。- jojo2345