6

I'm stuck and looking for help.

I'm not sure where the problem actually is but I hope to find the answer.

Problem details

I've installed '@types/lodash' using following command:

npm install --save-dev @types/lodash

And imported lodash in my .ts file using:

import * as _ from '@types/lodash';

When I run webpack I get following error:

ERROR in ./app/scripts/Components/GameBoard.ts
Module not found: Error: Cannot resolve module '@types/lodash' in /Users/mjelaska/Documents/DevProjects/connect-four/src/app/scripts/Components
 @ ./app/scripts/Components/GameBoard.ts 3:8-32

Then I tried to get more details with

webpack --display-error-details

and got ⇣

ERROR in ./app/scripts/Components/GameBoard.ts
Module not found: Error: Cannot resolve module '@types/lodash' in /Users/mjelaska/Documents/DevProjects/connect-four/src/app/scripts/Components
resolve module @types/lodash in /Users/mjelaska/Documents/DevProjects/connect-four/src/app/scripts/Components
  looking for modules in /Users/mjelaska/Documents/DevProjects/connect-four/src/node_modules
    resolve 'file' or 'directory' lodash in /Users/mjelaska/Documents/DevProjects/connect-four/src/node_modules/@types
      resolve file
        /Users/mjelaska/Documents/DevProjects/connect-four/src/node_modules/@types/lodash.webpack.js doesn't exist
        /Users/mjelaska/Documents/DevProjects/connect-four/src/node_modules/@types/lodash is not a file
        /Users/mjelaska/Documents/DevProjects/connect-four/src/node_modules/@types/lodash.web.js doesn't exist
        /Users/mjelaska/Documents/DevProjects/connect-four/src/node_modules/@types/lodash.ts doesn't exist
        /Users/mjelaska/Documents/DevProjects/connect-four/src/node_modules/@types/lodash.js doesn't exist
      resolve directory
        directory default file index
          resolve file index in /Users/mjelaska/Documents/DevProjects/connect-four/src/node_modules/@types/lodash
            /Users/mjelaska/Documents/DevProjects/connect-four/src/node_modules/@types/lodash/index doesn't exist
            /Users/mjelaska/Documents/DevProjects/connect-four/src/node_modules/@types/lodash/index.webpack.js doesn't exist
            /Users/mjelaska/Documents/DevProjects/connect-four/src/node_modules/@types/lodash/index.web.js doesn't exist
            /Users/mjelaska/Documents/DevProjects/connect-four/src/node_modules/@types/lodash/index.ts doesn't exist
            /Users/mjelaska/Documents/DevProjects/connect-four/src/node_modules/@types/lodash/index.js doesn't exist
        use  from package.json
          resolve 'file' or 'directory' /Users/mjelaska/Documents/DevProjects/connect-four/src/node_modules/@types/lodash
            resolve file
              /Users/mjelaska/Documents/DevProjects/connect-four/src/node_modules/@types/lodash is not a file
              /Users/mjelaska/Documents/DevProjects/connect-four/src/node_modules/@types/lodash.webpack.js doesn't exist
              /Users/mjelaska/Documents/DevProjects/connect-four/src/node_modules/@types/lodash.web.js doesn't exist
              /Users/mjelaska/Documents/DevProjects/connect-four/src/node_modules/@types/lodash.ts doesn't exist
              /Users/mjelaska/Documents/DevProjects/connect-four/src/node_modules/@types/lodash.js doesn't exist
            resolve directory
              use  from package.json
                abort resolving because of recursion
              directory default file index
                resolve file index in /Users/mjelaska/Documents/DevProjects/connect-four/src/node_modules/@types/lodash
                  /Users/mjelaska/Documents/DevProjects/connect-four/src/node_modules/@types/lodash/index doesn't exist
                  /Users/mjelaska/Documents/DevProjects/connect-four/src/node_modules/@types/lodash/index.webpack.js doesn't exist
                  /Users/mjelaska/Documents/DevProjects/connect-four/src/node_modules/@types/lodash/index.web.js doesn't exist
                  /Users/mjelaska/Documents/DevProjects/connect-four/src/node_modules/@types/lodash/index.ts doesn't exist
                  /Users/mjelaska/Documents/DevProjects/connect-four/src/node_modules/@types/lodash/index.js doesn't exist
