Relay + graphql literals
matclayton opened this issue · 11 comments
Sorry if this isn't a bug, but we've got an interesting issue with flow 0.190.1 (and it appears to be in later versions as well)
We are using Relay 16.0.0 and when we set the relay compiler to eagerEsModules:true, and package.json to use "type":"module" we get working code, but every single query/fragment type fails in almost identical ways to that shown below. Under commonjs flow passes and the code works, we're trying to migrate to modernise our build systems.
Any advice on how to start debugging this, or is it a known bug?
Further to this we are using the following flow config.
[ignore]
.*/build/.*
./ssr/.*
[untyped]
# Don't require types to pass for storybook stories or tests, but do show type errors on those files in VSCode and allow module resolution
.*.stories.jsx
.*/__tests__/.*
[declarations]
.*/node_modules/.*
.*/flow-typed/.*
[include]
../static
[libs]
./flow-typed-custom/
./flow-typed/
[strict]
nonstrict-import
unclear-type
unsafe-getters-setters
untyped-import
untyped-type-import
[options]
munge_underscores=true
# See https://github.com/facebook/flow/releases/tag/v0.188.2 this should be removed when we upgrade to 0.191.0+
# Also see https://medium.com/flow-type/local-type-inference-for-flow-aaa65d071347 which is critical in updating to 0.197-0.199
enforce_local_inference_annotations=false
# module aliases
module.name_mapper='^\(.*\)$' -> '<PROJECT_ROOT>/\1'
module.name_mapper.extension='svg' -> '<PROJECT_ROOT>/testutils/flow/SVGStub.jsx'
# Flow will ignore the files with the other extensions
module.file_ext=.js
module.file_ext=.jsx
module.file_ext=.json
module.file_ext=.mjs
module.file_ext=.cjs
# Setup the Relay Integration
relay_integration=true
relay_integration.module_prefix=<PROJECT_ROOT>/__generated__/
💩 emoji mode!
emoji=true
[version]
^0.190.1
It's hard to guess what's going on here. Can you give me an isolated repro?
Sure, it’ll be the next day or so. Sorry I was hoping this was a known issue. Ill make a repro with an example.
I think I can guess what's going on. Flow's relay integration is not designed with eagerEsModules: true in mind, so you might need to disable this flag. This flag is not enabled internally, so we don't notice it.
@gkz who worked on the integration. To fix it, I think we just need to add another flag similar to this relay flag, and do an additional transform on the module type.
That would make a lot of sense, sadly disabling the flag on our end makes swapping over to viteJS (from webpack) a lot harder, we haven't actually managed it, so we were hoping to go all in on ESM and this is the remaining blocker.
Do you still need a repro case? Or is this likely to get resolved? If it isn't no worries I understand the focus on FB's internals needs, but it would be good to know so we can double our efforts to either get commonjs working on vite.
Where did you learn about the relay integration options? As far as I am aware, they are not documented or announced.
Can't really recall, I think we initially saw them in this issue facebook/relay#3717 then read the code and release notes, we've been running them for quite a long time, its very very helpful. I recon we've had them on for 2+ years now or coming up to that, so my memory is a little fuzzy.
Interesting, wasn't aware that anyone in the public was using these options.
Will take a brief look to see if this is easy to add.
Thank you, I would offer to help, but as much as I can read ocaml, you really dont want any ocaml we write :)
This feature is one of the main reasons we've stuck with flow over typescript, so so useful, so thank you for adding it!
The option relay_integration.esmodules has been added, and will be in a future version of Flow (it will be in the changelog once it's in). Once you have it, try it out and confirm if it works for you.
Thank you! We have a few version bumps to get though (LTI) , but will try it out as soon as we can
If you're having trouble with rolling out LTI you can post in our Discord https://discord.gg/YpwbdyqQ