Question

我最近升级了npm和nodejs（赢得10个64位）。现在，每当我尝试运行gatsby develop时，都会出现以下错误：

$ gatsby develop
success open and validate gatsby-configs - 0.050s
success load plugins - 1.124s
success onPreInit - 0.008s
success initialize cache - 0.025s
success copy gatsby files - 0.224s
success onPreBootstrap - 0.008s
success source and transform nodes - 0.073s
success building schema - 0.195s

 ERROR #85901  GRAPHQL

There was an error in your GraphQL query:

Cannot query field "allMdx" on type "Query".

File: gatsby-node.js:40:5


 ERROR #11321  PLUGIN

"gatsby-node.js" threw an error while running the createPages lifecycle:

Cannot query field "allMdx" on type "Query".

GraphQL request:3:9
2 |       {
3 |         allMdx(sort: { fields: [frontmatter___date], order: DESC }) {
  |         ^
4 |           nodes {

failed createPages - 0.021s
success createPagesStatefully - 0.073s
success onPreExtractQueries - 0.001s
success update schema - 0.016s

 ERROR #85907  GRAPHQL

There was an error in your GraphQL query:

- Unknown field 'allMdx' on type 'Query'. Source: document `CategoriesPage` file: `GraphQL request`

File: src\templates\category.js

failed extract queries from components - 0.251s
success write out requires - 0.062s
success write out redirect data - 0.015s
success Build manifest and related icons - 0.214s
success onPostBootstrap - 0.224s
⠀
info bootstrap finished - 6.022 s
⠀
success run queries - 0.021s - 5/5 243.34/s
⠀
You can now view gatsby-starter-minimal-blog in the browser.
⠀
  http://localhost:8000/
⠀
View GraphiQL, an in-browser IDE, to explore your site's data and schema
⠀
  http://localhost:8000/___graphql
⠀
Note that the development build is not optimized.
To create a production build, use gatsby build
⠀
success Building development bundle - 8.241s

这是我在浏览器（本地主机）中收到的错误：

There was an error in your GraphQL query:

- Unknown field 'allMdx' on type 'Query'. Source: document `IndexQuery` file: `GraphQL request`

File: E:/Development/website/src/templates/post.js

我尝试过的事情：

运行gatsby clean和gatsby build
尝试git fetch，然后尝试git reset --hard HEAD

更新我更改了配置以反映更新的gatsby-plugin-mdx名称。这是我遇到的新错误：

 $ gatsby build
success open and validate gatsby-configs - 0.051s
success load plugins - 4.022s
success onPreInit - 0.010s
success delete html and css files from previous builds - 0.008s
success initialize cache - 0.009s
success copy gatsby files - 0.142s
success onPreBootstrap - 0.011s
success source and transform nodes - 1.523s
success building schema - 0.237s
success createPages - 0.034s
success createPagesStatefully - 0.060s
success onPreExtractQueries - 0.001s
success update schema - 0.036s

 ERROR #85907  GRAPHQL

There was an error in your GraphQL query:

- Unknown field 'code' on type 'Mdx'.

File: src\templates\post.js

failed extract queries from components - 0.286s

我猜这行是指这两行之一（因为它们是唯一带有“ code”的行）：

<PostContent>
            <MDXRenderer>{postNode.code.body}</MDXRenderer>
          </PostContent>

或

mdx(fields: { slug: { eq: $slug } }) {
      code {
        body
      }

这就是我的gatsby-config.js的样子：

const config = require('./config')

const pathPrefix = config.pathPrefix === '/' ? '' : config.pathPrefix

module.exports = {
  pathPrefix: config.pathPrefix,
  siteMetadata: {
    siteUrl: config.siteUrl + pathPrefix,
  },
  plugins: [
    'gatsby-plugin-react-helmet',
    'gatsby-plugin-styled-components',
    'gatsby-plugin-sharp',
    {
      resolve: 'gatsby-source-filesystem',
      options: {
        name: 'post',
        path: `${__dirname}/blog`,
      },
    },
    {
      resolve: 'gatsby-plugin-google-analytics',
      options: {
        trackingId: config.googleAnalyticsID,
      },
    },
    {
      resolve: 'gatsby-plugin-mdx',
      options: {
        gatsbyRemarkPlugins: [
          {
            resolve: 'gatsby-remark-external-links',
            options: {
              target: '_blank',
              rel: 'nofollow noopener noreferrer',
            },
          },
          {
            resolve: 'gatsby-remark-images',
            options: {
              maxWidth: 830,
              quality: 90,
              withWebp: true,
              linkImagesToOriginal: false,
            },
          },
          // TODO: Replace with "mdx-component-autolink-headers"
          {
            resolve: 'gatsby-remark-autolink-headers',
            options: {
              maintainCase: false,
            },
          },
        ],
      },
    },
    'gatsby-plugin-catch-links',
    'gatsby-plugin-sitemap',
    'gatsby-plugin-lodash',
    {
      resolve: 'gatsby-plugin-manifest',
      options: {
        name: config.siteTitleAlt,
        short_name: config.siteTitleManifest,
        description: config.siteDescription,
        start_url: config.pathPrefix,
        background_color: config.backgroundColor,
        theme_color: config.themeColor,
        display: 'standalone',
        icon: config.favicon,
      },
    },
    'gatsby-plugin-offline',
    'gatsby-plugin-netlify',
  ],
}

Answer 1

正如Stuart解释的in his post here一样，mdx中不再有code对象，只有body。

要解决此问题，只需删除posts.js的mdx字段内code{}周围的body块，并从code. <MDXRenderer>{postNode.code.body}</MDXRenderer>部分>

自升级npm和nodejs以来，gatsby development引发allMdx错误

1 个答案: