TypeScript: Auto import not working for lodash

From https://github.com/Microsoft/vscode/issues/63239

TypeScript Version: 3.3.0-dev.20181214

Search Terms:

  • auto import
  • suggestions / completions

Code

  1. For a simple js project that has lodash installed under node_modules
  2. In a blank js file, type: kebabCase

Expected behavior: Auto import suggestion to import from lodash returned

Actual behavior: No suggestion returned

About this issue

  • Original URL
  • State: closed
  • Created 6 years ago
  • Reactions: 8
  • Comments: 30 (2 by maintainers)

Most upvoted comments

To just fix the problem I do the following:

yarn add @types/lodash@npm:@types/lodash-es

and maybe yarn add lodash@npm:lodash-es

If you want some functionality from lodash that is not part of lodash es, like runInContext, install it under an alias:

yarn add lodash_original@npm:lodash
yarn add @types/lodash_original@npm:@types/lodash

@aleclarson sweet thanks for that video! After installing @types/lodash-es it does work for me!

It will unfortunately be somewhat complicated to switch over to using lodash-es in all my packages.

I still think the better solution would be to somehow alter the lodash index.d.ts so that auto import works correctly. As long as import {flatMap} from "lodash"; is a valid import statement it seems like there should be a way

The primary root cause of this issue is that the JS language service doesn’t aggressively include types for packages it can’t tell you’re using yet…

@RyanCavanaugh This comment shows that the actual problem is occurring for a package that is already in use, so what you’re saying doesn’t seem relevant?

Nevertheless, I want to address your performance claim:

… because doing so would be a fairly substantial perf hit for not a lot of gain.

How often does the dependencies map (in package.json) contain a dependency that isn’t intended to be used in the package? Never. I don’t see how performance is an issue there, and the gain is substantial enough to complain about…

Compounding that is that ES6 destructuring imports from CommonJS modules is not a well-defined operation outside of loaders which ignore the spec to make that work.

Are you suggesting that @types/lodash shouldn’t be using the export as namespace trick? To be clear, that would mean all lodash users must use lodash-es if they want auto-import. I get the feeling that TypeScript doesn’t want to encourage CommonJS modules. 😛

Import in VSC still not working. I have to write _.something to find the method, then delete “_.” and manually write import.

@ricsam while your suggestion does work brilliantly, it is not compatible with npm. I’ve run into this issue with it when people try to use my packages:

npm ERR! Invalid dependency type requested: alias

https://stackoverflow.com/questions/54085943/npm-err-invalid-dependency-type-requested-alias

Out of curiosity, does auto import work if you use lodash-es instead of lodash? lodash-es is an ES module (and therefore does not use the namespace hack), as opposed to normal lodash which is a commonjs module.

On Sun, Mar 10, 2019, 8:40 PM Thomas Rich, notifications@github.com wrote:

@aj-r https://github.com/aj-r is the namespace “hack” causing auto-import to fail?

I’m not sure I understand why anyone would be mixing import and require(). That throws lint errors for me.

— You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub https://github.com/Microsoft/TypeScript/issues/29039#issuecomment-471371029, or mute the thread https://github.com/notifications/unsubscribe-auth/AGpes7jRFCwlPqWMTJjfPUQYfTvMKD75ks5vVaYGgaJpZM4ZUgAz .

To add to this, it does work once you already have an existing import from lodash in the file. The suggestions don’t show up in auto-complete, but it does give a quick fix suggest to add the new method to the existing import from lodash.