将create-react-app转换为Gatsby后发生错误。 WEBPACK:浏览器查询必须是数组或字符串。得到对象

问题描述 投票:2回答:1

我正在将我的create-react-app转换为Gatsby。为此,我采用了现有项目,并做了npm install gatsby,安装了gatsby-cli,然后从新的Gatsby站点复制了项目结构的更改。然后,我将App.js移至src / pages / index.js。我最终删除了从gatsby new创建的站点复制的gatsby-config.js,因为我不知道如何安装gatsby-plugin-react-helmet插件。我不知道gatsby-config.js指定的插件是否需要使网站正常工作。

该项目使用react-circular-progressbar实现了圆形进度条。尝试使用gatsby build构建我的应用时,出现此错误:


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

我使用npm i postcss将PostCSS更新为7.0.26,但仍然显示我使用的是旧版本。

如果签出此link,则会看到此错误。我不确定浏览器查询是什么,但是我检查了错误中引用的styles.css文件,唯一看到的是类样式,然后是该浏览器特定的样式:-webkit-transition: stroke-dashoffset 0.5s ease 0s;删除此行不能解决问题。

javascript reactjs webpack gatsby postcss
1个回答
3
投票

gatsby-config.js是必不可少的Gatsby configuration files之一。没有添加此文件的任何调试都注定是无望的。

gatsby-config.js复制空的official documentation,然后按照documentation中的说明添加PostCSS插件。重新运行npm或yarn。运行gatsby clean,然后运行gatsby develop

该错误很可能是由于缺少POSTCSS插件应提供并易于解决的源文件或配置文件引起的。

您的网站现在可以正常工作吗?

© www.soinside.com 2019 - 2024. All rights reserved.