Typescript 默认导出不是页面“中的React组件”/&引用；对于带有gts的Next.js

我将Next.js与TypeScript一起使用，并对其进行配置

该配置通过“无默认导出”选项禁止默认导出

如果索引页导出没有默认声明的类，Next.js将导致错误

我想知道Next.js中的页面文件必须有默认导出，否则我的代码就错了

错误日志

tsconfig.json

{
  "extends": "./node_modules/gts/tsconfig-google.json",
  "compilerOptions": {
    "rootDir": ".",
    "outDir": "build",
    "jsx": "preserve",
    "allowJs": true,
    "skipLibCheck": true,
    "noEmit": true,
    "esModuleInterop": true,
    "module": "esnext",
    "target": "esnext",
    "moduleResolution": "node",
    "resolveJsonModule": true,
    "baseUrl": ".",
    "paths": {
      "@components/*": [
        "./src/components/*"
      ]
    },
    "isolatedModules": true
  },
  "include": [
    "pages/**/*.tsx",
    "src/**/*.tsx",
    "test/**/*.tsx"
  ],
}

---

请尝试使用索引页面作为默认导出

import styled from 'styled-components';
import { Breadcrumb, Icon, Row, Col, Layout, Card, Carousel, Menu } from 'antd';
import Link from 'next/link';
import React from 'react';

import { SideMenu } from '@components/menu/SideMenu';

const { Header, Content, Sider } = Layout;

export class Index extends React.Component {
  state = {
    collapsed: false,
  };

  toggle = () => {
    this.setState({
      collapsed: !this.state.collapsed,
    });
  };

  render() {
    return (
      <Layout>
        <Header style={{ background: '#fff', padding: 0 }}>
          <Icon
            className="trigger"
            type={this.state.collapsed ? 'menu-unfold' : 'menu-fold'}
            onClick={this.toggle}
          />
        </Header>
        <Layout>
          <Sider trigger={null} collapsible collapsed={this.state.collapsed}>
            <div className="logo" />
            <Menu theme="dark" mode="inline" defaultSelectedKeys={['1']}>
              <Menu.Item key="1">
                <Icon type="user" />
                <span>nav 1</span>
              </Menu.Item>
              <Menu.Item key="2">
                <Icon type="video-camera" />
                <span>nav 2</span>
              </Menu.Item>
              <Menu.Item key="3">
                <Icon type="upload" />
                <span>nav 3</span>
              </Menu.Item>
            </Menu>
          </Sider>
          <Layout>
            <Content
              style={{
                margin: '24px 16px',
                padding: 24,
                background: '#fff',
                minHeight: 280,
              }}
            >
              Content
            </Content>
          </Layout>
        </Layout>
      </Layout>
    );
  }
}

{
  "dependencies": {
    "@types/styled-components": "^4.4.2",
    "@zeit/next-css": "^1.0.1",
    "@zeit/next-less": "^1.0.1",
    "antd": "^3.9.2",
    "babel-plugin-import": "^1.13.0",
    "less": "^3.10.3",
    "less-vars-to-js": "^1.3.0",
    "next": "^9.1.7",
    "react": "^16.12.0",
    "react-dom": "^16.12.0",
    "styled-components": "^4.4.1"
  },
  "scripts": {
    "dev": "next",
    "build": "next build",
    "start": "next start",
    "script-check": "gts check",
    "clean": "gts clean",
    "compile": "tsc -p .",
    "fix": "gts fix",
    "prepare": "yarn run compile",
    "pretest": "yarn run compile",
    "posttest": "yarn run check"
  },
  "devDependencies": {
    "@types/node": "^10.0.3",
    "@types/react": "^16.9.17",
    "babel-plugin-module-resolver": "^4.0.0",
    "babel-plugin-styled-components": "^1.10.6",
    "gts": "^1.1.2",
    "typescript": "~3.7.0"
  }
}

{
  "extends": "./node_modules/gts/tsconfig-google.json",
  "compilerOptions": {
    "rootDir": ".",
    "outDir": "build",
    "jsx": "preserve",
    "allowJs": true,
    "skipLibCheck": true,
    "noEmit": true,
    "esModuleInterop": true,
    "module": "esnext",
    "target": "esnext",
    "moduleResolution": "node",
    "resolveJsonModule": true,
    "baseUrl": ".",
    "paths": {
      "@components/*": [
        "./src/components/*"
      ]
    },
    "isolatedModules": true
  },
  "include": [
    "pages/**/*.tsx",
    "src/**/*.tsx",
    "test/**/*.tsx"
  ],
}