Reactjs SVG通过svgr进行反应失败

在网页包配置中包含以下内容：

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

和一个简单的导入组件

import Globe from './Globe.svg'

(...)
<div>
  <Globe />
</div>

import Globe from./Globe.svg'
(...)

导致以下错误，导致整个页面渲染的硬停止

Warning: <data:image/svg+xml;base64,ZnVuY3Rpb24gX2V... (more here)0.=87…
...BkZWZhdWx0IFN2Z0NvbXBvbmVudDs= /> is using incorrect casing. 
Use PascalCase for React components, or lowercase for HTML elements.

警告：正在使用不正确的外壳。
对于React组件使用PascalCase，对于HTML元素使用小写。

这似乎是已知的问题

我建议包括

url加载器

在您的webpack.config.js中：

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

在代码中：

import starUrl, { ReactComponent as Star } from './star.svg' 
const App = () => (
  <div>
    <img src={starUrl} alt="star" />
    <Star />
  </div>
)

import starUrl，{ReactComponent as Star}来自'/Star.svg'
常量应用=（）=>(
)

谢谢我也偶然发现了这个。当我尝试使用{ReactComponent as Star}时，得到的结果是“undefined”，并伴有一个错误：您可能忘记了从定义组件的文件中导出组件，或者您可能混淆了默认导入和命名导入。您能将文件svg放入codesanbox吗？所以我们可以复制它。
{ReactComponent as Something}
不是特定于
createreactapp
？我在Next.js项目中也有同样的错误。不，这只是
create-react-app
webpack的配置问题。你找到解决方案了吗？