Reactjs 为什么IDE在导入SVG文件用作React组件时显示错误？

我尝试使用SVG图标作为带有

svgr

一切正常。我可以将iPort SVG和svgr完美地转换为组件

但是，当我像下面这样导入svg时，我的IDEWebStorm仍然向我显示错误

我也在使用typescript和nextjs

真正的问题是什么？这仅仅是由IDE引起的吗？或者我应该设置其他选项

这是我的配置文件

tsconfig.json next.config.js 没有babelrc，因为我使用的是nextjs提供的默认babel设置

---

提前谢谢

我自己找到的。它是由typescript引起的。我必须声明

.svg

我在根目录上键入了.d.ts文件

declare module '*.svg' {
  import * as React from 'react';

  export const ReactComponent: React.FunctionComponent<React.SVGProps<SVGSVGElement>>;

  const src: string;
  export default src;
}

声明模块'*.svg'{
从“React”导入*作为React；
export const ReactComponent:React.FunctionComponent；
const src:string；
导出默认src；
}

IDE不再显示错误

module.exports = {
  webpack: (config, { buildId, dev, isServer, defaultLoaders, webpack }) => {
    // Note: we provide webpack above so you should not `require` it
    // Perform customizations to webpack config
    // Important: return the modified config
    config.plugins.push(new webpack.IgnorePlugin(/\/__tests__\//))

    config.module.rules.push({
      test: /\.svg$/,
      use: [{
        loader: '@svgr/webpack',
        options: {
          svgoConfig: {
            plugins: {
              removeViewBox: false
            }
          }
        }
      }],
    })
    return config
  },
  webpackDevMiddleware: (config) => {
    // Perform customizations to webpack dev middleware config
    // Important: return the modified config
    return config
  },
}

declare module '*.svg' {
  import * as React from 'react';

  export const ReactComponent: React.FunctionComponent<React.SVGProps<SVGSVGElement>>;

  const src: string;
  export default src;
}