라인 0: 구문 분석 오류: 정의되지 않은 속성 'map'을 읽을 수 없음
현재 내 클라이언트 쪽에서 서버를 시작하는 중, 위의 오류는 내가 받고 있는 것이다.나는 Typecript, React, ESlint를 사용하고 있다.이 실수가 나를 괴롭히고 있어서 나는 앞으로 나아갈 수 없을 것 같다.에슬린트 지투브 페이지도 별로 도움이 되지 않았다.
useMutation 구성 요소를 생성하여 index.ts로 내보낸 후 이 오류가 발생함, 이 오류를 제거하는 방법 확실치 않음.
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];
};
편집: Meng-Yuan Huang에서 언급한 바와 같이, 이 문제는 더 이상 다음에서 발생하지 않는다.react-scripts@^4.0.1
이 오류는 다음과 같은 이유로 발생한다.react-scripts의 2.xx 범위에 직접적인 의존성을 가진다.@typescript-eslint/parser그리고@typescript-eslint/eslint-plugin.
해상도 필드를 추가하면 이 문제를 해결할 수 있다.package.json아래와 같이
"resolutions": {
"**/@typescript-eslint/eslint-plugin": "^4.1.1",
"**/@typescript-eslint/parser": "^4.1.1"
}
NPM 사용자: 위의 해상도 필드를 다음 위치에 추가package.json그러나 패키지 버전을 업데이트하려면 npx npm-force-properties를 사용하십시오.package-lock.json.
실 사용자: 당신은 다른 어떤 것도 할 필요가 없다.자세한 내용은 선택적 종속성 해결을 참조하십시오.
참고: 모노레포/야간 작업 공간을 사용하는 경우resolutions필드는 최상위 레벨에 있어야 함package.json.
참고:yarn add그리고yarn upgrade-interactive을 존중하지 않다resolutions 수 .yarn.lock결과적으로 잘못된 버전으로 파일 작성조심해.
미래의 구글러:
나는 방금 Vue.js 2 프로젝트에서 TypeScript 4.0.2에 대해 같은 이슈를 가지고 있었다.업그레이드해서 고쳤다.@typescript-eslint/eslint-plugin그리고@typescript-eslint/parser이 npmi를 에게 줄 으로.@latest당시는 각각 3.3.0과 3.10.1이었다.
인터페이스 내에서 변수 유형을 사용하여 재생해 보십시오.E. g 상태 인터페이스가 있을 때 다음과 같은 오류가 발생함:
interface State{
foo: []
}
하지만 어레이 유형을 변경하면 다음과 같은 효과를 볼 수 있었다.
interface State{
foo: string[]
}
당신의 TypeScript 버전은 당신의 eslint와 호환되지 않는다.이 두 종속성을 최신 버전으로 업그레이드하여 해결할 수 있다.
TypeScript 4.0.5는 버전 4.6.0과 호환됨
"devDependencies": {
"@typescript-eslint/eslint-plugin": "^4.6.0",
"@typescript-eslint/parser": "^4.6.0",
}
TypeScript 4.1.5는 버전 4.18.0과 호환됨
"devDependencies": {
"@typescript-eslint/eslint-plugin": "^4.18.0",
"@typescript-eslint/parser": "^4.18.0",
}
TypeScript 4.2.4는 버전 4.23.0과 호환됨
"devDependencies": {
"@typescript-eslint/eslint-plugin": "^4.23.0",
"@typescript-eslint/parser": "^4.23.0",
}
TypeScript 4.3.2는 버전 4.25.0과 호환됨
"devDependencies": {
"@typescript-eslint/eslint-plugin": "^4.25.0",
"@typescript-eslint/parser": "^4.25.0",
}
TypeScript 4.5.5는 버전 4.25.0과 호환됨
"devDependencies": {
"@typescript-eslint/eslint-plugin": "^5.10.2",
"@typescript-eslint/parser": "^5.10.2",
}
이것이 나의 CRA 프로젝트에 효과가 있었던 것이다.
1단계: 편집package.json세트typescript에 버전.^3.9.7
2단계: 삭제.cache에 폴더로 저장하다.node_modules
3단계: 실행npm install
이거 eslint-typecript에서 나온 거야?그런 경우, 형식 지정 버전이 개발/야간 빌드가 아닌지 확인하십시오.
때때로 이 오류는 다른 사람들이 말한 것처럼 잘못된 유형의 결과일 수 있다.
베어 어레이를 유형으로 사용할 때 이 오류가 발생함
const someVariable: [] //Incorrect
const someVariable: string[] //Correct
다차원 배열을 잘못 입력할 때 다음과 같은 오류가 발생함:
const someVariable : [string[]] //Incorrect. Results in map error
const someVariable : string[][] //Correct
타이프텍스트의 오류 메시지는 매우 애매하기 때문에 이것이 도움이 되기를 바란다.
나도 같은 실수를 했지만 나에게 있어서 해결책은 내가 같은 타입의 사람을 가지고 있다는 것이었다.
text : string[] | []
로 바꿔서
text : string[]
나를 위해 일했다.
또한 제외한다.array types위의 답들을 설명하는 문제들에는 많은 것들이 있다.tuple이 문제를 일으키는 사건들..내가 그들을 언급할께.
interface Some {
// error
tupleValue: [string, number]
// works
tupleValue: [v1: string, v2: number]
// error
tupleArr: [v1: string, v2: number][]
// works!
tupleArr2: Array<[v1: string, v2: number]>
}
다른 경우:
type ValueView = [value: SomeObj, view: string]
// error
const res1: ValueView[] = arr.map(v => [v, v.name])
// works !!!
const res: ValueView[] = arr.map(v => [v, v.name] as ValueView)
// error
const res = arr.map(v => [v, v.name] as [SomeObj, string])
// works !!!
const res = arr.map(v => [v, v.name] as [value: SomeObj, view: string])
따라서 튜플 작업을 두 번 확인하십시오.
생성-수정-응용 프로그램 및 형식 지정 프로그램을 사용하는 모든 남자용.
이런 오류를 발견했을 때
업그레이드 형식
그리고
업그레이드 대응 스크립트 패키지
비호환성 경고를 주었을 때도 의존성을 수동으로 추가해야 했기 때문에npm-force-resolutions해결책은 나에게 효과가 없었다.
- 먼저 다음과 같은 종속성을 추가해야 했다.
package.json(dependencies왜냐하면 그것은 create-react-appilitation이다.devDependencies):
"dependencies": {
"@typescript-eslint/eslint-plugin": "^4.1.1",
"@typescript-eslint/parser": "^4.1.1",
}
그러면, 나는 한다.
rm -rf node_modules/는 npm 할 수 있다.npmlingnpmling 하하하수수수수수수수수수수수수수수수수수수수수수수수수수수수수?다음, 다음을 모두 설치하십시오.
npm install.올바른 버전이 있는지 확인하십시오.
npm ls @typescript-eslint/eslint-plugin. 라고 쓰여 있었다.UNMET PEER DEPENDENCY하지만 난 그걸 무시해야만 했어. 그렇지 않으면 난 이 일을 해낼 수 없었거든.npm start이제 생성-수정-앱이 제대로 작동하는지 확인할 수 있을 겁니다.
npm-force-resolution 솔루션을 먼저 제안하고 싶지만 실패하면 이 솔루션을 사용해 보십시오.
아, 그리고 한 가지 더 메모해 두십시오.
이 모든 재앙은 내가 이런 짓을 했기 때문이야
interface SomeInterface {
someBoolean: boolean,
someList: number[],
someTuple: [string, string] // <-- THIS is the problem
}
만약 내가 그 주석줄을 제거한다면, 그 코드는 문제없이 컴파일될 것이다.나는 이미 그렇게 작동하기 위해 코드를 만들었기 때문에 그렇게 유지했지만, 인터페이스 내부에 튜플이 있는 것을 피한다면(레이블이 있든 없든 상관없다) 잠재적으로 이 모든 번거로움을 피할 수 있을 것이다.
Yarn 사용자, 나도 같은 문제를 가지고 있었는데, package-lock.json 파일을 제거하고 다시 설치하여 문제를 해결했다.
rm -rf node_modules
yarn cache clean
yarn install
나는 캐시에 문제가 없도록 Linux 터미널에서 vscode를 닫아서 만들었다.
기능 인수를 동적으로 입력하고 Typecript v4 이상이면 이 오류가 발생할 수 있다.가지고 있었다.
{
...
getDataThunk: (...args: [string]) => dispatch(getData(...args))
...
}
이 오류는 내가 TS 버전 <= 4.0.0>을 사용하기 전까지는 던져지지 않았다.또한, 퍼진 주장을 갖는 것은 나에게 꽤 지나친 공학적이었고, 그것을 정확히 쉼표로 구분된 함수 논쟁으로 대체하는 것은 그 문제를 해결했다.
너는 이것을 너의 소포에서 고칠 수 있다.json은 다음과 같다.
"@typescript-eslint/eslint-plugin": "^4.18.0",
"@typescript-eslint/parser": "^4.18.0",
내 서체 버전은: "첨부": "^4.1.5"
나의 경우, 나는 내 package.json의 "해결"에 두 개의 의존성을 추가해야만 했다.
"resolutions": {
"@typescript-eslint/parser": "^3.0.0",
"@typescript-eslint/eslint-plugin": "^3.0.0"
}그리고 나는 Typecript 4.1.0을 사용하고 있다.
나는 이 문제를 발견했고 파일의 변경 값 유형으로 해결했다.
나의 경우 나는 a를 선언하였다.
let data: [] = [];
파일 전체가 오류 표시 구문 분석 오류: 변경 시 정의되지 않은 속성 'map'을 읽을 수 없음
let data: any = [];
그것은 일과 오류가 해결된 것이었다.
'programing' 카테고리의 다른 글
| 소품에서 구성 요소 초기화 상태 반응 (0) | 2022.03.26 |
|---|---|
| Python의 원시_input 함수 (0) | 2022.03.26 |
| 로컬 컴퓨터 또는 웹 리소스에서 이미지 또는 그림을 주피터 노트북에 내장하는 방법 (0) | 2022.03.26 |
| Vue 구성 요소가 기본 Vue 인스턴스를 작동하지만 Vue 라우터 구성 요소에서 작동하지 않음 (0) | 2022.03.26 |
| Vue router2가 깊은 중첩 경로를 캡처하지 않음 (0) | 2022.03.26 |