TS cannot find modules

Asked 8/11, 2016 at 5:13 Answered 6/9, 2023 at 12:21

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

Typal answered 8/11, 2016 at 5:13 Comment(0)

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.

Wald answered 8/11, 2016 at 22:11 Comment(2)

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.. – Typal 9/11, 2016 at 2:46

This package has been deprecated now, be aware. – Whomp 15/10, 2022 at 15:49

~~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.

Hyrcania answered 27/6, 2018 at 23:33 Comment(3)

"moduleResolution": "node" did it for me – Sailplane 1/4, 2019 at 6:45

This also worked for me, though I'm curious as to why this isn't the default setting in tsconfig, if anyone knows? – Illegible 28/6, 2019 at 10:57

@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. typescriptlang.org/docs/handbook/module-resolution.html – Dolmen 5/12, 2019 at 17:34

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.

Wald answered 8/11, 2016 at 22:11 Comment(2)

This package has been deprecated now, be aware. – Whomp 15/10, 2022 at 15:49

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

Prom answered 16/1, 2022 at 17:37 Comment(0)

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

Donnelly answered 23/5, 2021 at 7:58 Comment(0)

I received this error because I had erroneously named a file as just class-name rather than class-name.ts. Apparently TypeScript relies upon the .ts extension when attempting to execute an import such as import { ClassName } from "./class-name";.

Gottuard answered 6/9, 2023 at 12:21 Comment(0)

Hot tags

Godot Unity Godot Help Programming Godot 4.X GUI GDScript 3D 2D Physics CSharp Godot 3.X VR XR Projects C++

Recommended topics

Hot tags