使用create-react-app和svgr时出现了webpack错误

。create-react-app是一个用于快速创建React应用程序的脚手架工具，而svgr是一个将SVG图标转换为React组件的工具。当在使用create-react-app创建的项目中使用svgr时，可能会遇到webpack错误。

这种错误通常是由于webpack配置的问题导致的。create-react-app隐藏了webpack配置，因此我们无法直接修改它。但是，我们可以通过eject命令将配置暴露出来，以便进行自定义。

要解决这个问题，可以按照以下步骤操作：

确保你已经安装了create-react-app和svgr。可以使用以下命令进行安装：

npx create-react-app my-app
npm install @svgr/cli --save-dev

cd my-app

使用eject命令将webpack配置暴露出来：

npm run eject

这个命令会生成一个config文件夹，其中包含了webpack的配置文件。

打开config文件夹中的webpack.config.js文件，找到module.exports对象中的rules属性。在rules数组中添加以下配置：

{
  test: /\.svg$/,
  use: ['@svgr/webpack'],
}

这个配置告诉webpack在处理SVG文件时使用svgr-loader。

保存文件并重新启动开发服务器：

npm start

现在，你应该能够正常使用create-react-app和svgr，而不会再遇到webpack错误。

推荐的腾讯云相关产品：腾讯云云开发（CloudBase）是一款全栈云原生应用开发平台，提供了丰富的云端资源和工具，可帮助开发者快速构建和部署应用。腾讯云云开发支持前端开发、后端开发、数据库、存储等多个领域，适用于各种应用场景。了解更多信息，请访问腾讯云云开发官网：https://cloud.tencent.com/product/tcb