React-apollo: 2.1.0 error on webpack compile

[wroughtec]

Intended outcome:
React Apollo builds succesfully

Actual outcome:
In the latest React Apollo (2.1.0) I get the following error when compiling with webpack:

```node_modules/react-apollo/index.js:1
(function (exports, require, module, __filename, __dirname) { export * from './browser';
^^^^^^

SyntaxError: Unexpected token export
at createScript (vm.js:80:10)
at Object.runInThisContext (vm.js:139:10)
at Module._compile (module.js:607:28)
at Object.Module._extensions..js (module.js:654:10)
at Module.load (module.js:556:32)
at tryModuleLoad (module.js:499:12)
at Function.Module._load (module.js:491:3)
at Module.require (module.js:587:17)
at require (internal/module.js:11:18)
at eval (webpack-internal:///24:1:18)
error An unexpected error occurred: "Command failed.
```

This occurs when compiling on the server code and was not an issue with RC3, after some experimenting the issues seems to have started from RC4

How to reproduce the issue:
I have a SSR react app with the server compiled with webpack with the babel-loader set to node: 8.10.0 (using node 8.10.0). I am guessing it is probably something I will need to change my side, just odd in RC3 (and earlier) had no issues but in the stable version had issues :(

Version

• [email protected]
• [email protected]

[wesbos]

this is likely because your babel isn't converting to commonjs modules

[wroughtec]

its odd as the rest of the server uses es6 import & export with no issue using babel-loader with:

presets: [
  [
    '@babel/preset-env',
    {
       targets: {
          node: '8.10.0'
        },
        loose: true,
        modules: false
     }
   ],
  '@babel/react'
]

Have tried various things including using babel register & @babel/plugin-transform-modules-commonjs etc. It only seems to be an issue on the server side. wondering if its the export * that causes the issue but am guessing at the mo lol

[LawJolla]

Here's the problem. Between rc-3 and rc-4, React-Apollo stopped transpiling the source and points Webpack to the UMD via package.json "browser" field. I think the problem probably relates to Webpack 1. If you're stuck on Webpack 1 (like you're using Gatsby), I'm not sure the resolution. See, e.g., https://github.com/gatsbyjs/gatsby/issues/3192

[wesbos]

I think I'm running into this issue now with Next.js - any solution?

[wroughtec]

nope sticking with RC3 at the mo :(

Using webpack 3

[LawJolla]

@wroughtec Interesting. I don't know / understand Webpack well enough, but that suggests there's a setting. I've looked all over for how to transpile modules, but nothing -- just your own code.

[wroughtec]

Ok just had another go think I have found the issue. I missed in my .babelrc file this:

"module-resolver",
      {
        "root": ["./"],
        "alias": {
          ...Other resolvers
          "^react-apollo$": "react-apollo/index"
        }
      }

Removing this seems to have resolved the server build (the other option I just found was to add a module resolve to the umd file in the webpack babel loader similar to what @wesbos did https://github.com/wesbos/Advanced-React/blob/master/frontend/package.json)

I am not even sure where that line came from (although git blame definitely blames me lol) must have been a copy and paste from a tutorial or example...

Anyway seems to work now. 👍

[LawJolla]

I'm still having issues with this problem and would love some input.

I'm running NextJS. Here's my .babelrc

{
  "presets": [
    "next/babel"
  ],
  "plugins": [
    ["styled-components",
      {
        "ssr": true,
        "displayName": true
      }
    ]
  ]
}

I see that @wesbos had:

"plugins": [
      [
        "module-resolver",
        {
          "alias": {
            "react-apollo": "react-apollo/react-apollo.browser.umd.js"
          }
        }
      ]
    ]

But then later removed it here:
https://github.com/wesbos/Advanced-React/commit/400a1c3028429d4a0946e29be65b32479eada02a#diff-0a6694dd0d6b93a2aa14f32e3d873b4c

I'm not sure what else changed in the code that he was able to remove it. Any help is really appreciated!

[wesbos]

That was a shot at trying to fix something that never worked - not sure how I got around this..

[Frolanta]

Had a similar problem today, got the same error only from server side.
The problem was I believe my IDE's auto import feature (or me) who messed up,

I had: import { graphql } from "react-apollo/index"; In one of my components.
Change to: import { graphql } from "react-apollo;

Maybe you did something similar idk, hope it's help.