I have used 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: External: -------------------------------------- UI: UI External: -------------------------------------- [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 4 Answers
̶R̶e̶m̶o̶v̶i̶n̶g̶ ̶"̶m̶o̶d̶u̶l̶e̶"̶ ̶a̶n̶d̶ ̶"̶t̶a̶r̶g̶e̶t̶"̶ ̶f̶i̶e̶l̶d̶s̶ ̶f̶r̶o̶m̶ ̶̶t̶s̶c̶o̶n̶f̶i̶g̶.̶j̶s̶o̶n̶̶ ̶w̶o̶r̶k̶e̶d̶ ̶f̶o̶r̶ ̶m̶e̶.̶
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.
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: .
1you 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
The fix for me was to use tsconfig-paths.
yarn add --dev tsconfig-paths ts-node -r tsconfig-paths/register script.ts 
