Cannot find module? Using typescript libraries in javascript base project?

I seem to be running into the same issue over and over again with my current project. I started it using the tabs JS base some time ago, and can’t afford the time to rewrite in TS. I am trying to make use of some nice component directives I have found on github, however, when I simply try to import into my page/pages, I always receive the following error:

Cannot find module '../directive/chart/line-chart-demo' from '/Users/username/development/current/graymatters-rct-ionic/app/pages'

A perfect example of a component that I cannot import can be found here: https://github.com/valor-software/ng2-charts/blob/master/demo/components/charts/bar-chart-demo.ts

in my .js:
import {BarChartDemo} from '../directive/chart/bar-chart-demo'

If I attempt to import in my own project, I simply get the Cannot find module error (before you ask, yes that is exactly where the file is found). I assume this is a TS/JS issue, but I hope I’m wrong. Can anyone shed some light?

Yes I would assume that’s the issue, you won’t be able to use TypeScript in a JS project. On the other hand, you can use normal JS in a TypeScript project so you don’t need to rewrite anything, all of the TypeScript stuff is optional. You should be able to just generate a new TypeScript project, copy over your components etc. and be good to go.

Hello,

I can’t include “lodash” library (js) in my TS ionic project.
I have this error : Error TS2307: Cannot find module ‘lodash’.

In first time, I have tried with different import:

import * as _ from ‘lodash’;
import {chunk} from ‘lodash’;

And I have try with rename lodash.d.js in lodash.d.ts
and with import : import * as _ from ‘…/…/node_modules/lodash/lodash.d.ts’;
but all my file is in error in typeScript

is there a setting to autorize js file? or how can I add TS library?

$ typings i lodash

1 Like

Thanks a lot,
Now, I have the good file in .ts in …/typings/modules/lodash
but I try with all this import I have the same error. ‘Cannot find module’

import * as _ from 'lodash';
import {chunk} from 'lodash';
import * as _ from '../../typings/modules/lodash/lodash';
import * as _ from '../../typings/modules/lodash/lodash.d.ts';
and 
import _ from 'lodash';

There are probably a number of ways to deal with this, but what I do is to add typings/index.d.ts to the files stanza of tsconfig.json. That should make everything you have installed with typings visible to tsc.

I have add in tsconfig.json like this :

{
  "compilerOptions": {
    "target": "es5",
    "module": "commonjs",
    "emitDecoratorMetadata": true,
    "experimentalDecorators": true
  },
  "filesGlob": [
    "**/*.ts",
    "!node_modules/**/*"
  ],
  "exclude": [
    "node_modules",
    "typings/main",
    "typings/main.d.ts",
	"typings/index.d.ts"
  ],
  "compileOnSave": false,
  "atom": {
    "rewriteTsconfig": false
  }
}

But I have the same error?

You’re excluding “typings/index.d.ts”. I’m suggesting explicitly including it.

My bad!
I have add this part but I have the same error.

"include": [
"typings/index.d.ts"
],

Finally It’s working but I used an other solution. I have followed the logical of index.d.ts
In my file.ts, I have add this 2 lines :

///<reference path="../../typings/modules/lodash/index.d.ts" />
import * as _ from 'lodash';

I have just see this line /// <reference path="modules/lodash/index.d.ts" /> in the file index.d.ts . And I have add directly to my file.
And I thinks that all libraries are add in this files to link the path.
I thinks, it’s better to add in tsconfig.js but I dont know how do it.

So thanks you for your help. And sorry for my english.

1 Like

hey guzs i getting error ‘can not find modules’ i don’t know why… this error came in visual studio…
if i am run program using CLI then no any issue?
i imported something like below

import { Component } from ‘@angular/core’;
import { AlertController,NavController, Platform,LoadingController,NavParams,MenuController} from ‘ionic-angular’;
import {DatabaseHelper} from ‘…/…/services/DatabaseHelper’;
import {AllFunctions} from ‘…/allFunctions/AllFunctions’;
import {Constants} from ‘…/…/Beans/Constants’;
import {WebService} from ‘…/…/services/webservice’;
import {ResponseString} from ‘…/…/Beans/ResponseString’;
import {LoginTabPage} from ‘…/login-tab/login-tab’;

looks like the best solution is to copy the contents of index.d.ts of that specific typing to main.d.ts.

this helped me resolve my problem with query-string npm package.