我尝试在不使用cli的情况下创建gatsby项目,以了解cli生成的片段是如何工作的。但我在浏览器上看到以下运行时错误弹出窗口
未处理的运行时错误
在文件中发现一个未处理的运行时错误。请参阅下面的列表以修复此问题:
./.cache/root.js中的函数routehandler出错:21无法读取未定义的属性“provider”
./.cache/root.js:21
19 | // Remove this in v3
20 | const RouteHandler = props => (
> 21 | <BaseContext.Provider
| ^
22 | value={{
23 | baseuri: `/`,
24 | basepath: `/`,
目录结构
├── content
│ └── blog
├── gatsby-config.js
├── package.json
├── package-lock.json
├── pnpm-lock.yaml
├── public
│ ├── page-data
│ │ ├── dev-404-page
│ │ │ └── page-data.json
│ │ └── index
│ │ └── page-data.json
│ ├── render-page.js
│ ├── render-page.js.map
│ └── static
├── src
│ ├── components
│ │ ├── header.js
│ │ ├── index.css
│ │ └── index.js
│ ├── images
│ └── pages
│ ├── blog.js
│ ├── index.js
│ └── page404.js
└── static
下面给出了一些重要的代码文件
package.json
{
"name": "gatsby-from-scratch",
"version": "1.0.0",
"description": "",
"main": "n/a",
"scripts": {
"build": "gatsby build",
"develop": "gatsby develop",
"serve": "gatsby serve",
"clean": "gatsby clean",
"test": "echo \"Error: no test specified\" && exit 1"
},
"author": "",
"dependencies": {
"gatsby": "^3.9.1",
"gatsby-link": "^3.9.0",
"gatsby-plugin-image": "^1.9.0",
"gatsby-plugin-react-helmet": "^4.9.0",
"react": "^17.0.2",
"react-dom": "^17.0.2",
"react-helmet": "^6.1.0"
},
"devDependencies": {
"eslint": "^7.30.0",
"eslint-plugin-react": "^7.24.0",
"prettier": "^2.3.2"
}
}
gatsby-config.js
module.exports = {
siteMetadata: {
title: 'Gatsby Scratch'
},
plugins: ['gatsby-plugin-react-helmet']
}
layout.js
import React from 'react';
import {Helmet} from "react-helmet";
import Header from "./header";
import {graphql} from "gatsby";
const Layout = ({children, data}) => {
if(children == undefined)
return (
<div>
<Helmet title={data.site.siteMetadata.title}
meta={[{name: 'description', content: 'Sample Gatsby website created from scratch without using CLI generator'},
{name: 'keywords', content: 'gatsby, scratch, without CLI'}
]}/>
<Header siteTitle={data.site.siteMetadata.title}/>
<main
style={{
margin: '0 auto',
padding: 0
}
}>{children()}</main>
</div>
)
else
console.log("Empty")
}
export default Layout;
export const query = graphql`
query SiteTitleQuery {
site {
siteMetadata{
title
}
}
}
`
index.js
import React from 'react';
import {Link} from "gatsby";
import Layout from "../components/layout";
const Index = () => {
return (
<Layout>
<h1>Gatsby project from scratch!</h1>
<p>Creating Gatsby project without using CLI to better understand the machenics of generated files.</p>
<Link to="/blog/">Blog</Link>
</Layout>
);
}
export default Index;
我的尝试和他们的观察: gatsby clean
:相同的运行时错误
试图移除 RouteHandler
这给了我一个空白页
我可能错过了一些东西,新的眼睛可能会有所帮助。
1条答案
按热度按时间3bygqnnd1#
我在用
pnpm
对于之前的项目,今天我删除了node_modules
而且yarn install
,然后运行应用程序,所述运行时错误消失。