React-apollo: graphql import broken in Next.js since v2.1.0-alpha.1

[jaydenseric]

Importing graphql in a component in a Next.js project works in v2.1.0-alpha.0 but causes errors for all newer alpha and beta versions.

import { graphql } from 'react-apollo'

I'm unsure if this is special to Next.js or if it is simply an issue for all Webpack users.

[jaydenseric]

Potentially related? https://github.com/apollographql/react-apollo/issues/1590

[chutiphon-k]

ME TOO

[binkpitch]

I got this too.

[edorivai]

This is not Next.js specific.

Running the following in node also fails:

const apollo = require('react-apollo');

console.log(apollo.graphql); // logs "undefined"

I've got this happening in [email protected] btw

[petetnt]

Pretty sure this was borked in https://github.com/apollographql/react-apollo/pull/1576 / https://github.com/apollographql/react-apollo/commit/18939c21d97be71965c38e8f5cfb28d564b7bc6e

[vjpr]

next.js transpilation:

var _reactApollo = require('react-apollo');
(0, _reactApollo) // {default: ..., renderToStringWithData: ...}
// Missing graphql export.

_react-apollo/index.js_

"use strict";
function __export(m) {
    for (var p in m) if (!exports.hasOwnProperty(p)) exports[p] = m[p];
}
Object.defineProperty(exports, "__esModule", { value: true });
__export(require("./browser"));
var renderToStringWithData_1 = require("./renderToStringWithData");
exports.renderToStringWithData = renderToStringWithData_1.renderToStringWithData;
//# sourceMappingURL=index.js.map

_react-apollo/index.mjs_

export * from './browser';
export { renderToStringWithData } from './renderToStringWithData';

_package.json_

...
"main": "react-apollo.umd.js"
"module": "index.mjs",
"browser": "react-apollo.browser.umd.js",
...

---

// fails
import {graphql} from 'react-apollo/index.js'
import {graphql} from 'react-apollo/index'

// fails too (i thought this worked but it doesn't)
import {graphql} from 'react-apollo/index.mjs'

~I guess a workaround could be to get Next to choose mjs over js.~

---

Okay so react-apollo/index.js works. But the main entry in pjson is loading the umd.js that is broken.

The workaround is to make it us the index.js. I do this in my .babelrc like so:

Clear your node_modules/.cache and build too.

You need babel-plugin-module-resolver too.

"plugins": [
    [
      "module-resolver",
      {
        "alias": {
          "^react-apollo$": "react-apollo/index"
        }
      }
    ]
  ]

_EDIT: Changed from json5 to json format. @pantharshit00_

Hopefully its fixed soon though.

[pantharshit00]

Thanks for the workaround

Copy and paste ninjas there is a syntax error in the babelrc snippet so paste this snippet instead. Above one has : and " synatx issues

 "plugins": [
    [
      "module-resolver",
      {
        "alias": {
          "^react-apollo$": "react-apollo/index"
        }
      }
    ]
  ]

Thanks again @vjpr

I hope the apollo team get this working soon so that I may eliminate babel plugin in future .

[brandonmp]

hm. implementing the fix in post above creates all kinds of errors w/ renderToStringWithData.js and react-dom

anyone else hitting this?

error:

ERROR in ./node_modules/react-apollo/renderToStringWithData.js
Module not found: Error: Can't resolve 'react-dom/server' in '/mnt/c/Users/brand/code/admitbrain/node_modules/react-apollo'
 @ ./node_modules/react-apollo/renderToStringWithData.js 3:15-42
 @ ./node_modules/react-apollo/index.js
 @ ./higher-order-components/withApollo.js
 @ ./pages/index.js
 @ multi ./pages/index.js

[pantharshit00]

@brandonmp @vjpr This is now fixed in next js.

https://github.com/zeit/next.js/releases/tag/5.0.1-canary.2

[FredyC]

It's somewhat funny looking within a debugger when Webpack (in CRA)

[wesbos]

I've tried the posted workaround and I still get this error:

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

Anyone have some insight to what is happening?

[pantharshit00]

@wesbos Hi I am one of your happy customers.

I too got those errors.
From my investigation there is no need of workaround now.

Stable react Apollo is compatible with next.

Your next version should be higher than next 5.0.1-canary2 . That fixes this message. I recommend the newly launched 5.1

And react Apollo version should be 2.1 or higher not any beta version.

This is a new project using both https://github.com/JesseRWeigel/javascript-af

[wesbos]

@pantharshit00 thank you - I tried upgrading to Next 5.1 and the error persists :( - so I'm not sure if we had the same errors

[wesbos]

pretty sure this can be closed

[rosskevin]

I'm pretty sure this was solved in July. If not ping me and I'll reopen.