如何抑制Next.js中React化SVG的defaultProps移除警告？

问题原因 #

你看到的警告来自Next.js默认使用的@svgr/webpack加载器——它会把导入的SVG文件转换为React函数组件，并且自动为SVG上的默认属性（比如aria-hidden="true"、focusable="false"）生成defaultProps。

另外警告里的GlobeInline这类组件名，是加载器将文件名Globe.inline.svg转换为驼峰式组件名的结果（把文件名中的.替换为驼峰命名），实际对应你导入的Globe组件。

React现在对函数组件的defaultProps发出警告，是因为该特性会在未来大版本中移除，官方推荐使用JavaScript默认参数替代。

修复/抑制警告的方法 #

1. 彻底修复（从根源消除警告） #

通过自定义SVGR配置，禁用自动生成defaultProps的行为：
在项目根目录的next.config.js中修改webpack配置：

module.exports = {
  webpack(config) {
    // 针对inline.svg后缀的文件配置SVGR
    config.module.rules.push({
      test: /\.inline\.svg$/,
      use: [
        {
          loader: '@svgr/webpack',
          options: {
            defaultProps: false, // 关闭自动生成defaultProps
          },
        },
      ],
    });
    return config;
  },
};

修改后重启开发服务器，警告就会消失——加载器转换SVG时不再添加defaultProps，而是直接把默认属性写在JSX里。

2. 临时抑制警告（快速调试用） #

如果暂时不想修改配置，可在_app.js/_app.tsx中拦截特定警告：

import { useEffect } from 'react';

function MyApp({ Component, pageProps }) {
  useEffect(() => {
    const originalError = console.error;
    console.error = (...args) => {
      // 过滤defaultProps相关警告
      if (typeof args[0] === 'string' && args[0].includes('Support for defaultProps will be removed')) {
        return;
      }
      originalError(...args);
    };
    // 组件卸载时恢复原console.error
    return () => {
      console.error = originalError;
    };
  }, []);

  return <Component {...pageProps} />;
}

export default MyApp;

注意：这种方法只是隐藏警告，并未解决本质问题，适合临时调试场景。

内容的提问来源于stack exchange，提问作者mikemaccana