Lint files with mjs, mts, cjs and cts extension by default (#40879)

## Feature

Fixes #36819. Closes https://github.com/vercel/next.js/pull/37389.

- [ ] Implements an existing feature request or RFC. Make sure the feature request has been accepted for implementation before opening a PR.
- [x] Related issues linked using `fixes #number`
- [x] Integration tests added
- [ ] Documentation added
- [ ] Telemetry added. In case of a feature if it's used or not.
- [ ] Errors have a helpful link attached, see `contributing.md`

packages/eslint-config-next/index.js

@@ -107,7 +107,13 @@ module.exports = {
       version: 'detect',
     },
     'import/parsers': {
-      [require.resolve('@typescript-eslint/parser')]: ['.ts', '.tsx', '.d.ts'],
+      [require.resolve('@typescript-eslint/parser')]: [
+        '.ts',
+        '.mts',
+        '.cts',
+        '.tsx',
+        '.d.ts',
+      ],
     },
     'import/resolver': {
       [require.resolve('eslint-import-resolver-node')]: {

packages/next/cli/next-lint.ts

@@ -18,7 +18,16 @@ import { getProjectDir } from '../lib/get-project-dir'
 
 const eslintOptions = (args: arg.Spec, defaultCacheLocation: string) => ({
   overrideConfigFile: args['--config'] || null,
-  extensions: args['--ext'] ?? ['.js', '.jsx', '.ts', '.tsx'],
+  extensions: args['--ext'] ?? [
+    '.js',
+    '.mjs',
+    '.cjs',
+    '.jsx',
+    '.ts',
+    '.mts',
+    '.cts',
+    '.tsx',
+  ],
   resolvePluginsRelativeTo: args['--resolve-plugins-relative-to'] || null,
   rulePaths: args['--rulesdir'] ?? [],
   fix: args['--fix'] ?? false,

test/integration/eslint/mjs-cjs-linting/.eslintrc.json

@@ -0,0 +1,4 @@
+{
+  "extends": "next",
+  "root": true
+}

test/integration/eslint/mjs-cjs-linting/pages/bar.mjs

@@ -0,0 +1,10 @@
+export default class Bar {
+  render() {
+    return (
+      <div>
+        <h1>Hello title</h1>
+        <img src="img" />
+      </div>
+    )
+  }
+}

test/integration/eslint/mjs-cjs-linting/pages/index.cjs

@@ -0,0 +1,10 @@
+export default class Home {
+  render() {
+    return (
+      <div>
+        <h1>Hello title</h1>
+        <script src="test"></script>
+      </div>
+    )
+  }
+}

test/integration/eslint/test/index.test.js

@@ -34,6 +34,7 @@ const dirNoConfig = join(__dirname, '../no-config')
 const dirEslintCache = join(__dirname, '../eslint-cache')
 const dirEslintCacheCustomDir = join(__dirname, '../eslint-cache-custom-dir')
 const dirFileLinting = join(__dirname, '../file-linting')
+const mjsCjsLinting = join(__dirname, '../mjs-cjs-linting')
 
 describe('ESLint', () => {
   describe('Next Build', () => {
@@ -767,5 +768,27 @@ describe('ESLint', () => {
         `Cannot write to output file path, it is a directory: ${filePath}`
       )
     })
+
+    test('lint files with cjs and mjs file extension', async () => {
+      const { stdout, stderr } = await nextLint(mjsCjsLinting, [], {
+        stdout: true,
+        stderr: true,
+      })
+
+      const output = stdout + stderr
+
+      expect(output).toContain('pages/bar.mjs')
+      expect(output).toContain(
+        'img elements must have an alt prop, either with meaningful text, or an empty string for decorative images.'
+      )
+      expect(output).toContain(
+        'Do not use `<img>` element. Use `<Image />` from `next/image` instead. See: https://nextjs.org/docs/messages/no-img-element'
+      )
+
+      expect(output).toContain('pages/index.cjs')
+      expect(output).toContain(
+        'Synchronous scripts should not be used. See: https://nextjs.org/docs/messages/no-sync-scripts'
+      )
+    })
   })
 })