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.

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

Docs: Creating new Next.js project with TypeScript does not add TypeScript lint rules #69184

Closed
LuckyT89 opened this issue Aug 22, 2024 · 14 comments
Labels
Documentation Related to Next.js' official documentation.

Comments

@LuckyT89
Copy link

LuckyT89 commented Aug 22, 2024

What is the documentation issue?

On the ESLint page of the documentation there is a section named TypeScript. It says that when creating a new project set up to use TypeScript, it should add TypeScript-specific lint rules and the content of the .eslintrc.json file should look like this:

{
  "extends": ["next/core-web-vitals", "next/typescript"]
}

However, when I create a new Next.js project by running npx create-next-app@latest and select the option to use TypeScript in the prompts that follow, it does not add the TypeScript lint rules and the .eslintrc.json file looks like this:

{
  "extends": "next/core-web-vitals"
}

Is there any context that might help us understand?

It seems these lint rules are not being added when creating a new project with TypeScript. I am not sure if this is the intended behavior and it is an issue with the documentation that needs to be updated, or it is a bug that needs to be fixed.

Does the docs page already exist? Please link to it.

https://nextjs.org/docs/pages/building-your-application/configuring/eslint

@LuckyT89 LuckyT89 added the Documentation Related to Next.js' official documentation. label Aug 22, 2024
@flavio-dev

This comment has been minimized.

@flavio-dev
Copy link

flavio-dev commented Aug 22, 2024

hello @LuckyT89 I also have this problem. Worst tho: running the command next lint now returns an error if you update your eslintrc to what is suggested on the documentation:

{
  "extends": ["next/core-web-vitals", "next/typescript"]
}

ERROR:

next lint
Failed to load config "next/typescript" to extend from.

@robcaldecott
Copy link

It would be great to get this working as documented. I'm trying to enable the @typescript-eslint/consistent-type-imports rule but the missing next/typescript plugin is stopping it from working.

@psylone
Copy link

psylone commented Aug 24, 2024

It appears that the next/typescript linter rules are supposed to be part of the eslint-config-next package. However, if you check the latest published version, you'll notice that it only includes the core-web-vitals rules. This suggests that the next/typescript linter rules simply haven't been published yet.

@samcx
Copy link
Member

samcx commented Aug 26, 2024

@flavio-dev What version of :nextjs: are you using? I am not getting this error on the latest canary.

@CesarCarrillo91
Copy link

Same issue here. I'm using next version: 14.2.5

@samcx
Copy link
Member

samcx commented Aug 26, 2024

@CesarCarrillo91 Can you confirm if this is working for you on the latest canary?

@CesarCarrillo91
Copy link

@samcx - not working for me on 15.0.0-canary.130.

@apomortsev
Copy link

It looks like next lint (using the latest canary) installs an older eslint-config-next version that is missing the eslint-config-next\typescript.js file. Manually updating pnpm update eslint-config-next@v15.0.0-canary.130 brings the missing file in and resolves the Failed to load config "next/typescript" to extend from. error.

@d-kunrath
Copy link

@apomortsev this worked for me, thank you.

kleekich21 added a commit to f-lab-edu/thumbnails that referenced this issue Aug 27, 2024
@LuckyT89
Copy link
Author

@kleekich21 I see the commit you made for this issue. Hopefully this will make it so that when you create a new project using npx create-next-app@latest and select TypeScript, it will set up the correct linting rules without needing any other setup. Thanks!

@samcx
Copy link
Member

samcx commented Aug 27, 2024

@apomortsev Thank you for the clarification.

The PR that :fixed: the issue will be backported to 14.2.7, which likely will be released later today! Afterwards, you should be able to npx create-next-app@latest and have the correct linting rules.

In the meantime, I will be closing this issue! Please be on the look for the new minor release → https://github.com/vercel/next.js/releases.

@samcx samcx closed this as completed Aug 27, 2024
@Lovely-Ruby
Copy link

It looks like next lint (using the latest canary) installs an older eslint-config-next version that is missing the eslint-config-next\typescript.js file. Manually updating pnpm update eslint-config-next@v15.0.0-canary.130 brings the missing file in and resolves the Failed to load config "next/typescript" to extend from. error.

thanks

@LuckyT89
Copy link
Author

@samcx I tried creating a new app today with npx create-next-app@latest and selecting TypeScript. I can see it is now using Next version 14.2.7 but the .eslintrc.json file is still missing next/typescript and only includes next/core-web-vitals. I may have misunderstood your comment above, it sounded like once 14.2.7 was released the issue would be fixed. It seems like the PR that @kleekich21 made which has the commit that fixes this (https://github.com/f-lab-edu/thumbnails/pull/4/commits) is still open.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
Documentation Related to Next.js' official documentation.
Projects
None yet
Development

No branches or pull requests

9 participants