There was a typo in the Next.js TypeScript custom Document error message: TypeError: The Document class constructor cannot be invoked without using the 'new' keyword

Question

There was a typo in the Next.js TypeScript custom Document error message: TypeError: The Document class constructor cannot be invoked without using the 'new' keyword

I encountered a problem with my website that has a customized Document by _document.js. When I tried running yarn dev, I received the error:

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

I spent a considerable amount of time searching for solutions and went through multiple suggestions mentioning preset-env within .babelrc. However, I do not have any babel config file.

After some experimentation, changing

"target": "es5"

to

"target": "es5"

resolved the issue. I prefer not to utilize es6 in my tsconfig.

What steps should I take next? (I am new to next.js but well-versed in js and react.js)

UPDATE

Here is an excerpt from my _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">
                <!-- Code snippet omitted for brevity -->
            </Html>
        )
    }
}

export default MyDocument

This is my 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"]
}

typescript next.js

Answer 1

Answer №1

By implementing the fork-ts-checker-webpack-plugin, I was able to ensure type checking before the build process, among other benefits outlined in its documentation. Interestingly, removing this plugin resolved the issue at hand.

Answer 2

By implementing the fork-ts-checker-webpack-plugin, I was able to ensure type checking before the build process, among other benefits outlined in its documentation. Interestingly, removing this plugin resolved the issue at hand.

Answer 3

Answer №2

Dealing with a similar problem, I found a solution that worked for me. Copy the code snippet below and save it as a standard .js file.

This trick was something I picked up from a TypeScript tutorial in the past and thankfully remembered when faced with the same issue in another project.

//your imports //

class CustomDocument extends Document {
  //give this a shot 
  static async getInitialProps(ctx) {
    const initialData = await Document.getInitialProps(ctx);
    return { ...initialData };
  }



// Insert your code here //
}

export default CustomDocument

Answer 4

Dealing with a similar problem, I found a solution that worked for me. Copy the code snippet below and save it as a standard .js file.

This trick was something I picked up from a TypeScript tutorial in the past and thankfully remembered when faced with the same issue in another project.

//your imports //

class CustomDocument extends Document {
  //give this a shot 
  static async getInitialProps(ctx) {
    const initialData = await Document.getInitialProps(ctx);
    return { ...initialData };
  }



// Insert your code here //
}

export default CustomDocument

There was a typo in the Next.js TypeScript custom Document error message: TypeError: The Document class constructor cannot be invoked without using the 'new' keyword

UPDATE

Answer №1

Answer №2

Similar questions

Retrieve properly formatted text from the editor.document using the VSCode API

Click on an element in Angular to toggle it

Navigating VSCode for Correct Import Setup

Acquiring a public image asset within the Next.js project directory with a specified loader configuration path

Next.js rewrites are functioning properly, however, there seems to be an issue with locating the Javascript

Leverage the power of Typescript to flatten a JSON model with the help of Class

What is the best way to link multiple select tags in an HTML document?

Create a function that takes in a function as an argument and generates a new function that is identical to the original function, except it has one

Employing distinct techniques for a union-typed variable in TypeScript

Discovering the generic type from an optional parameter within a constructor

Adjusting slidesPerView based on screen size in Ionic: A step-by-step guide

Is the nodejs pm2 server consuming excessive resources?

Tips for transforming Http into HttpClient in Angular 5 (or higher than 4.3)

Enhance your Next.js routing by appending to a slug/url using the <Link> component

@tanstack/react-query: Cannot find a QueryClient, please provide a QueryClientProvider to set one

Error Message: "Unexpected use of Hook in react-hook-form"

The function getServerSideProps is not defined in the NextJS environment

typescript declaring a namespace with a restricted identifier

What is the best way to securely store a sensitive Stripe key variable in an Angular application?

Discovering a locator based on the initial portion of its value