WebPackError：TypeError：无法读取未定义的属性（读取＆＃x27;组件----- src-templates-category-js＆＃x27;）

Question

我正在使用gatsby和我的gatbsy.node-js文件，我正在创建动态页面。

当我运行Gatsby开发时，这很好，但是当我进行盖茨比构建或在Netlify上时，我会在下面收到Errror消息，并且我认为它必须对我的模板的路径做一些事情，这是因为我的计算机是本地的盖茨比（Gatsby Build）想要另一种类型的路径？

我还可以在webpackerror中看到它从（组件--- src-templates-category-js）读取而不是没有连字符的.js，这是正确的吗？

如果我用 require.resolve and path。从“路径”溶解，我会得到相同的错误）

const { slash } = require('gatsby-core-utils')
const categoryTemplate = require.resolve(`./src/templates/category.js`)

exports.createPages = async ({ graphql, actions }) => {
  const { createPage } = actions

  const queryCategories = await graphql(`
    query AllCategories {
      allWpProductCategory {
        nodes {
          id
          slug
        }
      }
    }
`)    
queryCategories.data.allWpProductCategory.nodes.forEach(node => {
    createPage({
      path: `/product-category/${node.slug}`,
      component: slash( categoryTemplate ),
      context: {

        category: node.id,
      },
    })
})

ERROR 

Page data from page-data.json for the failed page "/product-category/chocolate": {
  "componentChunkName": "component---src-templates-category-js",
  "path": "/product-category/chocolate",
  "result": {
    "pageContext": {
      "category": "dGVybTo1OQ=="
    }
  },
  "staticQueryHashes": [
    "3971950002"
  ]
}

failed Building static HTML for pages - 4.746s                                                                                                              
                                                                                                                                                            
 ERROR #95313 

Building static HTML failed for path "/product-category/chocolate"

WebpackError: TypeError: Cannot read properties of undefined (reading 'component---src-templates-category-js')

Answer 1

当我运行盖茨比开发时，这很好，但是当我做盖茨比
构建或在Netlify上，我在下面收到错误消息，然后我认为
必须通过通往我的模板的路径做点事

，只要Netlify抛出gatsby build，因此，如果构建在本地失败，则可能会在Netlify中失败。

关于问题，我不知道您为什么使用slash（const {slash} = require（'gatsby-core-utils'））。您是否尝试过一些简单的东西：

const path = require("path")

exports.createPages = async ({ graphql, actions }) => {
  const { createPage } = actions;
  const categoryTemplate = path.resolve(`./src/templates/category.js`);

  const queryCategories = await graphql(`
    query AllCategories {
      allWpProductCategory {
        nodes {
          id
          slug
        }
      }
    }
  `);

  queryCategories.data.allWpProductCategory.nodes.forEach((node) => {
    createPage({
      path: `/product-category/${node.slug}`,
      component: categoryTemplate,
      context: {
        category: node.id,
      },
    });
  });
};

请注意删除slash以及path在path.resolve中的使用（`./src/templates/category.js `）。