React-apollo: 2.x requires unstated dependency @types/lodash.flowright

[zamiang]

Intended outcome:
Upgrading from 1.x release to the 2.x release.

Actual outcome:

Error at node_modules/react-apollo/browser.d.ts:6:26: Could not find a declaration file for module 'lodash.flowright'. '/Users/x/x/node_modules/lodash.flowright/index.js' implicitly hasan 'any' type.
  Try `npm install @types/lodash.flowright` if it exists or add a new declaration (.d.ts) file containing `declare module 'lodash.flowright';`

How to reproduce the issue:

Install react apollo in a typescript project and run tsc

Version

• [email protected]
• [email protected]

[lednhatkhanh]

Confirm error

[corydeppen]

It looks like the compiler didn't catch this (and many other instances like it) because the noImplicitAny compiler option isn't being used. Unfortunately, installing @types/lodash.flowright won't resolve it and results in an error [ts] Module '"/path/to/node_modules/@types/lodash.flowright/index"' resolves to a non-module entity and cannot be imported using this construct.

Using the lodash-es package (instead of lodash or lodash.flowright) along with the @types/lodash-es package will allow specific functions to be imported in ES modules and compile without error when the noImplicitAny compiler option is used.

- import * as compose from 'lodash.flowright'; 
- export { compose }; 
+ import flowRight from 'lodash-es/flowRight';
+ export { flowRight as compose };

If there is agreement on this approach, I don't mind working on a PR.

[inakianduaga]

Same error here. The Typescript type definition errors are kinda ruining the fun of experimenting with an apollo integration

[EItanya]

Just encountered this same error and used the above fix in my node_modules. Have you started a PR for this? @corydeppen

[corydeppen]

Not yet. I wanted to see if there was agreement on the approach first, but haven't heard anything yet.

[jurosh]

@inakianduaga it's kinda is. Hope this will be resolved soon. For now probably best to downgrade to 1.4.16 where typings are just fine. Migration back to v2 should be quite straightforward later as looks like there aren't really many breaking changes.

[ericlam51]

Tried the solution proposed by @corydeppen and it works. Can we go ahead and make a PR for this?

[stale[bot]]

This issue has been automatically labled because it has not had recent activity. If you have not received a response from anyone, please mention the repository maintainer (most likely @jbaxleyiii). It will be closed if no further activity occurs. Thank you for your contributions to React Apollo!

[corydeppen]

@jbaxleyiii When you have a few minutes, please review my last comment on PR #1344 regarding increasing the bundle size.

[ex3ndr]

Any possible hotfixes?

[jbaxleyiii]

I'm going to make sure this gets fixed today and is released! Sorry for the delay! The post 2.0 launch has been SO busy with projects popping up everywhere!

[ex3ndr]

Actually there are still a problem with lodash-es since it required babel to run on node and this doesn't work well with next.js

[danielrasmuson]

Any known workarounds while this issue gets resolved?

[asmockler]

@danielrasmuson You can add

declare module 'lodash.flowright';

to a d.ts file to silence the warning in the meantime.

[zamiang]

Do believe this should be re-opened since the fix has been reverted.

[sruda]

Same issue, should re-open until fix it.

[amborle]

Until this is fixed I did the following and it is working for me. Replace the following code

import * as compose from 'lodash.flowright';
export { compose };

with

import { flowRight } from "lodash";
export default flowRight; 

in browser.d.ts.

[jonaskello]

I opened #1445 since this issue is closed and does not seem to get any attention.

[rosskevin]

Watchers please check and discuss my comment https://github.com/apollographql/react-apollo/pull/1478#issuecomment-354132340 in the PR.

[roman-16]

Please re-open, same issue!

[rosskevin]

It's fixed on master, which removes it and is unreleased, therefore this issue is closed.

See previous linked PR which states the migration path.

[crisu83]

@rosskevin can we please have a hotfix release soon? This is a pretty obvious and annoying bug.

I fixed it by adding an empty declaration as @asmockler suggested above. While that get rids of the error, it's still a hack.

[itajaja]

@rosskevin Actually this was re-added in https://github.com/apollographql/react-apollo/pull/1572 so we are back to square one. It's kind of annoying but the declare module 'lodash.flowright'; works :)

[lightwave]

@rosskevin Any reason why #1572 re-added the broken re-export of compose from lodash.flowright?

[rosskevin]

@jbaxleyiii didn't want any breaking changes in the next release. It will be removed in the next major.

[MadRabbit]

3 months down the track and it's still an issue :(

[wongmjane]

I had to rewrite my app to something else like Flow to avoid this issue :(

[itajaja]

@wongmjane that sounds a little bit drastc 😅 adding a declare module 'lodash.flowright'; in a types.d.ts file is probably a reasonable workaround while this is addressed

[kamenminkovcom]

The fast way of resolving this is to add "noImplicitAny": false, to tscongfig.json, but if you have any better suggestions I will highly appreciate them. I really don't want to allow any in my project.

[itajaja]

@kamenminkovcom see comment above yours

[kamenminkovcom]

I am new to ts, so sorry if I am asking stupid things but when I add types.d.ts file there is an error. Should I add the file path to my tsconfig.json and in which particular property?

[itajaja]

just as you would include other files: include/exclude/files properties on tsconfig

[wongmjane]

@kamenminkovcom I added the following file and my TypeScript compiler doesn't complain anymore. No noImplicitAny: false is needed:

// apollo-react-lodash-fix.d.ts

declare module 'lodash.flowright';

[DavidHenri008]

Is there an ETA for the fix... This is a bit troubling for new comers.

[stevenwu]

Came across this issue today when using create-react-app v1.1.5.

declare module 'lodash.flowright' didn't work. I needed

declare module 'lodash/flowRight'

Dependencies:

"apollo-boost": "^0.1.16",
"graphql": "^14.0.2",
"graphql-tag": "^2.9.2",
"react-apollo": "^2.2.1"

[saostad]

Problem still exist after upgrade to react-apollo v 2.2.2

Solution for me: downgrade to 2.1.11

[mrbrannan]

Problem still exist after upgrade to react-apollo v 2.2.2

Solution for me: downgrade to 2.1.11

Worked for me as well thanks

[saostad]

it works in version 2.2.4.
Thanks.