NextJS 12项目配置babel-plugin-styled-components隐藏displayName报错解决

在TypeScript的Next.js 12项目中，使用以下依赖：

"next": "12",
"babel-plugin-styled-components": "^1.13.2",

原本Styled Components运行正常，现在想要隐藏它的displayName，于是在已有的babel.config.js中添加了额外配置，修改后的配置如下：

module.exports = function (api) {
    return {
        presets: presets,
        plugins: [
            [
                'styled-components',
                {
                    ssr: true,
                },
            ],
            // 新增的配置段
            [
                'babel-plugin-styled-components',
                {
                    namespace: 'my-styled-components-project',
                    displayName: false,
                    fileName: false,
                },
            ],
        ],
    };
};

添加后运行next dev时出现重复插件报错，错误信息如下：

error - ./node_modules/next/dist/client/dev/amp-dev.js
Error: Duplicate plugin/preset detected.
If you'd like to use two separate instances of a plugin,
they need separate names, e.g.

  plugins: [
    ['some-plugin', {}],
    ['some-plugin', {}, 'some unique name'],
  ]

Duplicates detected are:
[
  {
    "alias": "/usr/src/app/node_modules/babel-plugin-styled-components/lib/index.js",
    "options": {
      "ssr": true
    },
    "dirname": "/usr/src/app",
    "ownPass": false,
    "file": {
      "request": "styled-components",
      "resolved": "/usr/src/app/node_modules/babel-plugin-styled-components/lib/index.js"
    }
  },
  {
    "alias": "/usr/src/app/node_modules/babel-plugin-styled-components/lib/index.js",
    "options": {
      "namespace": "my-styled-components-project",
      "displayName": false,
      "fileName": false
    },
    "dirname": "/usr/src/app",
    "ownPass": false,
    "file": {
      "request": "babel-plugin-styled-components",
      "resolved": "/usr/src/app/node_modules/babel-plugin-styled-components/lib/index.js"
    }
  }
]
    at createDescriptors.next (<anonymous>)
    at createPluginDescriptors.next (<anonymous>)
    at plugins.next (<anonymous>)
    at mergeChainOpts.next (<anonymous>)

需要解决这个报错并正确配置以隐藏displayName。

报错原因是重复配置了同一个Babel插件：'styled-components'和'babel-plugin-styled-components'是同一个插件的两种写法（别名），Babel会识别为同一个插件被加载两次，因此抛出重复检测错误。

正确的做法是合并所有配置项到一个插件实例中，删除重复的插件配置段，将原来的ssr: true和新增的displayName: false等选项合并到同一个配置里。

修改后的babel.config.js如下：

module.exports = function (api) {
    return {
        presets: presets,
        plugins: [
            [
                'styled-components', // 也可以用 'babel-plugin-styled-components'，两者等效
                {
                    ssr: true, // 保留原有的SSR配置
                    namespace: 'my-styled-components-project',
                    displayName: false, // 隐藏displayName
                    fileName: false
                },
            ],
        ],
    };
};

这样既不会出现重复插件的报错，同时也能实现隐藏Styled Components的displayName的需求。

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