Gatsby - “值”必须至少包含 [icon, icons] 之一

Posted 2023-03-07

【中文标题】Gatsby - “值”必须至少包含 [icon, icons] 之一

【英文标题】：Gatsby - "value" must contain at least one of [icon, icons]

【发布时间】：2021-04-16 05:51:37

【问题描述】：

当我在控制台中运行 gatsby develop 时，会出现此错误：

ERROR #11331  PLUGIN
Invalid plugin options for "gatsby-plugin-manifest":
- "value" must contain at least one of [icon, icons]

我刚刚克隆了一个入门 github 分支 here 并安装了所有节点模块。请记住，我是新来的反应/盖茨比。 我在网上搜索了这个错误，但没有找到任何有用的信息。

这是我的 gatsby-config.js：

module.exports = 
  siteMetadata: 
    title: `Gatsby Default Starter`,
    description: `Kick off your next, great Gatsby project with this default starter. This barebones starter ships with the main Gatsby configuration files you might need.`,
    author: `@gatsbyjs`,
  ,
  plugins: [
    `gatsby-plugin-feed`,
    
      resolve: `gatsby-plugin-manifest`,
      options: 
        name: `Gatsby Starter Blog`,
        short_name: `GatsbyJS`,
        start_url: `/`,
        background_color: `#ffffff`,
        theme_color: `#663399`,
        display: `minimal-ui`,
        icon: `$__dirname/src/assets`,
      ,
    ,  
    `gatsby-plugin-react-helmet`,
    
      resolve: `gatsby-source-filesystem`,
      options: 
        name: `assets`,
        path: `$__dirname/src/assets`,
      ,
    ,
    `gatsby-transformer-sharp`,
    `gatsby-plugin-sharp`,
    
      resolve: `gatsby-plugin-manifest`,
      options: 
        name: `gatsby-starter-default`,
        short_name: `starter`,
        start_url: `/`,
        background_color: `#663399`,
        theme_color: `#663399`,
        display: `minimal-ui`,
      ,
    ,
    `gatsby-plugin-styled-components`,
    // this (optional) plugin enables Progressive Web App + Offline functionality
    // To learn more, visit: https://gatsby.dev/offline
    // `gatsby-plugin-offline`,
  ],

这是我的 package.json ：

  "name": "gatsby-starter-default",
  "private": true,
  "description": "A simple starter to get up and developing quickly with Gatsby",
  "version": "0.1.0",
  "author": "Kyle Mathews <[e-mail]>",
  "dependencies": 
    "babel-plugin-styled-components": "^1.10.7",
    "framer-motion": "^1.10.2",
    "gatsby": "^2.19.45",
    "gatsby-image": "^2.2.44",
    "gatsby-plugin-feed": "^2.11.0",
    "gatsby-plugin-manifest": "^2.10.0",
    "gatsby-plugin-offline": "^3.0.41",
    "gatsby-plugin-react-helmet": "^3.1.24",
    "gatsby-plugin-sharp": "^2.4.13",
    "gatsby-plugin-styled-components": "^3.2.1",
    "gatsby-source-filesystem": "^2.1.56",
    "gatsby-transformer-sharp": "^2.3.19",
    "prop-types": "^15.7.2",
    "react": "^16.12.0",
    "react-canvas": "^1.3.0",
    "react-dom": "^16.12.0",
    "react-helmet": "^5.2.1",
    "react-intersection-observer": "^8.26.1",
    "styled-components": "^5.0.1",
    "styled-normalize": "^8.0.7"
  ,
  "devDependencies": 
    "prettier": "^1.19.1"
  ,
  "keywords": [
    "gatsby"
  ],
  "license": "MIT",
  "scripts": 
    "build": "gatsby build",
    "develop": "gatsby develop",
    "format": "prettier --write \"**/*.js,jsx,json,md\"",
    "start": "npm run develop",
    "serve": "gatsby serve",
    "clean": "gatsby clean",
    "test": "echo \"Write tests! -> https://gatsby.dev/unit-testing\" && exit 1"
  ,
  "repository": 
    "type": "git",
    "url": "https://github.com/gatsbyjs/gatsby-starter-default"
  ,
  "bugs": 
    "url": "https://github.com/gatsbyjs/gatsby/issues"
  

如有任何帮助，我们将不胜感激！ :)

【参考方案1】：

您的gatsby-config.js 中有两个gatsby-plufin manifest 实例。删除其中一个：

module.exports = 
  siteMetadata: 
    title: `Gatsby Default Starter`,
    description: `Kick off your next, great Gatsby project with this default starter. This barebones starter ships with the main Gatsby configuration files you might need.`,
    author: `@gatsbyjs`,
  ,
  plugins: [
    `gatsby-plugin-feed`,  
    `gatsby-plugin-react-helmet`,
    
      resolve: `gatsby-source-filesystem`,
      options: 
        name: `assets`,
        path: `$__dirname/src/assets`,
      ,
    ,
    `gatsby-transformer-sharp`,
    `gatsby-plugin-sharp`,
    
      resolve: `gatsby-plugin-manifest`,
      options: 
        name: `gatsby-starter-default`,
        short_name: `starter`,
        start_url: `/`,
        background_color: `#663399`,
        theme_color: `#663399`,
        display: `minimal-ui`,
      ,
    ,
    `gatsby-plugin-styled-components`,
    // this (optional) plugin enables Progressive Web App + Offline functionality
    // To learn more, visit: https://gatsby.dev/offline
    // `gatsby-plugin-offline`,
  ],

如果您不想使用图标，因为它不是强制性属性，您可以将其删除。但是，如果您使用它，则必须提供有效的图标，而不是文件夹：

icon: `$__dirname/src/assets/iconName.png`,

【讨论】：

icon: `$__dirname/src/assets`, 这不是强制性属性。如果您没有任何图标，则可以将其删除，但您不能提供文件夹而不是有效图标。选择两个实例之一，但如果您添加了 icon，请提供它，如果没有，请删除它。

此属性已在我的 gatsby-config.js 文件中删除，但仍然给我同样的错误。

刚刚将icon: 'src/assets/img/website-icon.png', 添加回gatsby-config.js。作品。不过现在不想要。对我来说似乎是强制性的。奇怪。

【参考方案2】：

  icon: `$__dirname/src/assets`,

上面的行必须指向一个文件，而不是一个文件夹

https://www.gatsbyjs.com/plugins/gatsby-plugin-manifest/#hybrid-mode-configuration

 module.exports = 
  plugins: [
    
      resolve: `gatsby-plugin-manifest`,
      options: 
        name: `GatsbyJS`,
        short_name: `GatsbyJS`,
        start_url: `/`,
        background_color: `#f7f0eb`,
        theme_color: `#a2466c`,
        display: `standalone`,
 icon: `src/images/icon.png`, // This path is relative to the root of the site.
      icons: [
        
          src: `/favicons/android-chrome-192x192.png`,
          sizes: `192x192`,
          type: `image/png`,
        ,
        
          src: `/favicons/android-chrome-512x512.png`,
          sizes: `512x512`,
          type: `image/png`,
        ,
      ], // Add or remove icon sizes as desired
      ,
    ,
  ],

【讨论】：

非常感谢！我找到了这段代码，但不知道放在哪里。