WebpackError：TypeError：无法解构属性答案

【问题标题】：WebpackError: TypeError: Cannot destructure propertyWebpackError：TypeError：无法解构属性
【发布时间】：2020-05-18 10:33:25
【问题描述】：

当我尝试gatsby develop 时，应用程序运行良好。但是，当我尝试gatsby build 时，出现以下错误：

这是我的查询（我在 GraphQL 中对其进行了测试，它正确返回了值）

我正在使用gatsby-plugin-mdx。

我不知道该怎么办。有人知道如何解决它吗？

【问题讨论】：

你试过rm -rf node_modules和npm install了吗？如果您在gatsby develop 中工作但不适用于gatsby build，那么可能存在损坏的包或其他东西。另外，您可以尝试rm -rf public 和rm -rf .cache 并尝试gatsby develop 和gatsby build 看看是否有任何区别。
我已经试过了
很难从您提供的内容中判断出问题所在。如果您可以创建一个最小的可重现示例并将其发布到 GitHub 我可以看看。
最小的可重现示例在此link 中。提前致谢

标签： reactjs gatsby

【解决方案1】：

gatsby-node.js 内的 createPosts 函数中缺少的一件事是您的博客帖子的 path，以便您可以在 blogTemplate.js 内的 GraphQL 查询中使用它。

此外，path 似乎是一个保留属性，因此您可能想要使用其他属性。

// gatsby-node.js

const createPosts = (posts, createPage, blogTempate) => {
  posts.forEach(({ node }, index) => {
    const path = node.frontmatter.path
    createPage({
      path,
      component: blogTemplate,
      context: {
        blogPath: path,
        ...
      }
    })
  })
}

然后，将您的查询更改为以下内容：

// blogTemplate.js

const BlogPost = ({ data }) => {
  // ...
}
export const query = graphql`
  query($blogPath: String) {
    mdx(frontmatter: { path: { eq: $blogPath } }) {
      ...
    }
  }
`

最后，更改gatsby-config.js，使其如下所示：

module.exports = {
  plugins: [
    `gatsby-plugin-mdx`,
    { resolve: `gatsby-source-filesystem`, ... },
    { resolve: `gatsby-plugin-page-creator`, ... }
  ]
}

希望这会有所帮助。

【讨论】：

我按照你的建议做了，但我只是删除了 { resolve: gatsby-source-filesystem, ... } 上的默认属性，因为我必须使用 gatsbyRemarkPlugins 管理一些选项。非常感谢。
@YunetLuisRuíz 哦，好的，知道了，是的，default 属性引起了问题。很高兴你让它工作。