[email protected] gives "Type '() => any' is not a constructor function type" error in _Document.tsx #32110

JamesSingleton · 2021-12-04T02:22:42Z

What version of Next.js are you using?

12.0.5

What version of Node.js are you using?

14.18.0

What browser are you using?

Chrome

What operating system are you using?

macOS

How are you deploying your application?

Vercel

Describe the Bug

After upgrading to both [email protected] and [email protected], my _Document.tsx now throws an eslint error Type '() => any' is not a constructor function type. I have typescript@^4.5.2 installed.

_Doucment.tsx

import Document, { Head, Html, Main, NextScript } from 'next/document'

class MyDocument extends Document {
  render() {
    return (
      <Html lang="en-US" className="h-full bg-gray-100">
        <Head />
        <body className="loading h-full">
          <Main />
          <NextScript />
        </body>
      </Html>
    )
  }
}

export default MyDocument

.eslintrc.json

{
  "extends": ["next/core-web-vitals", "prettier"],
  "rules": {
    "react/no-unescaped-entities": "off"
  }
}

Expected Behavior

This was not breaking on 12.0.4 and should not break on 12.0.5

To Reproduce

Create a Next.js project with the example code I provided above.

The text was updated successfully, but these errors were encountered:

indiejoseph · 2021-12-04T04:36:06Z

+1, just upgrade to 12.0.5 and got this problem.

emt-mocha · 2021-12-04T05:26:17Z

upgraded to 12.0.5 and facing the same issue during build time. I am using:
Typescript = 4.4.4
Eslint = 7.32.0
eslint-config-next = 12.0.5
nodejs = v16.13.0

After downgrade to [email protected] the issue is no longer exist.

TimNZ · 2021-12-04T06:19:41Z

I respect and appreciate the awesome work of the Next js team,
so I am perplexed how this got through testing for release.

For now replace

import Document from 'next/document'

with

import Document from 'next/dist/pages/_document'

document.d.ts has been broken

12.0.5

import Document from './dist/shared/lib/runtime-config'
export * from './dist/pages/_document'
export default Document

12.0.4

export * from './dist/pages/_document'
export { default } from './dist/pages/_document'

raulfdm · 2021-12-04T06:48:25Z

It seems the usage is different now... or at least that's how the types are defined:
https://github.com/vercel/next.js/pull/31560/files#diff-82360298eb44f75969189468a71ab683227c0848c9b4fecbeae1321a7c1680b3R46

The error go away if I do:

export default class MyDocument extends Document() {
 // ...rest
}

But if that's the case, it seems a breaking change. Who customize _document will need to change to that.

Update

I run a build with that syntax and got an error:

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

So I think the interface is incorrect

Workaround

Quick and dirty:

import Document, { Head, Html, Main, NextScript } from 'next/document';

const CustomDocument = Document as any

export default class MyDocument extends CustomDocument {
  // ... rest
}

TimNZ · 2021-12-04T06:52:50Z

@raulfdm
#32110 (comment)

timneutkens · 2021-12-04T09:51:28Z

Hey! Thanks for the report and investigation. I've opened a PR here: #32117. The reason this got through to a release is that there was no custom _document.tsx / _app.tsx in the TypeScript test suites, I've added those in #32117.

There was a mistake in #32077 which imported a different module than _document in the _document .d.ts file. I found that we didn't have a test for a custom _document.tsx and _app.tsx with TypeScript, so I've added one that fails on canary and passes with this fix to ensure this does not happen in the future. Fixes #32110 ## Bug - [ ] Related issues linked using `fixes #number` - [ ] Integration tests added - [ ] Errors have helpful link attached, see `contributing.md` ## Feature - [ ] Implements an existing feature request or RFC. Make sure the feature request has been accepted for implementation before opening a PR. - [ ] Related issues linked using `fixes #number` - [ ] Integration tests added - [ ] Documentation added - [ ] Telemetry added. In case of a feature if it's used or not. - [ ] Errors have helpful link attached, see `contributing.md` ## Documentation / Examples - [ ] Make sure the linting passes by running `yarn lint`

timneutkens · 2021-12-04T12:15:07Z

Published 12.0.6: https://github.com/vercel/next.js/releases/tag/v12.0.6

It'll take a bit for it to be available on npm 🙏

captain-woof · 2021-12-04T14:57:08Z

Published 12.0.6: https://github.com/vercel/next.js/releases/tag/v12.0.6

It'll take a bit for it to be available on npm pray

Awesome!

vercel/next.js#32110

balazsorban44 · 2022-01-27T05:05:56Z

This issue has been automatically locked due to no recent activity. If you are running into a similar issue, please create a new issue with the steps to reproduce. Thank you.

