Next.js typescript personalizar Document erro: TypeError: Construtor da classe Document não pode ser invocado sem 'new'

Eu tenho um site que incluía um Documento personalizado por _document.js. Mas quando eu executei yarn dev eu consegui

TypeError: Class constructor Document cannot be invoked without 'new'

Eu procuro soluções há muito tempo e li muitas soluções, mas elas falam sobre preset-env dentro de .babelrc. Eu não tenho nenhum arquivo de configuração do babel.

Experimentalmente, quando eu mudei "target": "es5" para "target": "es5", foi corrigido. Eu não quero usar es6 no meu tsconfig.

o que eu devo fazer? (Sou iniciante em next.js, mas sou fluente em js e react.js)

ATUALIZAR

Este é o meu _document.tsx:

import Document, {
    Html,
    Head,
    Main,
    NextScript,
    DocumentContext,
} from 'next/document'
import settings from '../utils/settings/settings'

class MyDocument extends Document {
    render() {
        return (
            <Html lang="fa">
                <Head>
                    <script
                        async
                        src={`https://www.googletagmanager.com/gtag/js?id=${settings.TRACKING_ID}`}
                    />

                    <script
                        dangerouslySetInnerHTML={{
                            __html: `
              window.dataLayer = window.dataLayer || [];
              function gtag(){dataLayer.push(arguments);}
              gtag('js', new Date());
              gtag('config', '${settings.TRACKING_ID}', { page_path: window.location.pathname });
            `,
                        }}
                    />
                </Head>
                <body dir="rtl">
                    <Main />
                    <NextScript />
                    <>
                        {/* Google Tag Manager */}
                        <script
                            dangerouslySetInnerHTML={{
                                __html: `(function(w,d,s,l,i){w[l]=w[l]||[];w[l].push({'gtm.start':
                new Date().getTime(),event:'gtm.js'});var f=d.getElementsByTagName(s)[0],
                j=d.createElement(s),dl=l!='dataLayer'?'&l='+l:'';j.async=true;j.src=
                'https://www.googletagmanager.com/gtm.js?id='+i+dl;f.parentNode.insertBefore(j,f);
                })(window,document,'script','dataLayer','${settings.GTM_ID}');`,
                            }}
                        />
                        {/* End Google Tag Manager */}
                        {/* Google Tag Manager (noscript) */}
                        <noscript
                            dangerouslySetInnerHTML={{
                                __html: `<iframe src="https://www.googletagmanager.com/ns.html?id=${settings.GTM_ID}" height="0" width="0" style="display:none;visibility:hidden"></iframe>`,
                            }}
                        />
                        {/* End Google Tag Manager (noscript) */}
                    </>
                </body>
            </Html>
        )
    }
}

export default MyDocument

Este é o meu tsconfig.json:

{
    "compilerOptions": {
        "target": "es5",
        "lib": ["dom", "dom.iterable", "esnext"],
        "allowJs": true,
        "skipLibCheck": true,
        "strict": false,
        "forceConsistentCasingInFileNames": true,
        "noEmit": true,
        "esModuleInterop": true,
        "module": "esnext",
        "moduleResolution": "node",
        "resolveJsonModule": true,
        "isolatedModules": true,
        "jsx": "preserve"
    },
    "include": ["next-env.d.ts", "**/*.ts", "**/*.tsx"],
    "exclude": ["node_modules"]
}

Resposta #1

Eu usei fork-ts-checker-webpack-plugin por várias razões, como verificar tipos antes da build e outros benefícios mencionados em sua documentação, portanto, quando eu o removi, o problema foi resolvido.

Resposta #2

Eu tive um problema semelhante. Tente o primeiro trecho de código e salve o arquivo como um arquivo .js normal.

Eu peguei isso do próximo tutorial, com TypeScript, e lembrei depois que encontrei em outro projeto.

//your imports //

class MyDocument extends Document {
  //try this piece 
  static async getInitialProps(ctx) {
    const initialProps = await Document.getInitialProps(ctx);
    return { ...initialProps };
  }



// Your code //
}

export default MyDocument