Relay-compiler-language-typescript: Issue with import

[unludo]

Hi,

I have an issue with my code. I generate relay artifacts in src/__generated__
I have mutation files importing from __generated__.
My problem is that if those mutation files are in a folder and import with something like '../generated/...', then I get a compilation error like this:
./src/mutations/ChangeUserMutation.ts
Module not found: Can't resolve './__generated__/ChangeUserMutation.graphql' in '/home/ludo/dev/writer/src/mutations'
It should no look in src/mutations but in src/

Here is the import from ChangeUserMutation.ts
import {ChangeUserMutation, ChangeUserMutationResponse} from "../__generated__/ChangeUserMutation.graphql"

Also if I move ChangeUserMutation.ts and put it directly in src, then the import without the '..' works fine.

I guess it is something with babel.

Could you please help me understand why the file is not found?

Thanks!

[jgcmarins]

If you keep the __generated__ folder near to the file (do not change the default behaviour), does it work?

[unludo]

@jgcmarins Yes when __generated__ and the file are at the same level, it works.

I don't understand why you say 'default behaviour' though beacause my relay mutation file is not generated so I assume I can put it anywhere I want.

[kastermester]

Can you elaborate exactly on what your configs looks like and also where you get the errors? Ideally a repository that reproduces the error would be great, as it would easily allow us to see what is going on (and also easily test a fix if it is indeed an error within the plugin).

[arthurbarroso]

Not 100% sure but I think I was able to reproduce this issue here:
https://github.com/arthurbarroso/marknotes/tree/bug/relay-compiler-import-bugs/packages/web

Steps I took to get the error:

• Included artifactDirectory: './src/__generated__' on my relay.config.js .
• Ran relay compiler
• Tried to import from ../src/__generated__/ like here

If you want to try it out simply clone the repo on that branch (relay-compiler-import-bugs), install it's dependencies and yarn start on the web package.
Everything worked fine when the generated folder was at the same level as the components/pages.

[kastermester]

Sorry for the late reply, I've been short on time. Thanks for the repository with the repro!

Having only had time to look at it for about 5-10 minutes, the issue is that the artifactDirectory setting from the relay.config file, is somehow not being read by the relay transformation code running inside the CRA setup. I've not had much experience with CRA, so I'm not entirely sure how to fix this, maybe someone else knows?

In short, your graphql template literals when being compiled try to import the generated files from the old location - as the code that compiles these literals away have not been configured correctly to use the specified artifactDirectory.

[n1ru4l]

I had the same issue when I started using relay with create-react-app. My solution was to remove the artifactDirectory option an stick with the defaults 😅

[unludo]

@n1ru4l I just tried that and the artifact is generated in src/__generated__. But the import issue at runtime remains. Do you also import from a subfolder what is in __generated__ ? And does it work?
Thanks

[n1ru4l]

Are you sure you removed all the config options? Have you tried clearing the babel cache?

https://github.com/dungeon-revealer/dungeon-revealer/blob/master/src/chat/chat.tsx
https://github.com/dungeon-revealer/dungeon-revealer/blob/master/relay.config.js

this works for me fine

[unludo]

Ok I finally understood.
When I move a mutation file in a different folder, I also have to remove the __generated__ folder(s) and then run the relay script again.
Then the __generated__ folders and files are placed 'next to their files', so there can't be any '..' in import.
I was initially thinking the __generated__ folder was unique under /src. This is no the case.

Thanks all for your help!