TS cannot find modules

Question

I have used https://github.com/FountainJS/generator-fountain-webapp to set up a new project using React & Typescript. I'm pretty comfortable with JS having used node for an ongoing project, but not familiar with TS where the problem seems to lie.

I have ran the generator with the following environment: typescript, react, webpack w/ NPM, gulp.

When I run gulp serve I get the output below. I'm quite confused why it can't find the files - they are all there on my file system. I've looked at other questions and haven't found anything that resolves my issue

[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

score 48 · Answer 1 · edited Dec 13 '22 at 14:40

48

~~Removing "module" and "target" fields from tsconfig.json worked for me.~~

Update: removing target is ok, but removing module is not an option as the compiler depends on it. You can also solve the problem by adding "moduleResolution": "node" to the tsconfig.

edited Dec 13 '22 at 14:40

Robert

5,735
3
40
53

answered Jun 27 '18 at 23:33

Hyphen Wrex

645
5
9

16

"moduleResolution": "node" did it for me – Uri Klar Apr 01 '19 at 06:45
4

This also worked for me, though I'm curious as to why this isn't the default setting in tsconfig, if anyone knows? – Nicholas Kircher Jun 28 '19 at 10:57
1

@NicholasKircher Setting to `node` tells the compiler how to locate modules, `classic` is the default for this option. The docs do a pretty good job of explaining, I wanted to know too. https://www.typescriptlang.org/docs/handbook/module-resolution.html – nihiser Dec 05 '19 at 17:34

score 9 · Accepted Answer · answered Nov 08 '16 at 22:11

TypeScript relies on definition files that define the types, interfaces, etc. for libraries. I'm not familiar with FountainJS, but I'm guessing it's smart enough to create a typings.json file in your workspace. If so, all you need to do is install typings (npm install typings --global) and then use it to install the definitions by doing typings install.

If they didn't include typings.json (though I can't imagine they wouldn't), follow the instructions on their README to search for and install definitions for the dependencies.

I generally add the following lines to package.json so that the typings will be installed automatically any time you run npm install

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

If you're not familiar with TypeScript, I recommend going through their basic tutorial to get you started: https://www.typescriptlang.org/docs/tutorial.html.

I'm a bit embarrassed, but thank you. I worked on this a few days earlier and then came back to it, so not 100%, but i swear I did this. I did have some problems with npm so I had to reinstall that and now doing this again it worked.. — Vanquish46, Nov 09 '16 at 02:46

score 5 · Answer 3 · answered Jan 16 '22 at 17:37

5

The fix for me was to use tsconfig-paths.

yarn add --dev tsconfig-paths

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

see https://github.com/TypeStrong/ts-node/issues/422

answered Jan 16 '22 at 17:37

mowwwalker

16,634
25
104
157

score 3 · Answer 4 · answered May 23 '21 at 07:58

you need to ensure the following exists in your tsconfig.json file

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

notice this line

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

ensure that you create the file decs.d.ts in the folder src

so the content of the file src/decs.d.ts should be

declare module 'jwt-decode';

where jwt-decode is the name of whatever ts module you need to import

And that should resolve the can not find module error

TS cannot find modules

4 Answers4

Linked