NextJS升级SWC后，装饰器搭配export default的正确写法

你的错误是因为新装饰器提案中，直接在export default后跟随的装饰器类属于具名类表达式，类名FollowCTA仅在类定义内部的作用域有效，模块其他地方或组件内部引用该类名时就会触发ReferenceError。

以下是两种可行的解决方式：

方式一：用高阶组件函数调用替代装饰器语法（推荐） #

connect本质是高阶组件，直接用函数调用的写法兼容性更好，且完全避开装饰器提案的语法差异：

import { connect } from 'react-redux';
import { Component } from 'react';

class FollowCTA extends Component {
  // 组件逻辑，可正常使用FollowCTA类名
}

// 先定义类，再传入connect处理后导出
export default connect(mapStateToProps, { followUser, unfollowUser })(FollowCTA);

方式二：坚持使用装饰器语法（需配置SWC支持） #

如果一定要保留装饰器写法，需要先在模块顶层定义并装饰类，再单独导出，这样类名FollowCTA会存在于模块作用域中：

import { connect } from 'react-redux';
import { Component } from 'react';

@connect(mapStateToProps, { followUser, unfollowUser })
class FollowCTA extends Component {
  // 组件逻辑，可正常引用FollowCTA
}

export default FollowCTA;

配置NextJS SWC支持装饰器 #

确保你的next.config.js中启用了SWC装饰器支持（针对新提案版本）：

/** @type {import('next').NextConfig} */
const nextConfig = {
  experimental: {
    swcDecorators: true, // 启用SWC装饰器编译
  },
};

module.exports = nextConfig;

如果需要更精确控制装饰器版本（比如指定2023-05的Stage 3提案），可以配置SWC插件：

const nextConfig = {
  experimental: {
    swcPlugins: [
      ['@swc/plugin-transform-decorators', { version: '2023-05' }],
    ],
  },
};

module.exports = nextConfig;

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