next.js: False positive for `no-document-import-in-page`

What version of Next.js are you using?

11.1.0

What version of Node.js are you using?

14.17.1

What browser are you using?

Chrome

What operating system are you using?

Windows

How are you deploying your application?

next start

Describe the Bug

The @next/next/no-document-import-in-page ESLint rule displays an error in a custom _document if it is located at pages/_document/index.js, pages/_document/index.jsx, pages/_document/index.ts, or pages/_document/index.tsx.

Expected Behavior

I expect there to be no ESLint error from the @next/next/no-document-import-in-page rule in all valid custom _document file locations.

To Reproduce

Create pages/_document/index.jsx as follows with the ESLint rule enabled.

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

class MyDocument extends Document {
	render() {
		return (
			<Html lang="en">
				<Head />
				<body>
					<Main />
					<NextScript />
				</body>
			</Html>
		);
	}
}

export default MyDocument;

This results in an error on line 1.

About this issue

Original URL
State: closed
Created 3 years ago
Reactions: 31
Comments: 36 (8 by maintainers)

Commits related to this issue

Fix `next lint` no-document-import-in-page on Windows (#28745) Fixes #28596 — committed to vercel/next.js by styfle 3 years ago
https://github.com/vercel/next.js/issues/28596 — committed to yudejp/yude.jp_v1 by yude 3 years ago

Most upvoted comments

I’m getting the same eslint error after updating next.js from 11.1.0 to 11.1.1. I don’t recall getting this error when I was on next.js 11.1.0. In my case, the custom _document.tsx file is located under src/pages.

other npm packages I updated that might cause this error:

@types/node (from 16.7.5 to 16.7.7)
@typescript-eslint/eslint-plugin (from 4.29.3 to 4.30.0)
@typescript-eslint/parser (from 4.29.3 to 4.30.0)
eslint-config-next (from 11.1.0 to 11.1.1)
eslint-plugin-react (from 7.24.0 to 7.25.1)

Also, I should mention that I have upgraded to the latest typescript 4.4.2. And it seems upgrading next & eslint-config-next from 11.1.0 to 11.1.1 causes this eslint issue for me.

+16

kimbaudi on Aug 30, 2021

Can confirm as well that it’s reproducible on Windows. Letting the Next.js team know!

samcx on Sep 2, 2021

It is introduced by v11.1.1-canary.17 with:

[ESLint Plugin] Handles edge case for no-import-document-in-page rule: #28261

No problems with v11.1.1-canary.16.

rtritto on Aug 31, 2021

This issue occurred in 11.1.2.

Dylan0916 on Sep 20, 2021

I get the same false positive when using npm next build.

All I did was update from Next v11.1.0 to Next 11.1.2 and update eslint-config-next from 11.1.0 to 11.1.2.

I’m on Windows 10, using node v16.7.0. Everything was fine with next 11.1.0

alex-drocks on Aug 31, 2021

To everyone who still has the issue after upgrading to both Next.js and Eslint >= v11.1.3-canary.18 - run

npx next lint --no-cache

Also, I had run npm install --force when upgrading to

  "dependencies": {
    "next": "^11.1.3-canary.41",
  },
  "devDependencies": {
    "eslint-config-next": "^11.1.3-canary.41",
  }

nbouvrette on Oct 4, 2021

@housseindjirdeh @samsisle - I can confirm that this issue only affects Windows users. I just tried on my Ubuntu VM and am able to build without error.

kimbaudi on Sep 2, 2021

TLDR; it works for me (on both v11.1.3-canary.18 and v11.1.2)

I no longer get this error in either v11.1.3-canary.18 or v11.1.2. I thought I would still get this error on v11.1.2, but I don’t anymore. The important thing I did was run next lint --no-cache. I believe running this is what allowed me to switch from v11.1.3-canary.18 to v11.1.2 without running into this error.

Steps I took:

I was originally on next v11.1.0 & eslint-config-next v11.1.0
upgrade next & eslint-config-next to v11.1.3-canary.18
run next lint --no-cache
run next build (I no longer get the error)
downgrade next & eslint-config-next to v11.1.2
run next build (I no longer get the error)

Update: I just checked again, and it works on v11.1.3-canary.22 (but not on v11.1.2). Not sure why it worked on v11.1.2 yesterday, but it only works on v11.13-canary for me. The important thing is that the bug seems to be fixed on my end 😄

kimbaudi on Sep 16, 2021

Huh, why was this reopened?

GrantGryczan on Sep 3, 2021

Thanks so much for the reproduction steps @kimbaudi and @rtritto. I also haven’t been able to reproduce using either of your examples so this seems like it might be an issue only occurring on Windows machines.

(Thanks @samsisle for trying them both out as well 🙏 )

housseindjirdeh on Sep 2, 2021

Thanks for logging this issue @GrantGryczan, and thanks to everyone else sharing their details which always helps. For some reason, I can’t reproduce this. I’ve tried next & eslint-config-next versions 11.1.0, 11.1.1, and 11.1.2 and it seems to work fine . I’ve even tried spinning up a new application and still couldn’t reproduce it:

npx create-next-app test-next-app
cd test-next-app
Verify versions in package.json (both next & eslint-config-next are versions 11.1.2)
Create pages/_document/index.jsx with a custom document:

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

class MyDocument extends Document {
  render() {
    return (
      <Html>
        <Head />
        <body>
          <Main />
          <NextScript />
        </body>
      </Html>
    )
  }
}

export default MyDocument

Run yarn lint
“No ESLint warnings or errors” 🤔

I’ve also tried variations of the document file (pages/_document/index.jsx, src/pages/_document/index.js, pages/_document.tsx) and still not seeing the issue.

It is introduced by v11.1.1-canary.17 with:

[ESLint Plugin] Handles edge case for no-import-document-in-page rule: [ESLint Plugin] Handles edge case for no-import-document-in-page rule #28261

No problems with v11.1.1-canary.16.

That’s the only major change that’s been introduced to the file since 11.1.0, but doesn’t seem to be causing the error on my machine. I can revert the changes if necessary though.

Can anyone share their repository of where they’re seeing this issue if it’s public? Not sure if I’m missing something obvious here 😅 . Also, I would suggest running yarn lint --no-cache in case caching is causing this wonky behavior, so if anyone finds that happens to resolve this issue please let me know.

housseindjirdeh on Sep 2, 2021

I got this issue with Next being version 11.0.1. I see that my @next/eslint-plugin-next package updated automatically by Yarn from 11.1.0 to 11.1.2. So i assume this is the cause. Added ignore line comment temporaly.

mkayander on Sep 2, 2021