WebPackError: ENOENT: no such file or directory /public/.iconstats.json'

[Notaduck]

I've just installed the gatsby-plugin-favicon but I get this WebpackError: ENOENT: no such file or directory, open '/home/daniel/Projects/personal_blog/public/.iconstats.json' error when I try to build the project?

module.exports = {
    plugins: [
        {
            resolve: `gatsby-plugin-favicon`,
            options: {
                logo: "./src/images/rev4_cropped.png",

                // WebApp Manifest Configuration
                appName: 'Gatsby site',
                appDescription: null,
                developerName: null,
                developerURL: null,
                dir: 'auto',
                lang: 'en-US',
                background: '#fff',
                theme_color: '#fff',
                display: 'standalone',
                orientation: 'any',
                start_url: '/',
                version: '1.0',

                icons: {
                    android: true,
                    appleIcon: true,
                    appleStartup: true,
                    coast: false,
                    favicons: true,
                    firefox: true,
                    opengraph: false,
                    twitter: false,
                    yandex: false,
                    windows: false
                }
            }
        },
        'gatsby-plugin-robots-txt',
        'gatsby-remark-copy-linked-files',
        'gatsby-transformer-sharp',
        'gatsby-plugin-sharp',
        'gatsby-plugin-styled-components',
        {
            resolve: 'gatsby-transformer-remark',
            options: {
                plugins: [
                    'gatsby-remark-katex',
                    {
                        resolve: 'gatsby-remark-images',
                        options: {
                            maxWidth: 1080 
                        }
                    },
                    {
                        resolve: 'gatsby-remark-prismjs',
                        options: {
                            // Class prefix for <pre> tags containing syntax highlighting;
                            // defaults to 'language-' (eg <pre class="language-js">).
                            // If your site loads Prism into the browser at runtime,
                            // (eg for use with libraries like react-live),
                            // you may use this to prevent Prism from re-processing syntax.
                            // This is an uncommon use-case though;
                            // If you're unsure, it's best to use the default value.
                            classPrefix: "language-",
                            // This is used to allow setting a language for inline code
                            // (i.e. single backticks) by creating a separator.
                            // This separator is a string and will do no white-space
                            // stripping.
                            // A suggested value for English speakers is the non-ascii
                            // character '›'.
                            inlineCodeMarker: null,
                            // This lets you set up language aliases.  For example,
                            // setting this to '{ sh: "bash" }' will let you use
                            // the language "sh" which will highlight using the
                            // bash highlighter.
                            aliases: {sh: "bash"},
                        }
                    }
                ]
            }
        },
        'gatsby-plugin-react-helmet',
        'gatsby-plugin-sass',
        {
            resolve: 'gatsby-source-filesystem',
            options: {
                path: `${__dirname}/src/pages`,
                name: 'pages'
            }
        },
        {
            resolve: 'gatsby-source-filesystem',
            options: {
                path: `${__dirname}/src/images`,
                name: 'images'
            }
        },
        {
            resolve: 'gatsby-plugin-eslint',
            options: {
                test: /\.js$|\.jsx$/,
                exclude: /(node_modules|cache|public)/,
                options: {
                    emitWarning: true,
                    failOnError: false
                }
            }
        },
        {
            resolve: `gatsby-plugin-google-analytics`,
            options: {
                trackingId: "UA-xxxxxxxxxxxxxxxxx-2",
                // Puts tracking script in the head instead of the body
                head: true,
                // Setting this parameter is optional
                anonymize: true,
                // Setting this parameter is also optional
                respectDNT: true,
                // Avoids sending pageview hits from custom paths
                exclude: ["/preview/**", "/do-not-track/me/too/"],
            },
        },
        {
            resolve: 'gatsby-plugin-sitemap'
        },
    ],

    siteMetadata: {
        author: 'xxxxxxxxxxxxxxxxx',
        title: 'xxxxxxxxxxxxxxxxx xxxxxxxxxxxxxxxxx',
        name:"google-site-verification",
        content:"Ji_Q-xxxxxxxxxxxxxxxxx-xxxxxxxxxxxxxxxxx",
        siteUrl: "https://xxxxxxxxxxxxxxxxx.xxxxxxxxxxxxxxxxx"
    },
    // pathPrefix: '/personal_blog'
};

[julien1619]

Favicons generation is a two steps process. First, favicons and manifests are generated in the public folder with a .iconstats.json file listing all the needed data that will be appended to the HTML. Then, it appends generated HTML to all HTML files using this file. Gatsby handles when to execute these steps.

It seems that .iconstats.json has not been generated or is not in the right folder. Can you check if you find this file somewhere in the gatsby build folder (public) and if the path where you find it is consistent with the one displayed in the error?

[Notaduck]

I doesn't look like .iconstats.json is in my build dir. find ./ -name ".iconstats.json" didn't find anything

[julien1619]

Can you try clearing cache and public folders from Gatsby?

[Notaduck]

So I did a rm -rf .cache/* and rm -rf .public/* and I do still get the same results

[julien1619]

Are you using Gatsby v2? The last major version of this plugin is only compatible with Gatsby v2.

[rperez2021]

Had the same issue, looked at some other Gatsby Projects I had and I went back to 2.1.1 which doesn't have that issue. @julien1619 Do you know which version was the last one for the current (not V2) version of Gatsby?

[Notaduck]

@julien1619 thanks! That was the issue, I'm currently running version 1.9.277

[Notaduck]

However I think it would be a good idea to make it clear which version that the plugin works with. It looks like 3.1.1 should work with 1.9.277 (see Runkit+npm).

[julien1619]

In fact you should have a warning issued by npm while installing this dependency thanks to the peerDependencies configuration. Do you confirm?

[Notaduck]

I can, I missed that one sry.

[julien1619]

No problem, thank you for the report anyway. I'll check how to quickly improve the information about it.

[Notaduck]

you could just make a required gatsby version in the readme ;) In the matter of fact I think evey gatsby plugin should have that to make it more user friendly

[julien1619]

Indeed, let's keep it simple ^^ An update is coming today, I'll update the Readme in the meantime.

[Notaduck]

Simple is good ;) will the update support v1 ?

[julien1619]

Didn't plan to do so first, but finally it was easier than I thought :) Can you test the develop branch? If it's ok, I'll release it today.

[Notaduck]

yes ofc, but you have to guide me here ;) I haven't installed a dev. version before, how should that be done yarn add gatsby-plugin-favicon@develop can only see 3.1.2 as the latest version

[ToJen]

@julien1619 how do i use this for the latest gatsby and not the alpha version?

-- EDIT alternatively, I used react-helmet and added the link to the favicon there

[julien1619]

@notaduck In fact another user and my colleague tested it and I'm still having a bug because of the way Gatsby was building things on v1. Can't see for now how to fix it.

@ToJen In your package.json you just have to remove the plugin and add it again at the right version.

npm remove gatsby-plugin-favicon
npm install gatsby-plugin-favicon@2.1.1 --save

[aquibyatoo]

gets trough with deleting .cache/* thanks @julien1619