Payload is the open-source, fullstack Next.js framework, giving you instant backend superpowers. Get a full TypeScript backend and admin panel instantly. Use Payload as a headless CMS or for building powerful applications.
When installing eslint plugin, eslint config fails
It needs extra configuration to make linter work correctly
Reproduction Steps
npx create-payload-app@betaproject template: blank-3.0yarn lint
expected result: ✔ No ESLint warnings or errors
observed result: ⨯ ESLint must be installed: yarn add --dev eslint
Try
yarn add --dev eslint
observed result
error memoizee@0.4.16: The engine "node" is incompatible with this module. Expected version ">=.0.12". Got "20.9.0"error Found incompatible module.
Add eslint manually in package.json in devDependencies
"eslint": "^8.57.0"
Then install (yarn install)
Install is now successful
Run linter again (yarn lint)
Observed result:
⚠ The Next.js plugin was not detected in your ESLint configuration. See https://nextjs.org/docs/basicfeatures/eslint#migrating-existing-config
./src/app/(payload)/admin/[[...segments]]/not-found.tsx2:1 Error: Parsing error: The keyword 'import' is reserved
./src/app/(payload)/admin/[[...segments]]/page.tsx2:1 Error: Parsing error: The keyword 'import' is reserved
./src/app/(payload)/api/[...slug]/route.ts3:1 Error: Parsing error: The keyword 'import' is reserved
./src/app/(payload)/api/graphql/route.ts3:1 Error: Parsing error: The keyword 'import' is reserved
./src/app/(payload)/api/graphql-playground/route.ts3:1 Error: Parsing error: The keyword 'import' is reserved
./src/app/(payload)/layout.tsx2:1 Error: Parsing error: The keyword 'import' is reserved
./src/app/my-route/route.ts1:1 Error: Parsing error: The keyword 'import' is reserved
./src/collections/Users.ts1:1 Error: Parsing error: The keyword 'import' is reserved
./src/payload.config.ts1:1 Error: Parsing error: The keyword 'import' is reserved
info - Need to disable some ESLint rules? Learn more here: https://nextjs.org/docs/basic-features/eslint#disabling-ruleserror Command failed with exit code 1.
To correct the issue, change lint config:
add to devDependencies: "eslint-config-next": "14.2.3"
remove .eslintrc.cjs
add .eslintrc.json
fill with this content
{"extends": "next/core-web-vitals"}
Link to reproduction
No response
Payload Version
beta
Node Version
20.9
Next.js Version
15
Describe the Bug
No eslint plugin is installed on project init.
When installing eslint plugin, eslint config fails
It needs extra configuration to make linter work correctly
Reproduction Steps
npx create-payload-app@beta
project template: blank-3.0
yarn lint
expected result:✔ No ESLint warnings or errors
observed result:⨯ ESLint must be installed: yarn add --dev eslint
Try
yarn add --dev eslint
observed resulterror memoizee@0.4.16: The engine "node" is incompatible with this module. Expected version ">=.0.12". Got "20.9.0"
error Found incompatible module.
Add eslint manually in
package.json
in devDependencies"eslint": "^8.57.0"
Then install (yarn install
) Install is now successful Run linter again (yarn lint
) Observed result:⚠ The Next.js plugin was not detected in your ESLint configuration. See https://nextjs.org/docs/basicfeatures/eslint#migrating-existing-config
./src/app/(payload)/admin/[[...segments]]/not-found.tsx
2:1 Error: Parsing error: The keyword 'import' is reserved
./src/app/(payload)/admin/[[...segments]]/page.tsx
2:1 Error: Parsing error: The keyword 'import' is reserved
./src/app/(payload)/api/[...slug]/route.ts
3:1 Error: Parsing error: The keyword 'import' is reserved
./src/app/(payload)/api/graphql/route.ts
3:1 Error: Parsing error: The keyword 'import' is reserved
./src/app/(payload)/api/graphql-playground/route.ts
3:1 Error: Parsing error: The keyword 'import' is reserved
./src/app/(payload)/layout.tsx
2:1 Error: Parsing error: The keyword 'import' is reserved
./src/app/my-route/route.ts
1:1 Error: Parsing error: The keyword 'import' is reserved
./src/collections/Users.ts
1:1 Error: Parsing error: The keyword 'import' is reserved
./src/payload.config.ts
1:1 Error: Parsing error: The keyword 'import' is reserved
info - Need to disable some ESLint rules? Learn more here: https://nextjs.org/docs/basic-features/eslint#disabling-rules
error Command failed with exit code 1.
To correct the issue, change lint config:
devDependencies
:"eslint-config-next": "14.2.3"
.eslintrc.cjs
.eslintrc.json
{
"extends": "next/core-web-vitals"
}
Run
yarn lint
should be workingAdapters and Plugins
No response