I am converting my create-react-app to Gatsby. To do this, I took my existing project and did npm install gatsby, installed gatsby-cli, and then copied over the changes in project structure from a fresh Gatsby site. Then, I moved my App.js into src/pages/index.js. I ended up deleting the gatsby-config.js I copied from a site created by gatsby new because I didn't know how to install the gatsby-plugin-react-helmet plugin. I don't know if the plugins specified by gatsby-config.js are required to make the site work.
This project implements a circular progress bar using react-circular-progressbar. When attempting to build my app using gatsby build, I get this error:
Unknown error from PostCSS plugin. Your current PostCSS version is 6.0.23, but autoprefixer uses 7.0.26. Perhaps this is the source of the error below.
ERROR #98123 WEBPACK
Generating development JavaScript bundle failed
Browser queries must be an array or string. Got object.
File: node_modules/react-circular-progressbar/dist/styles.css
I updated PostCSS to 7.0.26 using npm i postcss but it still says I'm on the old version.
You can see this error if you checkout this link.
I'm not sure what a browser query is, but I checked the styles.css file referenced in the error and the only things I am seeing are class styles and then this browser specific style:
-webkit-transition: stroke-dashoffset 0.5s ease 0s; Deleting this line doesn't fix the issue.
gatsby-config.js is one of the essential Gatsby configuration files. Any debugging without addings this file back is bound to be hopeless.
Copy the empty gatsby-config.js from the official documentation and add the PostCSS plugin as described in the documentation. Rerun npm or yarn. Run gatsby clean and then gatsby develop.
The error is most likely caused by a missing source or configuration files that a POSTCSS plugin should provide and solve easily.
Does your site work now?