./.cache/root.js:21 中的函数 RouteHandler 出错

Question

我试图在不使用 CLI 的情况下创建 gatsby 项目，以了解 CLI 生成的片段是如何工作的。但是我在浏览器上收到以下运行时错误弹出窗口

Unhandled Runtime Error

One unhandled runtime error found in your files. See the list below to fix it:

Error in function RouteHandler in ./.cache/root.js:21 Cannot read property 'Provider' of undefined

./.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"
  }
}

盖茨比-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 这给我一个空白页

我可能遗漏了一些东西，新的眼睛可能会有所帮助。

Answer 1

我之前在项目中使用 pnpm，然后今天我删除了 node_modules 并做了 yarn install，然后运行应用程序和提到的运行时错误消失了。

./.cache/root.js:21 中的函数 RouteHandler 出错

Error in function RouteHandler in ./.cache/root.js:21

javascript

runtime-error

reactjs

gatsby