[/Users/mjelaska/Documents/DevProjects/connect-four/src/node_modules/@types/lodash.webpack.js]
[/Users/mjelaska/Documents/DevProjects/connect-four/src/node_modules/@types/lodash.web.js]
[/Users/mjelaska/Documents/DevProjects/connect-four/src/node_modules/@types/lodash.ts]
[/Users/mjelaska/Documents/DevProjects/connect-four/src/node_modules/@types/lodash.js]
[/Users/mjelaska/Documents/DevProjects/connect-four/src/node_modules/@types/lodash/index]
[/Users/mjelaska/Documents/DevProjects/connect-four/src/node_modules/@types/lodash/index.webpack.js]
[/Users/mjelaska/Documents/DevProjects/connect-four/src/node_modules/@types/lodash/index.web.js]
[/Users/mjelaska/Documents/DevProjects/connect-four/src/node_modules/@types/lodash/index.ts]
[/Users/mjelaska/Documents/DevProjects/connect-four/src/node_modules/@types/lodash/index.js]
[/Users/mjelaska/Documents/DevProjects/connect-four/src/node_modules/@types/lodash.webpack.js]
[/Users/mjelaska/Documents/DevProjects/connect-four/src/node_modules/@types/lodash.web.js]
[/Users/mjelaska/Documents/DevProjects/connect-four/src/node_modules/@types/lodash.ts]
[/Users/mjelaska/Documents/DevProjects/connect-four/src/node_modules/@types/lodash.js]
[/Users/mjelaska/Documents/DevProjects/connect-four/src/node_modules/@types/lodash/index]
[/Users/mjelaska/Documents/DevProjects/connect-four/src/node_modules/@types/lodash/index.webpack.js]
[/Users/mjelaska/Documents/DevProjects/connect-four/src/node_modules/@types/lodash/index.web.js]
[/Users/mjelaska/Documents/DevProjects/connect-four/src/node_modules/@types/lodash/index.ts]
[/Users/mjelaska/Documents/DevProjects/connect-four/src/node_modules/@types/lodash/index.js]
 @ ./app/scripts/Components/GameBoard.ts 3:8-32

Setup details

package.json (w/o some irrelevant info)

{
  "devDependencies": {
    "@types/lodash": "^4.14.47",
    "@types/node": "^6.0.55",
    "@types/pixi.js": "^4.3.1",
    "npm": "^4.0.5",
    "ts-loader": "^1.3.3",
    "typescript": "^2.1.4",
    "webpack": "^1.14.0"
  }
}

tsconfig.json

{
    "compilerOptions": {
        "module": "commonjs",
        "target": "es5",
        "noImplicitAny": true,
        "sourceMap": false,
        "removeComments": true,
        "typeRoots": [
          "./node_modules/@types"
        ]
    },
    "files": [
      "./app/scripts/main.ts"
    ]
}

webpack.config.js

module.exports = {
    entry: './app/scripts/main.ts',
    output: {
        filename: './build/scripts/main.js'
    },
    resolve: {
        extensions: ['', '.webpack.js', '.web.js', '.ts', '.js']
    },
    module: {
        loaders: [
            {
                test: /\.ts$/,
                loader: 'ts-loader'
            }
        ]
    }
};

Environment details

node: v6.9.4
npm: v4.0.5
webpack: v1.14.0 (as seen in `package.json`, installed also globally)

Project at the moment when problem occurred: https://github.com/MiroslavJelaska/connect-four/tree/4941ca792096602831940f76fa350e461808a8c5

⬆️ Update #1

