javascript - Gatsby - "value" must contain at least one of [icon, icons]

Question

When I run gatsby develop in console this error shows up:

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

I just cloned a starter github branch here and install all node modules. Keep in mind, that I am new to react/gatsby. I searched on the web for this error but did not find any helpful info.

This is my 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`,
  ],
}

This is my 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 <[email protected]>",
  "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"
  }
}

Any help would be appriciated! :)

Answer 1

You have two instances of the gatsby-plufin manifest in your gatsby-config.js. Delete one of them:

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`,
  ],
}

If you don't want to use an icon, since it's not a mandatory property you can delete it. However, if you are using it, you must provide a valid icon, not a folder:

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