Does XO work with Next.js?

[patrik-csak]

I tried to add XO to a Next.js project and I get the following error on npx xo:

node:internal/process/esm_loader:94
    internalBinding('errors').triggerUncaughtException(
                              ^

Error [ERR_MODULE_NOT_FOUND]: Cannot find package '/Users/patrikcsak/Code/next-xo/node_modules/xo/node_modules/eslint/' imported from /Users/patrikcsak/Code/next-xo/node_modules/xo/index.js
Did you mean to import eslint/lib/api.js?
    at new NodeError (node:internal/errors:371:5)
    at legacyMainResolve (node:internal/modules/esm/resolve:335:9)
    at packageResolve (node:internal/modules/esm/resolve:877:14)
    at moduleResolve (node:internal/modules/esm/resolve:929:18)
    at defaultResolve (node:internal/modules/esm/resolve:1044:11)
    at ESMLoader.resolve (node:internal/modules/esm/loader:422:30)
    at ESMLoader.getModuleJob (node:internal/modules/esm/loader:222:40)
    at ModuleWrap.<anonymous> (node:internal/modules/esm/module_job:76:40)
    at link (node:internal/modules/esm/module_job:75:36) {
  code: 'ERR_MODULE_NOT_FOUND'
}

Here's a reproduction repo: https://github.com/ptrkcsk/next-xo

To reproduce:

1. Create a new Next.js app:

   npx create-next-app@latest

2. Require XO:

   npm install xo --save-dev

3. Run XO:

   npx xo

[sindresorhus]

This seems like a npm issue.

Removing eslint and eslint-config-xo which are not needed, and then remove lock file and reinstall node_modules fixes the issue for me.

[patrik-csak]

Removing eslint and eslint-config-xo

Did you mean eslint and eslint-config-next? That gets XO working, but then we lose Next.js's ESLint rules. In the reproduction above, XO wasn't yet configured to use Next.js's ESLint rules, but my goal is to use XO with Next.js's ESLint rules.

Thanks for the advice about deleting the lock file and node_modules/. Haven't had to do that in a while!

---

I got XO working with Next.js's ESLint rules using the following steps:

1. Remove eslint and eslint-config-next

   npm uninstall eslint eslint-config-next

2. Require XO and Next.js's ESLInt plugin:

   npm install @next/eslint-plugin-next xo --save-dev

3. Remove lock file, node_modules/, and reinstall dependencies:

   rm -fr node_modules rm -fr node_modules package-lock.json
   npm install

4. Remove ESLint config created by create-next-app:

   rm .eslintrc.json 

5. Create XO config to include Next.js's ESLint plugin:

   // .xo-config.js
   module.exports = {
       extends: ['plugin:@next/next/core-web-vitals'],
   }

6. Replace next lint with xo in package.json:

    "scripts": {
   -    "lint": "next lint"
   +    "lint": "xo"
    }

See working example at https://github.com/ptrkcsk/next-xo/tree/next-plugin

[fregante]

That looks about right. The steps are the same as switching any project from ESLint to XO