typescript - TS kan inte hitta moduler

Jag har använt https://github.com/FountainJS/generator-fountain-webapp för att sätta upp ett nytt projekt med React & Typescript. Jag känner mig ganska bekväm med JS eftersom jag har använt node för ett pågående projekt, men är inte bekant med TS där problemet verkar ligga.

Jag har kört generatorn med följande miljö: TypeScript, React, Webpack med NPM, Gulp.

När jag kör gulp serve får jag nedanstående output. Jag är ganska förvirrad över varför det inte kan hitta filerna - de finns alla på mitt filsystem. Jag har tittat på andra frågor och har inte hittat något som löser mitt problem

[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 [email  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 [email  and /Users/omelvin/github_projects/kaizen/tsconfig.json
webpack built 5ccca2fe23cfa5a1a610 in 5073ms

Svar #1

Att ta bort fälten "module" och "target" från tsconfig.json fungerade för mig.

Uppdatering: att ta bort target är okej, men att ta bort module är inte ett alternativ eftersom kompilatorn är beroende av det. Du kan också lösa problemet genom att lägga till "moduleResolution": "node" i tsconfig.

Svar #2

TypeScript är beroende av definitionsfiler som definierar typer, gränssnitt osv. för bibliotek. Jag är inte bekant med FountainJS, men jag antar att det är smart nog att skapa en typings.json-fil i ditt arbetsområde. Om så är fallet behöver du bara installera typings (npm install typings --global) och sedan använda det för att installera definitionerna genom att göra typings install.

Om de inte inkluderade typings.json (även om jag inte kan föreställa mig att de inte skulle göra det), följ instruktionerna i deras README för att söka efter och installera definitioner för beroenden.

Jag lägger vanligtvis till följande rader i package.json så att typerna installeras automatiskt varje gång du kör npm install

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

Om du inte är bekant med TypeScript rekommenderar jag att du går igenom deras grundläggande handledning för att komma igång: https://www.typescriptlang.org/docs/tutorial.html.

Relaterade artiklar