Line 0: Parsing error: Cannot read property 'map' of undefined
I am currently starting up the server on my client side, the error above is what I have been
getting. I am using TypeScript, ReactJS, ESLint. I can't seem to go forward since this error
has been haunting me. The GitHub page for ESLint hasn't been of much help either.
This error went up after I had created the useMutation component and exported it in 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.
Get this solution programmatically \u2014 free, no authentication.
curl https://depscope.dev/api/error/442c8d7540f97a249d87dc2fe1b456a1f9f23b014ccc29c8f7a30fb4dd0b00b3