Actualmente iniciando el servidor en mi lado del cliente, el error anterior es lo que he estado recibiendo. Estoy usando Typescript, React, ESlint. Parece que no puedo avanzar ya que este error me ha estado persiguiendo. La página de github para Eslint tampoco ha sido de mucha ayuda.
Este error apareció después de haber creado el componente useMutation y exportarlo en index.ts. No estoy seguro de cómo deshacerme de este error.
Below is my package.json { "name": "tinyhouse_client", "version": "0.1.0", "private": true, "dependencies": { "@testing-library/jest-dom": "^4.2.4", "@testing-library/react": "^9.3.2", "@testing-library/user-event": "^7.1.2", "@types/jest": "^24.0.0", "@types/node": "^12.0.0", "@types/react": "^16.9.35", "@types/react-dom": "^16.9.0", "@typescript-eslint/parser": "^3.0.2", "react": "^16.13.1", "react-dom": "^16.13.1", "react-scripts": "3.4.1", "typescript": "~2.23.0" }, "resolutions": { "@typescript-eslint/eslint-plugin": "^2.23.0", "@typescript-eslint/parser": "^2.23.0", "@typescript-eslint/typescript-estree": "^2.23.0" }, "scripts": { "start": "react-scripts start", " build": "react-scripts build", "test": "react-scripts test", "eject": "react-scripts eject" }, "eslintConfig": { "extends": "react-app" }, "browserslist": { "production": [ ">0.2%", "not dead", "not op_mini all" ], "development": [ "last 1 chrome version", "last 1 firefox version", "last 1 safari version" ] }, **strong text** "proxy": "http://localhost:9000" } Below is my index.ts export * from './server'; export * from './useQuery'; export * from './useMutation'; And my useMutation.ts import { useState } from 'react'; import { server } from './server'; interface State<TData> { data: TData | null; loading: boolean; error: boolean; } type MutationTuple<TData, TVariables> = [ (variables?: TVariables | undefined) => Promise<void>, State<TData> ]; export const useMutation = <TData = any, TVariables = any>( query: string ): MutationTuple<TData, TVariables> => { const [state, setState] = useState<State<TData>>({ data: null, loading: false, error: false, }) const fetch = async (variables?: TVariables) => { try { setState({ data: null, loading: true, error: false }); const { data, errors } = await server.fetch<TData, TVariables>({ query, variables }); if (errors && errors.length) { throw new Error(errors[0].message); } setState({ data, loading: false, error: false }); } catch (err) { setState({ data: null, loading: false, error: true }); throw console.error(err); } } return [fetch, state]; };Editar: como señaló Meng-Yuan Huang, este problema ya no ocurre en react-scripts@^4.0.1
Este error ocurre porque react-scripts tiene una dependencia directa en el rango 2.xx de @typescript-eslint/parser y @typescript-eslint/eslint-plugin .
Puede solucionar esto agregando un campo de resoluciones a su package.json de la siguiente manera:
"resolutions": { "**/@typescript-eslint/eslint-plugin": "^4.1.1", "**/@typescript-eslint/parser": "^4.1.1" } Usuarios de NPM: agregue el campo de resoluciones anterior a su package.json , pero use npx npm-force-solutions para actualizar las versiones del paquete en package-lock.json .
Usuarios de Yarn: no necesitas hacer nada más. Consulte las resoluciones de dependencia selectivas para obtener más información.
NOTA: si usa espacios de trabajo monorepo/Yarn, el campo de resolutions debe estar en el package.json de nivel superior.json .
NOTA: yarn add y yarn upgrade-interactive no respetan el campo resolutions y pueden generar un archivo yarn.lock con versiones incorrectas como resultado. Cuidado.
Para futuros Googlers:
Tuve el mismo problema ahora en TypeScript 4.0.2 en un proyecto Vue.js 2. Lo arreglé actualizando @typescript-eslint/eslint-plugin y @typescript-eslint/parser a lo último que npm me daría usando @latest , que en ese momento era 3.3.0 y 3.10.1, respectivamente.
Intente jugar con tipos de variables dentro de las interfaces. Por ejemplo, tengo este error cuando tenía esa interfaz de estado:
interface State{ foo: [] }pero cuando cambié el tipo de matriz funcionó:
interface State{ foo: string[] }