There was a mistake in vercel#32077 which imported a different module than _document in the _document .d.ts file. I found that we didn't have a test for a custom _document.tsx and _app.tsx with TypeScript, so I've added one that fails on canary and passes with this fix to ensure this does not happen in the future. Fixes vercel#32110 ## Bug - [ ] Related issues linked using `fixes #number` - [ ] Integration tests added - [ ] Errors have helpful link attached, see `contributing.md` ## Feature - [ ] Implements an existing feature request or RFC. Make sure the feature request has been accepted for implementation before opening a PR. - [ ] Related issues linked using `fixes #number` - [ ] Integration tests added - [ ] Documentation added - [ ] Telemetry added. In case of a feature if it's used or not. - [ ] Errors have helpful link attached, see `contributing.md` ## Documentation / Examples - [ ] Make sure the linting passes by running `yarn lint`

JamesSingleton added the bug Issue was opened via the bug report template. label Dec 4, 2021

h-yoshikawa44 mentioned this issue Dec 4, 2021

各種コンポーネントとUIモック作成 h-yoshikawa44/resas-graph-app#4

Closed

6 tasks

raulfdm mentioned this issue Dec 4, 2021

chore(deps): update next.js to v12.0.5 raulfdm/raulmelo-studio#1110

Merged

1 task

smitpatel1010 mentioned this issue Dec 4, 2021

fix document definition file #32114

Closed

timneutkens mentioned this issue Dec 4, 2021

Fix document type import path #32117

Merged

10 tasks

kodiakhq bot closed this as completed in #32117 Dec 4, 2021

timneutkens mentioned this issue Dec 4, 2021

Typescript in custom document with NextJS 12.0.5 #32118

Closed

This comment has been minimized.

Sign in to view

awareness481 mentioned this issue Dec 8, 2021

Incorrect type definitions for Document component #32280

Closed

keitakn added a commit to nekochans/portfolio-frontend that referenced this issue Dec 10, 2021

⬆️ Next.js 12.5は型定義に問題があるので、12.0.7に変更

39dda43

vercel/next.js#32110

letanure mentioned this issue Dec 10, 2021

chore(deps): bump next from 12.0.4 to 12.0.5 letanure/react-form-generator#74

Closed

dcousens mentioned this issue Dec 16, 2021

Bump next from 12.0.4 to 12.0.7 keystonejs/keystone#7060

Merged

vercel locked as resolved and limited conversation to collaborators Jan 27, 2022

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

[email protected] gives "Type '() => any' is not a constructor function type" error in _Document.tsx #32110

[email protected] gives "Type '() => any' is not a constructor function type" error in _Document.tsx #32110

JamesSingleton commented Dec 4, 2021 •

edited

Loading

indiejoseph commented Dec 4, 2021 •

edited

Loading

emt-mocha commented Dec 4, 2021 •

edited

Loading

TimNZ commented Dec 4, 2021 •

edited

Loading

raulfdm commented Dec 4, 2021 •

edited

Loading

TimNZ commented Dec 4, 2021

timneutkens commented Dec 4, 2021

timneutkens commented Dec 4, 2021

This comment has been minimized.

captain-woof commented Dec 4, 2021

balazsorban44 commented Jan 27, 2022

[email protected] gives "Type '() => any' is not a constructor function type" error in _Document.tsx #32110

[email protected] gives "Type '() => any' is not a constructor function type" error in _Document.tsx #32110

Comments

JamesSingleton commented Dec 4, 2021 • edited Loading

What version of Next.js are you using?

What version of Node.js are you using?

What browser are you using?

What operating system are you using?

How are you deploying your application?

Describe the Bug

_Doucment.tsx

.eslintrc.json

Expected Behavior

To Reproduce

indiejoseph commented Dec 4, 2021 • edited Loading

emt-mocha commented Dec 4, 2021 • edited Loading

TimNZ commented Dec 4, 2021 • edited Loading

raulfdm commented Dec 4, 2021 • edited Loading

Update

Workaround

TimNZ commented Dec 4, 2021

timneutkens commented Dec 4, 2021

timneutkens commented Dec 4, 2021

This comment has been minimized.

captain-woof commented Dec 4, 2021

balazsorban44 commented Jan 27, 2022

JamesSingleton commented Dec 4, 2021 •

edited

Loading

indiejoseph commented Dec 4, 2021 •

edited

Loading

emt-mocha commented Dec 4, 2021 •

edited

Loading

TimNZ commented Dec 4, 2021 •

edited

Loading

raulfdm commented Dec 4, 2021 •

edited

Loading