False positive for `no-document-import-in-page` #28596

GrantGryczan · 2021-08-29T08:39:50Z

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.

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

kimbaudi · 2021-08-30T19:50:56Z

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.

JamesSingleton · 2021-08-30T22:32:33Z

Yeah I just started getting this when I went to update to next 11.1.1. It doesn't like/consider _document.tsx as a valid file.

kimbaudi · 2021-08-30T23:21:35Z

this is not just a problem for _document.tsx, but also _app.tsx. reverting to next & eslint-config-next v 11.1.0 until this is resolved.

I wonder if this is caused by the recent typescript version update and eslint and/or typescript @types not yet being updated with the latest changes to typescript. 🤷‍♂️

samcx · 2021-08-30T23:50:38Z

Is there a reason why you are creating a _document directory instead of pages/_document.tsx?

JamesSingleton · 2021-08-31T00:01:02Z

Although I do agree that creating a _document directory is incorrect, @kimbaudi is experiencing the same issue and is not creating a _document directory. I am using yarn 2 by the way. So renovate created a PR and it deployed just fine

but for some reason when I pull the changes down and run rm -rf node_modules && yarn && yarn lint I still get the error.

GrantGryczan · 2021-08-31T08:39:13Z

Is there a reason why you are creating a _document directory instead of pages/_document.tsx?

@samsisle It shouldn't matter--this issue is a bug no matter what reason I'm doing it for, because it is a valid location that makes sense and that Next.js recognizes.

Regardless, my personal (and again, irrelevant) reason is just for the sake of consistency, since most other pages and components in my project need to be in a folder in order to be able to have a styles.module.scss in the same folder, including pages/_error for example. Because of how common it is for me, I've gotten subconsciously used to looking exclusively among folders when skimming my project for a page or component I'm looking for, so making an exception for _document isn't the most practical.

Additionally, because folders are sorted in VS Code by default independently from files (which I like), _document as a file would appear out of order from my other pages, at the bottom grouped with the files rather than grouped with all the other pages which are folders at the top. Having _document outside of the alphabetically sorted set of folders due to being a file is counterintuitive--once again it prevents me from finding it where I expect it, at the top of my pages directory's contents, just above _error (and below _app).

Again though, none of that matters anyway, as this is a trivial bug which should be fixed either way.

rtritto · 2021-08-31T09:24:45Z

I'm using on Windows yarn v3, next 11.1.2 and typescript 4.4.2.

Same problem after these updates:

@types/node (from 16.7.6 to 16.7.8)
@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.2)
eslint-plugin-react (from 7.25.0 to 7.25.1)

Edit:
Error is generated updating eslint-config-next from 11.1.0 to 11.1.1 or 11.1.2

alex-drocks · 2021-08-31T13:28:00Z

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

rtritto · 2021-08-31T16:45:39Z

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.

mkayander · 2021-09-02T10:58:59Z

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.

housseindjirdeh · 2021-09-02T16:14:52Z

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.

kimbaudi · 2021-09-02T16:22:58Z

@housseindjirdeh - I think you need to create a TypeScript project with create-next-app (i.e., npx create-next-app test-next-app --ts). Let me see if I can recreate the issue.

kimbaudi · 2021-09-02T17:04:19Z

@housseindjirdeh - I've created a minimal reproducible repo at https://github.com/kimbaudi/test-next-app that results in the error. If you look at package.json, you will see that it is using next and eslint-config-next v11.1.2. If you downgrade to v11.1.0, you won't get the error. I believe upgrading to v11.1.1 and v11.1.2 produces the error.

to see the error, just clone the repo and npm install && npm run build

Failed to compile.

./src/pages/_document.tsx
1:1  Error: next/document should not be imported outside of pages/_document.js. See https://nextjs.org/docs/messages/no-document-import-in-page.  @next/next/no-document-import-in-page

rtritto · 2021-09-02T17:06:10Z

Steps to reproduce:

yarn init -y
yarn set version berry
yarn add eslint-config-next next react react-dom eslint
Create pages/_document.jsx or pages/_document/index.jsx

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

Create .eslintrc.yml

extends:
  - next

yarn next lint

samcx · 2021-09-02T19:09:32Z

@kimbaudi Unable to replicate with your repro 🤔

Unable to reproduce with the Yarn example above as well →

kimbaudi · 2021-09-02T19:19:59Z

strange... I'm able to reproduce the error:

I just did the following:

git clone https://github.com/kimbaudi/test-next-app.git
cd test-next-app
npm install && npm run build

I'm on Windows 10 using node v14.17.6 (LTS) and npm v 7.21.1.

Can anyone else check if they get the error by cloning my repo?

kimbaudi · 2021-09-02T19:24:28Z

Let me try on my Ubuntu VM, maybe this issue only affects Windows users