Installing lodash to dependencies instead of devDependencies doesn't help:

npm install --save @types/lodash
Miro
  • 1,778
  • 6
  • 24
  • 42
  • Could just be that I've never seen it before, but as far as I know you just install lodash this way (based on what I've seen/done and according to the npm doc on it): $ npm i -g npm $ npm i --save lodash Then you'd just import "lodash". What is the purpose of the "@types"? It seems to be throwing off the module resolution in your app. – Tim Consolazio Jan 08 '17 at 07:25
  • @TimConsolazio I've tried to install using --save but it doesn't make a difference. "@types" is prefix of DefinitelyTyped project for TypeScript type definitions. Here is the GitHub repo: https://github.com/DefinitelyTyped/DefinitelyTyped – Miro Jan 08 '17 at 07:48
  • Have you tried installing it just using the basic command "npm install lodash --save-dev", and then just importing it as-is without the DefinitelyTyped stuff. Maybe the DefinitelyTyped thing (which I know nothing about) is throwing it off. Note that these details (that you are doing something besides the base install) will help, this might actually be a DefinitelyTyped (whatever it is/supposed to do) problem of some kind. – Tim Consolazio Jan 08 '17 at 07:51
  • @TimConsolazio Can you write the whole import statement that you had in mind? – Miro Jan 08 '17 at 07:54
  • I just took a look at the .md for the project you indicated. You sure this works in Angular 2? The doc only talks about Angular JS as far as I can see. Searching the entire doc only brings up "Angular JS" it never anywhere says "Angular 2", "Angular2", etc. Sometimes it looks like it might be talking about Angular 2, but it never says it clearly as far as I can tell. – Tim Consolazio Jan 08 '17 at 07:56
  • This might be your answer, look here: http://stackoverflow.com/questions/38544282/angular-2-cli-build-with-lodash – Tim Consolazio Jan 08 '17 at 08:02
  • @TimConsolazio You are talking about DefinitelyTyped? It's not tied to Angular 2. It provides TS definitions for hundreds libraries and frameworks. The SO answer that you provided has completely different configuration than my project and is not suitable as far as I can tell. Also, I'm not using Angular in my project. Project repo can be found at: https://github.com/MiroslavJelaska/connect-four – Miro Jan 08 '17 at 08:09
  • Declaration files are type definitions for Typescript to be used at compile time and not for you to use in your project. `npm i -D lodash` and `import * as _ from 'lodash'` to use lodash in your project. When you install `@types/lodash` it will be used automatically by TypeScript. – jal Jan 08 '17 at 11:25
  • It means with TypeScript you need both. `lodash` for your project and `@types/lodash` for TypeScript to know how to compile `lodash`. – jal Jan 08 '17 at 11:27
  • Is that it, I had no idea what DefinitelyTyped is but I had assumed it was properly installed. – Tim Consolazio Jan 08 '17 at 12:16

2 Answers2

16

You need the actual lodash package (which contains the JS code that is lodash) and you also need the @types/lodash package, which provides type definitions for the lodash package (essentially, it tells TypeScript what's in the lodash package).

So, you want to run both of these commands to get those two packages:

npm install --save-dev @types/lodash
npm install --save lodash

Then in your code, you import it as such:

import * as _ from 'lodash';

_.zip(array1, array1); // or whatever
JKillian
  • 18,061
  • 8
  • 41
  • 74
  • So I've run into a similar issue with 'exceljs' I've got both `exceljs` and `@types/exceljs` and my import statement is `import * as Excel from 'exceljs';`, but I still get a Module not found, cannot resolve error... – Oliver Oct 06 '17 at 12:40
  • In addition to JKillians answer you may need to include the following in your tsconfig. "typeRoots": [ "./node_modules/@types" ] – Jeremy Jul 01 '22 at 15:15
0

For me declare module "*.lodash"; in *.d.ts worked

Fedor
  • 17,146
  • 13
  • 40
  • 131
Venkat
  • 47
  • 2