Relay: [Modern] Error when parsing modules containing containers at runtime

[AndrewIngram]

I'm using just the modern API, no compat.

I have relay-compiler working, and I'm using the babel plugin, when I try to run my app (React Native in this case), it throws an exception when trying to evaluate modules containing containers.

ReactRelayCompatContainerBuilder: Could not create container for `DanceStyleListItem`. 
The value of fragment `style` was expected to be a fragment, got `function () {
    return require(1017                                              ); // 1017 = ./__generated__/DanceStyleListItem_style.graphql
  }` instead.

It seems like the babel plugin is replacing the graphql tag with a function returning a fragment (the import returns the fragment), whilst ReactRelayCompatContainerBuilder is expecting a fragment (rather than a function returning one).

[neverlan]

Same problem with react native.

Here is my .babelrc:

{ "plugins": [ "relay", "idx" ], "presets": ["react-native"] }
and my babel dependencies:

"babel-plugin-idx": "1.5.1", "babel-plugin-relay": "dev", "babel-preset-react-native": "1.9.1",

[jepezi]

Same problem here. Also, this error seems to happen only when fragment is composed.

[leebyron]

CompatContainerBuilder is used if you're using the compat mode and expects ["relay", {"compat": true}] in your Babel config.

You mentioned you're not using compat but only modern. Could you post some example code that reproduces this issue?

[leebyron]

I have a repro.

The work around for now is to replace "relay" with ["relay", {"compat": true}] in your Babel Config.

We'll get this fixed for rc.2

[AndrewIngram]

I was about to say, I was following the code and couldn't find any branch where using modern wouldn't cause the Compat container stuff to be used.

[AndrewIngram]

Hm, this workaround doesn't seem to make any difference for me, i'll have to wait for rc.2

[leebyron]

@AndrewIngram it's possible you're encountering a different issue then. Configuring babel to produce compat output is what the compat container looks for. I'd hate for you to wait for rc.2 only to find it's not solved due to be caused by something else. Do you have some shortened version to repro?

[AndrewIngram]

@leebyron I can try and come up with a simpler example, another option is I can give you temporary access to my repo, only if you think that's quicker. It's a pretty tiny RN app built with create-react-native-app.

[leebyron]

I'm cool with that :)

[jepezi]

Adding {"compat": true, "schema": "data/schema.graphql"} now solves the issues. Thanks @leebyron.