Currently starting up the server on my client side, the error above is what I have been getting. I am using Typescript, React, ESlint. I can't seem to go forward since this error has been haunting me. The github page for Eslint hasn't been much help either.
This error went up after I had created the useMutation component and exported it in the index.ts, Not sure how to get rid of this 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];
};
Edit: as noted by Meng-Yuan Huang, this issue no longer occurs in react-scripts@^4.0.1
This error occurs because react-scripts has a direct dependency on the 2.xx range of @typescript-eslint/parser and @typescript-eslint/eslint-plugin.
You can fix this by adding a resolutions field to your package.json as follows:
"resolutions": {
"**/@typescript-eslint/eslint-plugin": "^4.1.1",
"**/@typescript-eslint/parser": "^4.1.1"
}
NPM users: add the resolutions field above to your package.json but use npx npm-force-resolutions to update package versions in package-lock.json.
Yarn users: you don't need to do anything else. See selective dependency resolutions for more info.
NOTE: if you're using a monorepo/Yarn workspaces, the resolutions field must be in the top-level package.json.
NOTE: yarn add and yarn upgrade-interactive don't respect the resolutions field and they can generate a yarn.lock file with incorrect versions as a result. Watch out.
For future Googlers:
I had the same issue just now on TypeScript 4.0.2 in a Vue.js 2 project. I fixed it by upgrading @typescript-eslint/eslint-plugin and @typescript-eslint/parser to the latest that npm would give me using @latest, which at the time was 3.3.0 and 3.10.1, respectively.
Try playing around with variable types inside the interfaces. E. g I've got this error when I had such state interface:
interface State{
foo: []
}
but when I've changed the type of array it worked:
interface State{
foo: string[]
}