Login/Register
Module not found: Error: Cannot resolve module '@types/lodash'
Asked Answered
Solved typescriptwebpacklodashdefinitelytyped
B

2

7

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
Braiding answered 8/1, 2017 at 6:44 Comment(10)
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. – Catherine
@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: github.com/DefinitelyTyped/DefinitelyTyped – Braiding
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. – Catherine
@TimConsolazio Can you write the whole import statement that you had in mind? – Braiding
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. – Catherine
This might be your answer, look here: #38544782 – Catherine
@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: github.com/MiroslavJelaska/connect-four – Braiding
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. – Carrycarryall
It means with TypeScript you need both. lodash for your project and @types/lodash for TypeScript to know how to compile lodash. – Carrycarryall
Is that it, I had no idea what DefinitelyTyped is but I had assumed it was properly installed. – Catherine
B
19

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
Bongbongo answered 9/1, 2017 at 3:27 Comment(2)
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... – Formicary
In addition to JKillians answer you may need to include the following in your tsconfig. "typeRoots": [ "./node_modules/@types" ] – Pronunciation
H
1

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

Heeltap answered 21/2, 2023 at 19:12 Comment(0)

© 2022 - 2024 — McMap. All rights reserved.