relay: Cryptic runtime error in relay 8.0.0 "Warning: RelayGraphQLTag: node ... unexpectedly wrapped in a function."

We’ve recently updated to relay 8.0.0 from 7.1.0 and are now starting to see the following error in console and while running unit tests: console.error node_modules/relay-runtime/node_modules/fbjs/lib/warning.js:30 Warning: RelayGraphQLTag: node [Query] unexpectedly wrapped in a function.

package.json (partial) "react-relay": "^8.0.0", "relay-runtime": "^8.0.0", "relay-test-utils": "^8.0.0", "react-relay-network-modern": "^4.4.0", "babel-plugin-relay": "^6.0.0", "relay-compiler": "^8.0.0",

Any help is appreciated!

About this issue

  • Original URL
  • State: closed
  • Created 4 years ago
  • Comments: 24 (9 by maintainers)

Most upvoted comments

We’re facing the same issue, tried

  • removing node_modules and yarn install again
  • check versions
  • regenerated queries

but cant’ get it to work.

In addition to this, when trying to print the error, can’t find the node and raises an error. We did not change anything in our queries and/or component since v7 (that works).

Uncaught TypeError: Cannot read property 'name' of undefined
    at getNode (GraphQLTag.js:32)

We use typescript, may it be an issue with relay-compiler-language-typescript?

I also encountered this issue and the root cause ended up being babel-loader’s cache. Clearing the cache directory resolved this.

I upgraded Relay from v7.1.0 to v9.0.0 in a Next.js project. The error was caused by a caching issue. The solution for me was to delete the .next/cache/next-babel-loader directory.

A side note: at first I thought @earksiinni’s solution to set eagerESModules to true was the fix. But I realized that changing my babel config must have busted the next-babel-loader cache to make the error go away, but it wasn’t the true solution.

upgrade babel-plugin-relay to v8

~~This seems relevant: https://github.com/facebook/react/issues/12453#issue-308403033~~

I traced node back to https://github.com/facebook/relay/blob/v8.0.0/packages/react-relay/buildReactRelayContainer.js#L73. I’m guessing that for our dev and possibly others, forwardRef is returning a function. If that’s the case, React needs to be upgraded and a more helpful message should be displayed. Will confirm.

EDIT: Looks like we’re all running React 16.12.0, according to yarn why react. So I’m not sure why this is happening 🙃.

EDIT 2: The plot thickens…

My previous comment was a red herring. The problem has to do with the Babel plugin. It transforms the JS AST, swapping the graphql`…` tagged template literals with their compiled counterparts inside of __generated__. Something was causing the plugin to output functions instead of the objects exported from the compiled fragments.

After looking at the Babel plugin’s code, we “fixed” our problem by changing our .babelrc config from

{ plugins: [
  ["relay", { "artifactDirectory": "./app/javascript/__generated__" }]
]}

to

{ plugins: [
  ["relay", { "artifactDirectory": "./app/javascript/__generated__", "eagerESModules": true }]
]}

Only one problem: eagerESModules isn’t an option that’s supported by the version of the Babel plugin, 8.0.0, that we’re using. It’s present in master and in version 9.0.0.

Clear all the caches

Babel Watchman Metro-bundler Webpack Jest generated typescript

This worked for our CRA-based setup:

rm -rf node_modules/.cache/
rm src/**/__generated__/*.graphql.js

try to remove jest cache

it looks like it is not transpiling correct

@sibelius, I admit that it feels like a caching issue due to the fact that it’s inconsistently broken, but I’m not sure what else to try. We ran the following:

# Clear __generated__
find . -name __generated__ -type d -print0|xargs -0 rm -r --
# Clear node_modules cache
rm -rf node_modules/.cache

We’re not using Jest (or any other kind of testing), Watchman, or Metro bundler. TS to my knowledge doesn’t cache anything.

Any other places we should be looking for caches/commands we should try running?

We’re also having the exact same problem as @apuntovanini (Uncaught TypeError: Cannot read property 'name' of undefined at getNode (GraphQLTag.js:32)) and we’re also using TypeScript. However, not all of our team members are encountering the issue. Clearing babel cache and compiled fragments didn’t help.

cc: @perryazevedo

make sure all relay version are the same

yarn why react-relay
yarn why relay-runtime

is this web ou app?

Neither. Removed the __generated__ folder and re-ran relay compiler (relay-compiler --src ./src/ --schema ./schema.graphql --artifactDirectory ./src/__generated__/relay). Same issue.