bestsource

TS가 모듈을 찾을 수 없음

bestsource 2023. 6. 13. 22:28
반응형

TS가 모듈을 찾을 수 없음

저는 https://github.com/FountainJS/generator-fountain-webapp 을 사용하여 React & Typescript를 사용하여 새로운 프로젝트를 설정했습니다.저는 JS가 진행 중인 프로젝트에 노드를 사용하는 것에 대해 꽤 만족하지만, 문제가 있는 것처럼 보이는 TS에는 익숙하지 않습니다.

저는 다음과 같은 환경에서 제너레이터를 실행했습니다: typ스크립트, react, npm을 포함한 웹팩, gulp.

실행할 때gulp serve저는 아래의 출력을 이해합니다.파일을 찾을 수 없는 이유가 매우 혼란스럽습니다. 파일 시스템에 모두 있습니다.다른 질문을 살펴보았지만 문제를 해결할 수 있는 항목을 찾지 못했습니다.

[23:04:52] Loading /Users/omelvin/github_projects/kaizen/gulp_tasks/browsersync.js
[23:04:53] Loading /Users/omelvin/github_projects/kaizen/gulp_tasks/karma.js
[23:04:54] Loading /Users/omelvin/github_projects/kaizen/gulp_tasks/misc.js
[23:04:54] Loading /Users/omelvin/github_projects/kaizen/gulp_tasks/webpack.js
[23:04:54] Using gulpfile ~/github_projects/kaizen/gulpfile.js
[23:04:54] Starting 'serve'...
[23:04:54] Starting 'webpack:watch'...
ts-loader: Using typescript@2.0.8 and /Users/omelvin/github_projects/kaizen/tsconfig.json
[23:05:01] Time: 6436ms
       Asset     Size  Chunks       Chunk Names
    index.js  1.11 MB       0       main
index.js.map  1.32 MB       0       main

ERROR in ./src/index.tsx
(5,24): error TS2307: Cannot find module 'react'.

ERROR in ./src/index.tsx
(6,27): error TS2307: Cannot find module 'react-dom'.

ERROR in ./src/index.tsx
(7,45): error TS2307: Cannot find module 'react-router'.

ERROR in ./src/index.tsx
(1,1): error TS6053: File '/Users/omelvin/github_projects/kaizen/typings/index.d.ts' not found.

ERROR in ./src/app/title.tsx
(3,24): error TS2307: Cannot find module 'react'.

ERROR in ./src/app/title.tsx
(1,1): error TS6053: File '/Users/omelvin/github_projects/kaizen/typings/index.d.ts' not found.

ERROR in ./src/app/techs/techs.tsx
(3,24): error TS2307: Cannot find module 'react'.

ERROR in ./src/app/techs/techs.tsx
(4,24): error TS2307: Cannot find module 'axios'.

ERROR in ./src/app/techs/techs.tsx
(33,10): error TS2339: Property 'state' does not exist on type 'Techs'.

ERROR in ./src/app/techs/techs.tsx
(39,24): error TS2503: Cannot find namespace 'Axios'.

ERROR in ./src/app/techs/techs.tsx
(40,14): error TS2339: Property 'setState' does not exist on type 'Techs'.

ERROR in ./src/app/techs/techs.tsx
(51,17): error TS2339: Property 'state' does not exist on type 'Techs'.

ERROR in ./src/app/techs/techs.tsx
(1,1): error TS6053: File '/Users/omelvin/github_projects/kaizen/typings/index.d.ts' not found.

ERROR in ./src/app/techs/tech.tsx
(3,24): error TS2307: Cannot find module 'react'.

ERROR in ./src/app/techs/tech.tsx
(50,44): error TS2339: Property 'props' does not exist on type 'TechComponent'.

ERROR in ./src/app/techs/tech.tsx
(52,17): error TS2339: Property 'props' does not exist on type 'TechComponent'.

ERROR in ./src/app/techs/tech.tsx
(54,18): error TS2339: Property 'props' does not exist on type 'TechComponent'.

ERROR in ./src/app/techs/tech.tsx
(55,18): error TS2339: Property 'props' does not exist on type 'TechComponent'.

ERROR in ./src/app/techs/tech.tsx
(1,1): error TS6053: File '/Users/omelvin/github_projects/kaizen/typings/index.d.ts' not found.

ERROR in ./src/app/main.tsx
(3,24): error TS2307: Cannot find module 'react'.

ERROR in ./src/app/main.tsx
(1,1): error TS6053: File '/Users/omelvin/github_projects/kaizen/typings/index.d.ts' not found.

ERROR in ./src/app/header.tsx
(3,24): error TS2307: Cannot find module 'react'.

ERROR in ./src/app/header.tsx
(1,1): error TS6053: File '/Users/omelvin/github_projects/kaizen/typings/index.d.ts' not found.

ERROR in ./src/app/footer.tsx
(3,24): error TS2307: Cannot find module 'react'.

