Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Head and NextScript have type error when "allowSyntheticDefaultImports" is false #40835

Open
1 task done
jameshfisher opened this issue Sep 23, 2022 · 2 comments · May be fixed by #40837
Open
1 task done

Head and NextScript have type error when "allowSyntheticDefaultImports" is false #40835

jameshfisher opened this issue Sep 23, 2022 · 2 comments · May be fixed by #40837
Labels
bug Issue was opened via the bug report template.

Comments

@jameshfisher
Copy link
Contributor

Verify canary release

  • I verified that the issue exists in the latest Next.js canary release

Provide environment information

$ npx --no-install next info

    Operating System:
      Platform: win32
      Arch: x64
      Version: Windows 10 Home
    Binaries:
      Node: 16.13.1
      npm: N/A
      Yarn: N/A
      pnpm: N/A
    Relevant packages:
      next: 12.3.2-canary.7
      eslint-config-next: 12.3.1
      react: 18.2.0
      react-dom: 18.2.0

What browser are you using? (if relevant)

No response

How are you deploying your application? (if relevant)

No response

Describe the Bug

Running npm run build gives the error:

> my-app@0.1.0 build
> next build

info  - Linting and checking validity of types .Failed to compile.

./pages/_document.tsx:6:8
Type error: 'Head' cannot be used as a JSX component.
  Its instance type 'Head' is not a valid JSX element.
    Type 'Head' is missing the following properties from type 'ElementClass': setState, forceUpdate, props, state, refs

  4 |   return (
  5 |     <Html>
> 6 |       <Head />
    |        ^
  7 |       <body>
  8 |         <Main />
  9 |         <NextScript />
info  - Linting and checking validity of types ..

Expected Behavior

No type errors or build errors.

Link to reproduction

https://github.com/jameshfisher/nextjs-allowSyntheticDefaultImports-bug

To Reproduce

  1. npx create-next-app@latest --typescript
  2. Copy-paste the default _document.tsx from the docs
  3. Set "allowSyntheticDefaultImports": false in tsconfig.json
  4. Run npm run build
@jameshfisher jameshfisher added the bug Issue was opened via the bug report template. label Sep 23, 2022
@jameshfisher
Copy link
Contributor Author

The problem seems to be here:

$ head -1 node_modules/next/dist/pages/_document.d.ts
import React, { ReactNode } from 'react';

The 'react' module has no default export, so it doesn't resolve. It only currently "works" with the allowSyntheticDefaultImports hack. We can fix this by replacing the first line with:

import * as React from 'react';
import { ReactNode } from 'react';

@jameshfisher
Copy link
Contributor Author

I believe this is the source of that file: https://github.com/vercel/next.js/blob/canary/packages/next/pages/_document.tsx

Where the first line is

import React, { ReactElement, ReactNode, useContext } from 'react'

I believe we can fix this by replacing it with

import * as React from 'react'
import { ReactElement, ReactNode, useContext } from 'react'

jameshfisher added a commit to jameshfisher/next.js that referenced this issue Sep 23, 2022
@jameshfisher
Bugfix: do not use synthetic import (fixes vercel#40835)
accac51
@jameshfisher jameshfisher linked a pull request Sep 23, 2022 that will close this issue
Open
1 task
@jbedard jbedard mentioned this issue Apr 24, 2023
Closed
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
bug Issue was opened via the bug report template.
Projects
None yet
Milestone
No milestone
Development

Successfully merging a pull request may close this issue.

Bugfix: do not use synthetic import (fixes #40835) jameshfisher/next.js
1 participant
@jameshfisher