next@7 + graphql@0.13.2 prevent React from initialize

[reicheltp]

Bug report

Describe the bug

next@7 prevent React from initialize in the browser if using graphql@0.13.2, but SSR is working fine.

This error prevents React from initializing and thus no interaction with the webpage is possible.

The following error is shown in the console:

Error was not caught ReferenceError: "require is not defined"

Error was not caught ReferenceError: "require is not defined" mjshttp://localhost:3030/_next/static/development/pages/_app.js:15485:1__webpack_require__http://localhost:3030/_next/static/runtime/webpack.js:790:13fnhttp://localhost:3030/_next/static/runtime/webpack.js:151:20mjshttp://localhost:3030/_next/static/development/pages/_app.js:19496:77__webpack_require__http://localhost:3030/_next/static/runtime/webpack.js:790:13fnhttp://localhost:3030/_next/static/runtime/webpack.js:151:20mjshttp://localhost:3030/_next/static/development/pages/_app.js:21542:69__webpack_require__http://localhost:3030/_next/static/runtime/webpack.js:790:13fnhttp://localhost:3030/_next/static/runtime/webpack.js:151:20mjshttp://localhost:3030/_next/static/development/pages/_app.js:14900:72__webpack_require__http://localhost:3030/_next/static/runtime/webpack.js:790:13fnhttp://localhost:3030/_next/static/runtime/webpack.js:151:20mjshttp://localhost:3030/_next/static/development/pages/_app.js:15020:66__webpack_require__http://localhost:3030/_next/static/runtime/webpack.js:790:13fnhttp://localhost:3030/_next/static/runtime/webpack.js:151:20jshttp://localhost:3030/_next/static/development/pages/_app.js:5523:65__webpack_require__http://localhost:3030/_next/static/runtime/webpack.js:790:13fnhttp://localhost:3030/_next/static/runtime/webpack.js:151:20jshttp://localhost:3030/_next/static/development/pages/_app.js:5392:64__webpack_require__http://localhost:3030/_next/static/runtime/webpack.js:790:13fnhttp://localhost:3030/_next/static/runtime/webpack.js:151:20jshttp://localhost:3030/_next/static/development/pages/_app.js:1143:75__webpack_require__http://localhost:3030/_next/static/runtime/webpack.js:790:13fnhttp://localhost:3030/_next/static/runtime/webpack.js:151:20jshttp://localhost:3030/_next/static/development/pages/_app.js:13:70jshttp://localhost:3030/_next/static/development/pages/_app.js:12:29__webpack_require__http://localhost:3030/_next/static/runtime/webpack.js:790:13fnhttp://localhost:3030/_next/static/runtime/webpack.js:151:20jshttp://localhost:3030/_next/static/development/pages/_app.js:71:70jshttp://localhost:3030/_next/static/development/pages/_app.js:67:29__webpack_require__http://localhost:3030/_next/static/runtime/webpack.js:790:13fnhttp://localhost:3030/_next/static/runtime/webpack.js:151:20jshttp://localhost:3030/_next/static/development/pages/_app.js:39236:81jshttp://localhost:3030/_next/static/development/pages/_app.js:39232:29__webpack_require__http://localhost:3030/_next/static/runtime/webpack.js:790:13fnhttp://localhost:3030/_next/static/runtime/webpack.js:151:20[1]/http://localhost:3030/_next/static/development/pages/_app.js:1:3

I dug a little bit deeper. It seems like a problem with *.mjs files. The error relates to this part of the webpack generated code:

`/* WEBPACK VAR INJECTION */}.call(this, require("./../../process/browser.js")))`

// "./node_modules/graphql/jsutils/instanceOf.mjs":
/!*************************************************!
! ./node_modules/graphql/jsutils/instanceOf.mjs !
***********************************************/
/! exports provided: default /
// (function(module, webpack_exports, webpack_require) {
"use strict";
webpack_require.r(webpack_exports);
webpack_require.r(webpack_exports);
/* WEBPACK VAR INJECTION */(function(process) {
/* harmony default export / webpack_exports["default"] = (process && "development" !== 'production' ? // eslint-disable-next-line no-shadow
function instanceOf(value, constructor) {
if (value instanceof constructor) {
return true;
}
if (value) {
var valueClass = value.constructor;
var className = constructor.name;
if (valueClass && valueClass.name === className) {
throw new Error('Cannot use ' + className + ' "' + value + '" from another module or realm.\n\nEnsure that there is only one instance of "graphql" in the node_modules\ndirectory. If different versions of "graphql" are the dependencies of other\nrelied on modules, use "resolutions" to ensure only one version is installed.\n\nhttps://yarnpkg.com/en/docs/selective-version-resolutions\n\nDuplicate "graphql" modules cannot be used at the same time since different\nversions may have different capabilities and behavior. The data from one\nversion used in the function from another could produce confusing and\nspurious results.');
}
}
return false;
} : // eslint-disable-next-line no-shadow
function instanceOf(value, constructor) {
return value instanceof constructor;
}); /*
* Copyright (c) 2015-present, Facebook, Inc.
*
* This source code is licensed under the MIT license found in the
* LICENSE file in the root directory of this source tree.
*
*  strict
*/
/**

A replacement for instanceof which includes an error warning when multi-realm
constructors are detected.
/
/ WEBPACK VAR INJECTION */}.call(this, require("./../../process/browser.js")))

/***/ }),

I am not very proficient with webpack but it maybe relates to webpack/webpack#7032

To Reproduce

Create a sandbox project with next 7.0.0 and add graphql@0.13.2 as dependency.

Or just pick the with-Apollo example.

ℹ️ Workaround

Upgrade to graphql@14.0.2

Expected behavior

It does not break React.

System information

• OS: Windows x64 Enterprise
• Browser (if applies) all
• Version of Next.js: 7.0.0

[immortalx]

It was fixed for me when i updated to graphql 14.0.2

Also in this template it appears that there's a wrong import in components/PostList.js

Try to replace
import gql from 'graphql-tag'
with
import { gql } from 'apollo-boost'

[reicheltp]

Thanks @immortalx for the tip with version 14.0.2, I added it as a workaround to the description.

Since many packages still rely on graphql@0.13.x, I would keep this issue open.

[timneutkens]

I guess this issue should be filed against webpack, we just use the default webpack configuration in resolving .mjs

[akadop]

This can be solved by including

          {
            test: /\.mjs$/,
            include: /node_modules/,
            type: 'javascript/auto'
          }

in your webpack rules -- as well as making sure the .mjs extension comes before .js or .jsx

    config.resolve.extensions = ['.mjs', '.tsx', '.ts', '.js', '.jsx', '.json']

[timneutkens]

This is fixed on canary.