createReactContext breaking with Next.js 13/Webpack 5

[mmmulani]

Running into a very similar issue as #194, a SSR build of a Next.js 13 project is failing from this call: https://github.com/relay-tools/relay-hooks/blob/master/src/ReactRelayContext.ts#L18

in particular, the react === firstReact invariant is failing: https://github.com/facebook/relay/blob/main/packages/relay-runtime/store/createRelayContext.js#L39

from monkey-patching Relay, I have confirmed that firstReact.default === react is true, which makes me think this is a Webpack issue.

and the ReactRelayContext code after being passed through Webpack looks like this:

var react = __webpack_require__(3729);
var react_default = /*#__PURE__*/__webpack_require__.n(react);
;// CONCATENATED MODULE: ../node_modules/relay-hooks/lib/es/ReactRelayContext.js
/**
 * Copyright (c) Facebook, Inc. and its affiliates.
 *
 * This source code is licensed under the MIT license found in the
 * LICENSE file in the root directory of this source tree.
 *
 * @flow strict-local
 * @format
 */ 

var createRelayContext = relay_runtime.__internal.createRelayContext;
var ReactRelayContext_ReactRelayContext = createRelayContext((react_default()));

which looks like it's passing in React.default rather than the plain React in this invocation. Bizarrely, in the same build react-relay in calling createReactContext without Webpack unwrapping React.

At this point, I must admit that I am not sure if this is a relay-hooks bug, a Webpack bug, or perhaps a Next.js configuration bug. But I did notice that if I monkey-patch node_modules/relay-hooks/lib/es/ReactRelayContext.js and change import React from 'react'; into import * as React from 'react';, the issue does not occur. So perhaps this is a relay-hooks bug?

[mmmulani]

hmmm it also seems that if I monkey-patch node_modules/relay-hooks/package.json and remove the module link, i.e. change the module to be CommonJS only, the issue also goes away.

as a workaround, going to try to find a way to prefer the CommonJS version unless I can figure out why Webpack is messing up with the React.default.

[mmmulani]

easy workaround, add this to your custom webpack config in next.js: (of course, brittle hack etc etc)

config.resolve.alias['relay-hooks'] = path.resolve(__dirname, 'node_modules/relay-hooks/lib/index.js');

[ukch]

Same problem here with Next.JS 14. @mmmulani's suggestion above does not fix the issue.

[morrys]

hi all, this project https://github.com/relay-tools/relay-hooks/tree/master/examples/relay-hook-example/nextjs-ssr-preload is made in nextjs and works fine.

Can you create a mini repo on github that highlights the problem?

[ukch]

hi all, this project https://github.com/relay-tools/relay-hooks/tree/master/examples/relay-hook-example/nextjs-ssr-preload is made in nextjs and works fine.

Can you create a mini repo on github that highlights the problem?

@morrys your project is using the pages router. IIRC this issue is for the app router