samcx · 2021-09-02T19:24:37Z

@kimbaudi That was for the other repro.

Here is yours →

housseindjirdeh · 2021-09-02T19:26:17Z

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 🙏 )

kimbaudi · 2021-09-02T19:34:52Z

@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.

samcx · 2021-09-02T19:49:38Z

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

Fixes #28596

GrantGryczan · 2021-09-03T06:38:07Z

Huh, why was this reopened?

akd-io · 2021-09-03T10:09:06Z

Update:

Seems like I'm going blind. This was fixed in #28745 and can confirm it works on 11.1.3-canary.7.

Old post:

I'm hitting this error while trying to add Tailwind support to Create Next Stack.

I have ensured the import is not present in any other files. I'm using pages/_document.tsx but also hit it when renaming to pages/_document.js.

OS: Windows 10 Pro
OS Version: 20H2
OS Build: 19042.1165
Node version: v16.3.0

Relevant dependencies:

  "dependencies": {
    "next": "11.1.2",
    "react": "17.0.2",
    "react-dom": "17.0.2",
    ...
  },
  "devDependencies": {
    "@types/react": "17.0.19",
    "eslint": "7.32.0",
    "eslint-config-next": "11.1.2",
    "typescript": "4.4.2",
    ...
  },

I am also using eslint-config-prettier with an .eslintrc.json looking like this:

{
  "extends": ["next/core-web-vitals", "eslint-config-prettier"]
}

But I assume that's irrelevant.

akd-io · 2021-09-03T10:51:16Z

Update:

Seems like I'm going blind. This was fixed in #28745 and can confirm it works on 11.1.3-canary.7.

Old post:

My guess is that the change to test for page.startsWith('/_document') instead of name.startsWith('_document') messes up on Windows because it uses \ instead of /.
Source: https://github.com/vercel/next.js/pull/28261/files?file-filters%5B%5D=.js

I believe the solution would be to keep the change from

const page = context.getFilename().split('pages')[1]

to

const paths = context.getFilename().split('pages')
const page = paths[paths.length - 1]

but revert the change from

const { name, dir } = path.parse(page)
if (
  name.startsWith('_document') ||
  (dir === '/_document' && name === 'index')
) {
  ...

to

if (!page || page.startsWith('/_document')) {
  ...

housseindjirdeh · 2021-09-04T18:42:01Z

This is fixed in #28745 and works in 11.1.3-canary.7. Please upgrade to that version if you're experiencing this issue and if you're still seeing the same error, make sure to clear your cache (next lint --no-cache).

darrylhuffman · 2021-09-09T15:25:45Z

Getting this same issue in 11.1.3-canary.14 - am I missing something?

realdocweird · 2021-09-11T17:32:54Z

Getting this same issue in 11.1.3-canary.14 - am I missing something?

same with 11.1.3-canary.15

ivenuss · 2021-09-11T21:41:56Z

Temporary fix for me was to downgrade eslint-config-next on version 11.1.0

housseindjirdeh · 2021-09-14T13:04:17Z

@darrylhuffman @realdocweird @ivenuss Are you using Windows and have both the next and eslint-config-next (or @next/eslint-plugin-next) packages set to version 11.1.3-canary.7 or later? If so, could you also make sure the ESLint cache is cleared by running next lint --no-cache.

Let me know if you're still seeing the issue and I can help investigate why it's still happening

realdocweird · 2021-09-15T08:55:06Z

i've tryed the canary.7 and .15. I'm nooby i didn't understand very well how to next lint --no-cache xD. I've "solved" downgrading to next 10.2.3 but of course i will need to update asap

kimbaudi · 2021-09-15T19:05:49Z

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 😄

rogor · 2021-09-15T20:34:45Z

It now works for me on next & eslint-config-next v11.1.3-canary.18

The problem I had was that I was running next lint --no-cache the wrong way.
If you have in your package.json a script "lint": "next lint", you cannot run npm run lint --no-cache, it won't work (the --no-cache isn't transferred to the command).
You have to change it in your package.json to "lint": "next lint --no-cache" and then run npm run lint.

It's one of those silly mistakes you might do if you're not paying attention :p

Dylan0916 · 2021-09-20T06:43:33Z

This issue occurred in 11.1.2.

ognitio-technologies · 2021-09-25T07:53:20Z

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

Im using the same version but still the same issues

nbouvrette · 2021-10-04T12:27:43Z

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",
  }

balazsorban44 · 2022-01-27T16:06:06Z

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.

GrantGryczan added the bug Issue was opened via the bug report template. label Aug 29, 2021

MonstraG mentioned this issue Sep 2, 2021

Add eslint rule for importing next/document outside of pages/_document.js #13712

Closed

housseindjirdeh self-assigned this Sep 2, 2021

