警告：无效的属性名称：`'data-*'`答案

【问题标题】：Warning: Invalid attribute name: `'data-*'`警告：无效的属性名称：`'data-*'`
【发布时间】：2021-10-07 05:39:04
【问题描述】：

我正在尝试使用 babel-plugin-inline-react-svg 在 NEXT.js 中导入 svg 文件。

按照所有说明操作，它工作正常。

// .babelrc
{
  "presets": ["next/babel"],
  "plugins": [
    ["styled-components", { "ssr": true }],
    "inline-react-svg"
  ]
}

// image.tsx

import styled from 'styled-components';
import BackgroundImage from '../public/assets/img.svg';
export const WhyChooseUsSection = () => {
    return <>
                <div className="background">
                    <BackgroundImage/>
                </div>
                <style jsx>{`
                    div {
                        position: relative;
                        width: 100%;
                    }
                `}</style>
            </>
}

// next.config.js
const withImages = require('next-images')
module.exports = withImages()

但它会出现警告。

Warning: Invalid attribute name: `'data-name'`

这是因为打字稿吗？我该如何解决？

【问题讨论】：

这个警告发生在哪里？我在您发布的代码中看不到任何名为 data-name 的属性。我猜它存在于您的 SVG 文件中。您可以检查一下并将您的next.config.js 添加到您的问题中吗？
是的。 SVG 文件中有data-name 属性。这是一个很大的文件，所以我不能在这里写。
@brc-dd 我使用了next-images。我可以一起使用吗？
是的，它们可以一起使用。虽然我猜next-images 在某种程度上干扰了babel-plugin-inline-react-svg，因为问题是fixed 与后者。您可以尝试编辑您的next.config.js 以从next-images 中排除svg 文件吗？这是documentation。如果这也不起作用，请尝试在您的 babelrc 中设置 inline-react-svg 的选项：github.com/airbnb/babel-plugin-inline-react-svg#options
那么首先你根本不需要next-images。其次，尝试配置 webpack，因为可能 next.js 新的静态导入功能会导致此问题。安装相关软件包后，更改您的next.config.js，如此答案中所述：stackoverflow.com/a/67641345/11613622。

标签： reactjs typescript svg next.js react-typescript

【解决方案1】：

我遇到了类似的问题，并且能够通过在我的 .babelrc 文件中更新 plugins 来解决。我更新了它以匹配 babel-plugin-inline-react-svg README 的“选项”部分中列出的内容。

{
  "plugins": [
    [
      "inline-react-svg",
      {
        "svgo": {
          "plugins": [
            {
              "name": "removeAttrs", 
              "params": { "attrs": "(data-name)" }
            },
            "cleanupIDs"
          ]
        }
      }
    ]
  ]
}

【讨论】：