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)
We’re facing the same issue, tried
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).
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
tov9.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
totrue
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 tracednode
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 React16.12.0
, according toyarn 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
to
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 inmaster
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:
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:
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
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.