我如何格式化这个 gatsby-config.js 文件以便为 canvas 模块创建一个虚拟节点？

Question

目前，由于我的配置知识不足，我在使用 gatsby 构建我的 HTML 渲染器时遇到了问题。我尝试在网上查找配置示例并阅读文档，但似乎无法在此处获得正确的顺序。



module.exports = {

  exports.onCreateWebpackConfig = ({ stage, loaders, actions }) => {
    if (stage === "build-html" || stage === "develop-html") {
      actions.setWebpackConfig({
        module: {
          rules: [
            {
              test: /canvas/,
              use: loaders.null(),
            },
          ],
        },
        plugins: [
          {
            resolve: "gatsby-theme-portfolio-minimal",
            options: {
              siteUrl: "https://gatsby-starter-portfolio-minimal-theme.netlify.app/", // Used for sitemap generation
              manifestSettings: {
                favicon: "./content/images/favicon.png", // Path is relative to the root
                siteName: "My Minimal Portfolio", // Used in manifest.json
                shortName: "Portfolio", // Used in manifest.json
                startUrl: "/", // Used in manifest.json
                backgroundColor: "#FFFFFF", // Used in manifest.json
                themeColor: "#000000", // Used in manifest.json
                display: "minimal-ui", // Used in manifest.json
              },
              contentDirectory: "./content",
              blogSettings: {
                path: "/blog", // Defines the slug for the blog listing page
                usePathPrefixForArticles: false, // Default true (i.e. path will be /blog/first-article)
              },
              // googleAnalytics: {
              //     trackingId: "UA-XXXXXX-X",
              //     anonymize: true, // Default true
              //     environments: ["production", "development"] // Default ["production"]
              // }
            },
          },
        ]
      })
    }
  }



};

我是不是漏掉了什么地方的逗号？我不断收到此错误。

Error: C:\Users\jakub\Sites\portfolio-minimal\gatsby-config.js:5
    exports.onCreateWebpackConfig = ({ stage, loaders, actions }) => {
           ^
  SyntaxError: Unexpected token '.'

以上错误是由于试图修复此错误。

 ERROR #98123  WEBPACK

Generating SSR bundle failed

Unexpected character '�' (1:2)

File: node_modules\canvas\build\Release\canvas.node:1:2

not finished Building HTML renderer - 8.688s

而 exports.onCreateWebpackConfig 来自 this post

当在 module.exports 之外定义时，它指的是我的第一个错误 #98123。


exports.onCreateWebpackConfig = ({ stage, loaders, actions }) => {
  if (stage === "build-html" || stage === "develop-html") {
    actions.setWebpackConfig({
      module: {
        rules: [
          {
            test: /canvas/,
            use: loaders.null(),
          },
        ],
      },
    })
  }
}

module.exports = {

  plugins: [
    {
      resolve: "gatsby-theme-portfolio-minimal",
      options: {
        siteUrl: "https://gatsby-starter-portfolio-minimal-theme.netlify.app/", // Used for sitemap generation
        manifestSettings: {
          favicon: "./content/images/favicon.png", // Path is relative to the root
          siteName: "My Minimal Portfolio", // Used in manifest.json
          shortName: "Portfolio", // Used in manifest.json
          startUrl: "/", // Used in manifest.json
          backgroundColor: "#FFFFFF", // Used in manifest.json
          themeColor: "#000000", // Used in manifest.json
          display: "minimal-ui", // Used in manifest.json
        },
        contentDirectory: "./content",
        blogSettings: {
          path: "/blog", // Defines the slug for the blog listing page
          usePathPrefixForArticles: false, // Default true (i.e. path will be /blog/first-article)
        },
        // googleAnalytics: {
        //     trackingId: "UA-XXXXXX-X",
        //     anonymize: true, // Default true
        //     environments: ["production", "development"] // Default ["production"]
        // }
      },
    },
  ],
};

Answer 1

您正在混合 gatsby-node.js 和 gatsby-config.js 之间的配置。 webpack 相关的配置必须放在 gatsby-node.js 中，而所有插件相关的东西必须放在 gatsby-config.js 中。您的最终配置应如下所示：

在你的gatsby-node.js中：

exports.onCreateWebpackConfig = ({ stage, loaders, actions }) => {
  if (stage === "build-html" || stage === "develop-html") {
    actions.setWebpackConfig({
      module: {
        rules: [
          {
            test: /canvas/,
            use: loaders.null(),
          },
        ],
      },
    })
  }
}

在你的gatsby-config.js中：

module.exports = {

  plugins: [
    {
      resolve: "gatsby-theme-portfolio-minimal",
      options: {
        siteUrl: "https://gatsby-starter-portfolio-minimal-theme.netlify.app/", // Used for sitemap generation
        manifestSettings: {
          favicon: "./content/images/favicon.png", // Path is relative to the root
          siteName: "My Minimal Portfolio", // Used in manifest.json
          shortName: "Portfolio", // Used in manifest.json
          startUrl: "/", // Used in manifest.json
          backgroundColor: "#FFFFFF", // Used in manifest.json
          themeColor: "#000000", // Used in manifest.json
          display: "minimal-ui", // Used in manifest.json
        },
        contentDirectory: "./content",
        blogSettings: {
          path: "/blog", // Defines the slug for the blog listing page
          usePathPrefixForArticles: false, // Default true (i.e. path will be /blog/first-article)
        },
        // googleAnalytics: {
        //     trackingId: "UA-XXXXXX-X",
        //     anonymize: true, // Default true
        //     environments: ["production", "development"] // Default ["production"]
        // }
      },
    },
  ],
};

我如何格式化这个 gatsby-config.js 文件以便为 canvas 模块创建一个虚拟节点？

How can I format this gatsby-config.js file in order to create a dummy node for a canvas module?

reactjs

config

gatsby