时间戳

首页 > 解决方案 > 尝试在 gatsby-node 中创建页面时，我收到此构建错误

reactjs - 尝试在 gatsby-node 中创建页面时，我收到此构建错误

问题描述

 ERROR #11321  PLUGIN

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

Cannot read property 'replace' of undefined

  25 |   const { createNodeField } = actions;
  26 |   if (node.internal.type === 'MarkdownRemark') {
> 27 |     const slug = createFilePath({ node, getNode, basePath: 'content' });
     |                  ^
  28 |     createNodeField({
  29 |       node,
  30 |       name: 'slug',

File: gatsby-node.js:27:18



  TypeError: Cannot read property 'replace' of undefined

  - path.js:54 slash
    [netcreative0]/[gatsby-core-utils]/dist/path.js:54:15

  - create-file-path.js:41 module.exports
    [netcreative0]/[gatsby-source-filesystem]/create-file-path.js:41:61

  - gatsby-node.js:27 Object.exports.onCreateNode
    C:/code/netcreative0/gatsby-node.js:27:18

  - api-runner-node.js:247 runAPI
    [netcreative0]/[gatsby]/dist/utils/api-runner-node.js:247:41

  - api-runner-node.js:387 resolve
    [netcreative0]/[gatsby]/dist/utils/api-runner-node.js:387:13

  - new Promise

  - api-runner-node.js:386 runPlugin
    [netcreative0]/[gatsby]/dist/utils/api-runner-node.js:386:10

  - api-runner-node.js:340 module.exports
    [netcreative0]/[gatsby]/dist/utils/api-runner-node.js:340:24

  - next_tick.js:68 process._tickCallback
    internal/process/next_tick.js:68:7

这是该文件中的所有代码。我找到了这个链接https://github.com/datocms/gatsby-source-datocms/issues/52但它似乎没有帮助删除getNode。在路径插件中，是这个斜线。我注意到当我 console.log 时路径未定义，但我不知道该怎么做。

**function slash(path) {
  const isExtendedLengthPath = /^\\\\\?\\/.test(path);

  if (isExtendedLengthPath) {
    return path;
  }

  return  path.replace(/\\/g, `/`);
}**

const path = require('path');
const DirectoryNamedWebpackPlugin = require('directory-named-webpack-plugin');
const { createFilePath } = require('gatsby-source-filesystem');

exports.onCreateWebpackConfig = ({
  stage,
  getConfig,
  rules,
  loaders,
  actions,
}) => {
  actions.setWebpackConfig({
    resolve: {
      modules: [path.resolve(__dirname, 'src'), 'node_modules'],
      plugins: [
        new DirectoryNamedWebpackPlugin({
          exclude: /node_modules/,
        }),
      ],
    },
  });
};

exports.onCreateNode = ({ node, getNode, actions }) => {
  const { createNodeField } = actions
  if (node.internal.type === 'MarkdownRemark') {
    const slug = createFilePath({ node, getNode, basePath: 'slugs' });
    console.log(slug);
    createNodeField({
      node,
      name: `slug`,
      value: slug,
    });
  }
};

我的代码的后半部分如下所示：

exports.createPages = async ({ graphql, actions }) => {
  const { createPage } = actions;
  const result = await graphql(`
    query {
      allMarkdownRemark {
        edges {
          node {
            fields {
              slug
            }
          }
        }
      }
    }
  `)
  result.data.allMarkdownRemark.edges.forEach(({ node }) => {
    console.log(node)
    createPage({
      path: node.fields ? node.fields.slug : '',
      component: path.resolve(`./src/template/project.js`),
      context: {
        // Data passed to context is available
        // in page queries as GraphQL variables.
        slug: node.fields ? node.fields.slug : '',
      },
    })
  });
}

最后一个字段为 null 并引发错误。不知道为什么它甚至在那里？我可以很容易地设置一个条件，但默认值是什么？有什么建议么？见下文

{ fields: { slug: '/about/content/' } }
{ fields: { slug: '/home/intro/' } }
{ fields: { slug: '/slugs/goldparent/' } }
{ fields: { slug: '/slugs/ipadmaster/' } }
{ fields: null }

标签： reactjsgatsby

解决方案

删除内容丰富的插件后，我能够看到更有用的错误消息。创建新页面时 .md 文件中缺少一些图像，因此在我的模板页面的这一行中出现错误

data.frontmatter.featuredImage.childImageSharp.fluid <-

我在图像标签中添加了一个三元条件，然后构建了它

<Img
          style={{ width: '70%' }}
          fluid={
            data.frontmatter.featuredImage
              ? data.frontmatter.featuredImage.childImageSharp.fluid
              : {}
          }
          alt="Large Image"
        />

推荐阅读