styfle mentioned this issue Sep 2, 2021

Fix next lint no-document-import-in-page on Windows #28745

Merged

styfle added kind: bug and removed bug Issue was opened via the bug report template. labels Sep 2, 2021

kodiakhq bot closed this as completed in #28745 Sep 2, 2021

kodiakhq bot pushed a commit that referenced this issue Sep 2, 2021

Fix next lint no-document-import-in-page on Windows (#28745)

9bbba98

Fixes #28596

styfle reopened this Sep 2, 2021

akd-io mentioned this issue Sep 3, 2021

73 Add support for Tailwind CSS akd-io/create-next-stack#122

Merged

12 tasks

housseindjirdeh mentioned this issue Sep 3, 2021

[ESLint Plugin] Updates no-document-import-in-page rule to use path separators #28768

Merged

housseindjirdeh closed this as completed Sep 4, 2021

nicks96432 mentioned this issue Sep 14, 2021

update dependencies & remove project workflow nicks96432/mltd-api#5

Merged

housseindjirdeh mentioned this issue Sep 14, 2021

Incorrect ESLint Error: next/document should not be imported outside of pages/_document.js #28958

Closed

Forchapeatl mentioned this issue Sep 21, 2021

next/document should not be imported outside of pages/_document.js mui/material-ui#28518

Closed

DonghyukJacobJang mentioned this issue Sep 28, 2021

[Bug] Linter Issue - @next/next/no-document-import-in-page Experience-Monks/nextjs-boilerplate#145

Closed

yude added a commit to yudejp/yude.jp_v1 that referenced this issue Dec 10, 2021

https://github.com/vercel/next.js/issues/28596

d3283b1

EnKrypt mentioned this issue Dec 27, 2021

Bump next from 11.1.3-canary.97 to 11.1.3 EnKrypt/arvind.io#2

Closed

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

False positive for no-document-import-in-page #28596

False positive for no-document-import-in-page #28596

Comments

GrantGryczan commented Aug 29, 2021 • edited

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

Expected Behavior

To Reproduce

kimbaudi commented Aug 30, 2021 • edited

JamesSingleton commented Aug 30, 2021

kimbaudi commented Aug 30, 2021

samcx commented Aug 30, 2021

JamesSingleton commented Aug 31, 2021 • edited

GrantGryczan commented Aug 31, 2021 • edited

rtritto commented Aug 31, 2021 • edited

alex-drocks commented Aug 31, 2021 • edited

rtritto commented Aug 31, 2021

mkayander commented Sep 2, 2021 • edited

housseindjirdeh commented Sep 2, 2021

kimbaudi commented Sep 2, 2021

kimbaudi commented Sep 2, 2021 • edited

rtritto commented Sep 2, 2021

samcx commented Sep 2, 2021 • edited

kimbaudi commented Sep 2, 2021

kimbaudi commented Sep 2, 2021

samcx commented Sep 2, 2021 • edited

housseindjirdeh commented Sep 2, 2021 • edited

kimbaudi commented Sep 2, 2021

samcx commented Sep 2, 2021

GrantGryczan commented Sep 3, 2021

akd-io commented Sep 3, 2021 • edited

Update:

Old post:

akd-io commented Sep 3, 2021 • edited

Update:

Old post:

housseindjirdeh commented Sep 4, 2021

darrylhuffman commented Sep 9, 2021

realdocweird commented Sep 11, 2021

ivenuss commented Sep 11, 2021

housseindjirdeh commented Sep 14, 2021 • edited

realdocweird commented Sep 15, 2021

kimbaudi commented Sep 15, 2021 • edited

rogor commented Sep 15, 2021

Dylan0916 commented Sep 20, 2021

ognitio-technologies commented Sep 25, 2021

nbouvrette commented Oct 4, 2021

balazsorban44 commented Jan 27, 2022

False positive for `no-document-import-in-page` #28596

False positive for `no-document-import-in-page` #28596

GrantGryczan commented Aug 29, 2021 •

edited

kimbaudi commented Aug 30, 2021 •

edited

JamesSingleton commented Aug 31, 2021 •

edited

GrantGryczan commented Aug 31, 2021 •

edited

rtritto commented Aug 31, 2021 •

edited

alex-drocks commented Aug 31, 2021 •

edited

mkayander commented Sep 2, 2021 •

edited

kimbaudi commented Sep 2, 2021 •

edited

samcx commented Sep 2, 2021 •

edited

samcx commented Sep 2, 2021 •

edited

housseindjirdeh commented Sep 2, 2021 •

edited

akd-io commented Sep 3, 2021 •

edited

akd-io commented Sep 3, 2021 •

edited

housseindjirdeh commented Sep 14, 2021 •

edited

kimbaudi commented Sep 15, 2021 •

edited