[v13] relay-compiler generates require calls instead of top-level imports when eagerEsModules

[asterikx]

The generated files include require calls even when I specify eagerEsModules: true (previously eagerESModules) in relay.config.js file.
In relay@12.0.0, relay-compiler-language-typescript@15.0.0 generates top-level import statements instead of require calls if I specify eagerESModules : true. In relay@13.0.0, this is no longer true.
This prevents use with modern frontend tools, e.g. Vite, which do not transform require calls: Uncaught ReferenceError: require is not defined.

[alunyov]

Hey @asterikx do you have an example repro? Or can you add an example of the generated file with the require call?

[TrySound]

This is probably related to babel-plugin-relay rather than compiler
#3724

[TrySound]

The workaround is to add eagerESModules option in babel config

[alunyov]

The workaround is to add eagerESModules option in babel config

The 13.0.1 with your fix is coming soon.

[asterikx]

No it's not babel-plugin-relay's fault. babel-plugin-relay only replaces the query strings in the files by the concrete requests. eagerESModules will only change the import style for that replacement. The imported file (the concrete request) still contains require calls (mostly on pagination fields I think). I will link a repo here in a few minutes.

[asterikx]

Demo project: https://github.com/asterikx/relay-v13-replace-require-calls

Line with require call: https://github.com/asterikx/relay-v13-replace-require-calls/blob/3cc16d02a280f589672d7260f28390ac0c176994/src/__generated__/AppQuery_query.graphql.ts#L76

[TrySound]

mostly on pagination fields I think

This is probably came from old tests where refetchable was implemented only for commonjs.

[tessro]

We are still seeing this in v13.0.1, with pagination only.

[tessro]

Actually, this appears to happen specifically with @refetchable. The query named as queryName is always required.

[tessro]

Ignore me, this is fixed in v13.0.2! 🙃

8ac91d7