Unable to bundle using rollup

[vladshcherbin]

Intended outcome:

I'm trying to bundle an app using rollup. Bundling basic react app works, but gives errors when react-apollo is added.

Actual outcome:

Rollup gives errors. The problem is that without browser flag it takes stream and with flag it takes umd version. I've seen this PR and with latest beta it gives this errors. Not sure how to solve this normally.

Rollup errors:

• when not using browser flag in config

• when using browser flag in config

How to reproduce the issue:

Here is a simple reproduction repo - https://github.com/VladShcherbin/rollup-react-app

Use two commands to see errors, use this flag to toggle browser target:

yarn
yarn build:rollup

Version

Package versions

[jaydenseric]

It's not working for me with Webpack via Next.js either.

[vladshcherbin]

@jaydenseric I've tested 2.1.0-beta.0 and it's working for me with webpack, which can bundle almost every shit you throw in it.

I've also tested #1591 and it also works for me.

[vladshcherbin]

@jaydenseric I've added webpack config and build to the repo if it can somehow help.

[bthallion]

I'm seeing the same errors using rollup in react-apollo 2.0.4

[sholladay]

So the proper fix would involve react-apollo providing an actual ES module build, which it's certainly capable of doing since it's bundled with Rollup. That would make it much easier for modern bundlers to import the library.

That said, here are two workarounds that are available. Be sure to use the resolve plugin's browser : true mode.

1. Use the default export of react-apollo:

   Take code like this...

   import { ApolloProvider } from 'react-apollo';
   console.log(ApolloProvider);

   ... and replace it with ...

   import apollo from 'react-apollo';
   console.log(apollo.ApolloProvider);

   Or if you don't like the namespace...

   import apollo from 'react-apollo';
   const { ApolloProvider } = apollo;
   console.log(ApolloProvider);

2. Use the commonjs plugin's custom named exports feature

   commonjs({
       include : [
           'node_modules/**'
       ],
       exclude : [
           'node_modules/process-es6/**'
       ],
       namedExports : {
           'node_modules/react-apollo/react-apollo.browser.umd.js' : [
               'ApolloProvider'
           ],
           'node_modules/react/index.js' : [
               'Children',
               'Component',
               'createElement'
           ]
       }
   })

The first approach simply imports the UMD exports object as it is. It's a little less future proof since react-apollo will undoubtedly provide true named exports in the future, at which point it probably wouldn't have these classes hanging off the default export. The latter approach allows you to treat react-apollo as if it had named exports, but you have to specify them by hand since the UMD build is not statically analyzable and Rollup does not want to make assumptions about the exports object that it cannot confidently infer.

[dai-shi]

As this is still open, here is my workaround.
https://github.com/ds300/patch-package

apollo-cache-inmemory+1.3.5_patch.txt
react-apollo+2.2.4_patch.txt

[hwillson]

Our bundling strategy has been revamped in recent versions of react-apollo. If this is still a problem using react-apollo 2.5.6, let us know. Thanks!

[vladshcherbin]

Seems to be fixed now, thanks 🎉