ERROR in ./src/app/footer.tsx
(1,1): error TS6053: File '/Users/omelvin/github_projects/kaizen/typings/index.d.ts' not found.

ERROR in /Users/omelvin/github_projects/kaizen/src/app/footer.spec.tsx
(4,24): error TS2307: Cannot find module 'react'.

ERROR in /Users/omelvin/github_projects/kaizen/src/app/footer.spec.tsx
(5,27): error TS2307: Cannot find module 'react-dom'.

ERROR in /Users/omelvin/github_projects/kaizen/src/app/footer.spec.tsx
(6,28): error TS2307: Cannot find module 'react-addons-test-utils'.

ERROR in /Users/omelvin/github_projects/kaizen/src/app/footer.spec.tsx
(10,1): error TS2304: Cannot find name 'describe'.

ERROR in /Users/omelvin/github_projects/kaizen/src/app/footer.spec.tsx
(11,3): error TS2304: Cannot find name 'it'.

ERROR in /Users/omelvin/github_projects/kaizen/src/app/footer.spec.tsx
(14,5): error TS2304: Cannot find name 'expect'.

ERROR in /Users/omelvin/github_projects/kaizen/src/app/footer.spec.tsx
(1,1): error TS6053: File '/Users/omelvin/github_projects/kaizen/typings/index.d.ts' not found.
Child html-webpack-plugin for "index.html":
         Asset    Size  Chunks       Chunk Names
    index.html  564 kB       0
[23:05:01] Finished 'webpack:watch' after 6.45 s
[23:05:01] Starting 'watch'...
[23:05:01] Finished 'watch' after 54 ms
[23:05:01] Starting 'browsersync'...
[23:05:01] Finished 'browsersync' after 78 ms
[23:05:01] Finished 'serve' after 6.58 s
[BS] [BrowserSync SPA] Running...
[BS] Access URLs:
 --------------------------------------
       Local: http://localhost:3000
    External: http://10.193.122.24:3000
 --------------------------------------
          UI: http://localhost:3001
 UI External: http://10.193.122.24:3001
 --------------------------------------
[BS] Serving files from: .tmp
[BS] Serving files from: src
ts-loader: Using typescript@2.0.8 and /Users/omelvin/github_projects/kaizen/tsconfig.json
webpack built 5ccca2fe23cfa5a1a610 in 5073ms

다음에서 "모듈" 및 "대상" 필드 제거 tsconfig.json저를 위해 일했습니다.

업데이트: 제거target괜찮지만 제거module컴파일러가 의존하기 때문에 옵션이 아닙니다.다음을 추가하여 문제를 해결할 수도 있습니다."moduleResolution": "node"에게tsconfig.

TypeScript는 라이브러리의 유형, 인터페이스 등을 정의하는 정의 파일에 의존합니다.파운틴JS에 대해서는 잘 모르지만, 제 생각에는 그것이 충분히 똑똑하다고 생각합니다.typings.json작업영역에 파일을 저장합니다.그렇다면 타이핑을 설치하기만 하면 됩니다(npm install typings --global)을 사용하여 다음을 수행하여 정의를 설치합니다.typings install.

만약 그들이 포함하지 않았다면.typings.json(그렇지 않을 것이라고는 상상할 수 없지만) 의 지침에 따라 종속성에 대한 정의를 검색하고 설치합니다.

저는 일반적으로 다음 행을 추가합니다.package.json실행할 때마다 자동으로 타이핑이 설치됩니다.npm install

"scripts": { "postinstall": "npm run typings", "typings": "typings install", }

TypeScript에 익숙하지 않은 사용자는 기본 튜토리얼인 https://www.typescriptlang.org/docs/tutorial.html 을 통해 시작하는 것이 좋습니다.

저는 tsconfig-paths를 사용하는 것이 수정되었습니다.

yarn add --dev tsconfig-paths

ts-node -r tsconfig-paths/register script.ts

https://github.com/TypeStrong/ts-node/issues/422 을 참조하십시오.

당신은 당신의 안에 다음이 존재하는지 확인할 필요가 있습니다.tsconfig.json파일

{
    "compilerOptions": {
...
...
      "allowJs": true,
      "skipLibCheck": true,
      "esModuleInterop": true,
      "allowSyntheticDefaultImports": true,
      "strict": true,
      "forceConsistentCasingInFileNames": true,
      "moduleResolution": "node",
      "resolveJsonModule": true,
      "isolatedModules": true,
...
...
    },
    "include": ["src", "decs.d.ts"]
  }  

이 행을 주의하십시오.

"include": ["src", "decs.d.ts"]

파일을 생성했는지 확인합니다.decs.d.ts폴더 안에src

그래서 파일의 내용은src/decs.d.ts그래야 한다

declare module 'jwt-decode';

어디에jwt-decode가져올 TS 모듈의 이름입니다.

그러면 모듈을 찾을 수 없음 오류가 해결됩니다.

언급URL : https://stackoverflow.com/questions/40479432/ts-cannot-find-modules

반응형