chore(integrations/react-*): add eslintrc to resolve error (TanStack#6749)

manudeli · TkDodo · web-flow · commit 62704ce63a2c · 2024-01-28T21:27:20.000+01:00
Co-authored-by: Dominik Dorfmeister &lt;office@dorfmeister.cc&gt;
diff --git a/integrations/react-cra4/.eslintrc.cjs b/integrations/react-cra4/.eslintrc.cjs
@@ -0,0 +1,18 @@
+/** @type {import('eslint').Linter.Config} */
+module.exports = {
+  root: true,
+  extends: [
+    '../../.eslintrc.cjs',
+    'plugin:react/recommended',
+    'plugin:react-hooks/recommended',
+  ],
+  parserOptions: {
+    tsconfigRootDir: __dirname,
+    project: './tsconfig.json',
+  },
+  settings: {
+    react: {
+      version: 'detect',
+    },
+  },
+}
diff --git a/integrations/react-cra4/src/App.jsx b/integrations/react-cra4/src/App.jsx
@@ -1,3 +1,4 @@
+import React from 'react'
 import { useQuery } from '@tanstack/react-query'
 
 const App = () => {
diff --git a/integrations/react-cra4/tsconfig.json b/integrations/react-cra4/tsconfig.json
@@ -0,0 +1,20 @@
+{
+  "compilerOptions": {
+    "target": "ES2020",
+    "lib": ["dom", "dom.iterable", "esnext"],
+    "allowJs": true,
+    "skipLibCheck": true,
+    "esModuleInterop": true,
+    "allowSyntheticDefaultImports": true,
+    "strict": true,
+    "forceConsistentCasingInFileNames": true,
+    "noFallthroughCasesInSwitch": true,
+    "module": "esnext",
+    "moduleResolution": "node",
+    "resolveJsonModule": true,
+    "isolatedModules": true,
+    "noEmit": true,
+    "jsx": "react-jsx"
+  },
+  "include": ["src", ".eslintrc.cjs"]
+}
diff --git a/integrations/react-cra5/.eslintrc.cjs b/integrations/react-cra5/.eslintrc.cjs
@@ -0,0 +1,18 @@
+/** @type {import('eslint').Linter.Config} */
+module.exports = {
+  root: true,
+  extends: [
+    '../../.eslintrc.cjs',
+    'plugin:react/recommended',
+    'plugin:react-hooks/recommended',
+  ],
+  parserOptions: {
+    tsconfigRootDir: __dirname,
+    project: './tsconfig.json',
+  },
+  settings: {
+    react: {
+      version: 'detect',
+    },
+  },
+}
diff --git a/integrations/react-cra5/src/App.jsx b/integrations/react-cra5/src/App.jsx
@@ -1,3 +1,4 @@
+import React from 'react'
 import { useQuery } from '@tanstack/react-query'
 
 const App = () => {
diff --git a/integrations/react-cra5/tsconfig.json b/integrations/react-cra5/tsconfig.json
@@ -0,0 +1,20 @@
+{
+  "compilerOptions": {
+    "target": "ES2020",
+    "lib": ["dom", "dom.iterable", "esnext"],
+    "allowJs": true,
+    "skipLibCheck": true,
+    "esModuleInterop": true,
+    "allowSyntheticDefaultImports": true,
+    "strict": true,
+    "forceConsistentCasingInFileNames": true,
+    "noFallthroughCasesInSwitch": true,
+    "module": "esnext",
+    "moduleResolution": "node",
+    "resolveJsonModule": true,
+    "isolatedModules": true,
+    "noEmit": true,
+    "jsx": "react-jsx"
+  },
+  "include": ["src", ".eslintrc.cjs"]
+}
diff --git a/integrations/react-next/.eslintrc.cjs b/integrations/react-next/.eslintrc.cjs
@@ -0,0 +1,18 @@
+/** @type {import('eslint').Linter.Config} */
+module.exports = {
+  root: true,
+  extends: [
+    '../../.eslintrc.cjs',
+    'plugin:react/recommended',
+    'plugin:react-hooks/recommended',
+  ],
+  parserOptions: {
+    tsconfigRootDir: __dirname,
+    project: './tsconfig.json',
+  },
+  settings: {
+    react: {
+      version: 'detect',
+    },
+  },
+}
diff --git a/integrations/react-next/app/client-component.tsx b/integrations/react-next/app/client-component.tsx
@@ -1,5 +1,6 @@
 'use client'
 
+import React from 'react'
 import { useQuery } from '@tanstack/react-query'
 
 export function ClientComponent() {
diff --git a/integrations/react-next/app/layout.tsx b/integrations/react-next/app/layout.tsx
@@ -1,5 +1,6 @@
-import type { Metadata } from 'next'
+import React from 'react'
 import Providers from './providers'
+import type { Metadata } from 'next'
 
 export const metadata: Metadata = {
   title: 'Create Next App',
diff --git a/integrations/react-next/app/page.tsx b/integrations/react-next/app/page.tsx
@@ -1,5 +1,6 @@
-import { ClientComponent } from '@/app/client-component'
+import React from 'react'
 import { queryOptions } from '@tanstack/react-query'
+import { ClientComponent } from './client-component'
 
 const options = queryOptions({
   queryKey: ['foo'],
diff --git a/integrations/react-next/tsconfig.json b/integrations/react-next/tsconfig.json
@@ -23,6 +23,12 @@
       "@/*": ["./*"]
     }
   },
-  "include": ["next-env.d.ts", "**/*.ts", "**/*.tsx", ".next/types/**/*.ts"],
+  "include": [
+    "next-env.d.ts",
+    "**/*.ts",
+    "**/*.tsx",
+    ".next/types/**/*.ts",
+    ".eslintrc.cjs"
+  ],
   "exclude": ["node_modules"]
 }
diff --git a/integrations/react-vite4/.eslintrc.cjs b/integrations/react-vite4/.eslintrc.cjs
@@ -0,0 +1,18 @@
+/** @type {import('eslint').Linter.Config} */
+module.exports = {
+  root: true,
+  extends: [
+    '../../.eslintrc.cjs',
+    'plugin:react/recommended',
+    'plugin:react-hooks/recommended',
+  ],
+  parserOptions: {
+    tsconfigRootDir: __dirname,
+    project: './tsconfig.json',
+  },
+  settings: {
+    react: {
+      version: 'detect',
+    },
+  },
+}
diff --git a/integrations/react-vite4/src/App.jsx b/integrations/react-vite4/src/App.jsx
@@ -1,3 +1,4 @@
+import React from 'react'
 import { useQuery } from '@tanstack/react-query'
 
 const App = () => {
diff --git a/integrations/react-vite4/tsconfig.json b/integrations/react-vite4/tsconfig.json
@@ -0,0 +1,20 @@
+{
+  "compilerOptions": {
+    "target": "ES2020",
+    "lib": ["dom", "dom.iterable", "esnext"],
+    "allowJs": true,
+    "skipLibCheck": true,
+    "esModuleInterop": true,
+    "allowSyntheticDefaultImports": true,
+    "strict": true,
+    "forceConsistentCasingInFileNames": true,
+    "noFallthroughCasesInSwitch": true,
+    "module": "esnext",
+    "moduleResolution": "node",
+    "resolveJsonModule": true,
+    "isolatedModules": true,
+    "noEmit": true,
+    "jsx": "react-jsx"
+  },
+  "include": ["src", ".eslintrc.cjs"]
+}
diff --git a/integrations/react-vite5/.eslintrc.cjs b/integrations/react-vite5/.eslintrc.cjs
@@ -0,0 +1,18 @@
+/** @type {import('eslint').Linter.Config} */
+module.exports = {
+  root: true,
+  extends: [
+    '../../.eslintrc.cjs',
+    'plugin:react/recommended',
+    'plugin:react-hooks/recommended',
+  ],
+  parserOptions: {
+    tsconfigRootDir: __dirname,
+    project: './tsconfig.json',
+  },
+  settings: {
+    react: {
+      version: 'detect',
+    },
+  },
+}
diff --git a/integrations/react-vite5/src/App.jsx b/integrations/react-vite5/src/App.jsx
@@ -1,3 +1,4 @@
+import React from 'react'
 import { useQuery } from '@tanstack/react-query'
 
 const App = () => {
diff --git a/integrations/react-vite5/tsconfig.json b/integrations/react-vite5/tsconfig.json
@@ -0,0 +1,20 @@
+{
+  "compilerOptions": {
+    "target": "ES2020",
+    "lib": ["dom", "dom.iterable", "esnext"],
+    "allowJs": true,
+    "skipLibCheck": true,
+    "esModuleInterop": true,
+    "allowSyntheticDefaultImports": true,
+    "strict": true,
+    "forceConsistentCasingInFileNames": true,
+    "noFallthroughCasesInSwitch": true,
+    "module": "esnext",
+    "moduleResolution": "node",
+    "resolveJsonModule": true,
+    "isolatedModules": true,
+    "noEmit": true,
+    "jsx": "react-jsx"
+  },
+  "include": ["src", ".eslintrc.cjs"]
+}

Original file line number	Diff line number	Diff line change
`@@ -1,3 +1,4 @@`
	`1`	`+import React from 'react'`
`1`	`2`	`import { useQuery } from '@tanstack/react-query'`
`2`	`3`
`3`	`4`	`const App = () => {`