函数routehandler在./.cache/root.js:21中出错

8xiog9wr  于 2021-09-13  发布在  Java
关注(0)|答案(1)|浏览(343)

我尝试在不使用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 这给了我一个空白页
我可能错过了一些东西,新的眼睛可能会有所帮助。

3bygqnnd

3bygqnnd1#

我在用 pnpm 对于之前的项目,今天我删除了 node_modules 而且 yarn install ,然后运行应用程序,所述运行时错误消失。

相关问题