React-apollo: Attempted import error: 'compose' is not exported from 'react-apollo'

Created on 9 Aug 2019  路  7Comments  路  Source: apollographql/react-apollo

After upgrading react-apollo to 3.0.0 the following error message is presented:

Attempted import error: 'compose' is not exported from 'react-apollo'

Most helpful comment

@victors1681 It was removed to help reduce the React Apollo bundle size. Since compose was really just a copy of lodash's flowRight, it didn't make sense to keep it in the bundle. Especially when not everyone wanted to use it and when it's quite easy to add flowRight into a project (and alias it as compose if you want to):

npm install lodash.flowright
import * as compose from 'lodash.flowright';

All 7 comments

@luizdanieldesouza compose was removed from React Apollo 3 (see the Breaking Changes section of the Changelog). If you want to keep using compose though, it was just a copy of lodash's flowRight.

@hwillson any idea why it was removed? I'd like to know what is the best practice now because the documentation on https://www.apollographql.com still using compose in their examples.

@victors1681 It was removed to help reduce the React Apollo bundle size. Since compose was really just a copy of lodash's flowRight, it didn't make sense to keep it in the bundle. Especially when not everyone wanted to use it and when it's quite easy to add flowRight into a project (and alias it as compose if you want to):

npm install lodash.flowright
import * as compose from 'lodash.flowright';

import * as compose from 'lodash.flowright';

For some reason this didn't work for me. I had to use:
import flowright from "lodash.flowright";

And simply rename compose to flowRight.

Thanks! It worked for me.

@rooch84 any default import can be named whatever you want. these are all equivalent:
The reason @hwillson is probably using the * as notation is TypeScript.

import flowright from "lodash.flowright";
import foobar from "lodash.flowright";



md5-b648d2d56d43af3e79531c0072ee604b



import compose from "lodash.flowright";

Thanks for the clarification.

Was this page helpful?
0 / 5 - 0 ratings