NextJS 13构建报错：typeof import(...)不满足IEntry约束

核心原因：App Router 不支持类组件作为页面组件 #

Next.js 13的app/目录（App Router）对页面组件有明确的类型约束：页面组件必须是函数组件，其类型PageComponent要求组件是一个接收PageProps参数、返回ReactNode或Promise<ReactNode>的函数。

你导出的Login是基于React.Component的类组件，类组件的类型是typeof React.Component，无法匹配函数组件的调用签名，因此触发了类型不兼容的错误。

类组件与合规页面组件的差异对比 #

你当前的类组件定义：

class Login extends React.Component<{}, {data: any}> {
    constructor(props: any){
        super(props);
        this.state = {
            data: null
        }
    }

    componentDidMount(){
        //some logic
    }

    render(){
        return <h1>Hello World</h1>
    }
}

符合App Router要求的页面组件（函数组件）示例：

'use client'; // 若需要客户端交互，需添加该指令
export default function Login(props: PageProps) {
  // 可使用useEffect替代componentDidMount的逻辑
  useEffect(() => {
    // some logic
  }, []);

  return <h1>Hello World</h1>;
}

补充说明 #

如果是使用Next.js 13的pages/目录（Pages Router），类组件是支持的，但App Router（app/目录）彻底移除了对类组件的支持，所有页面、布局组件都必须使用函数组件。

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