[V13] UTF-8 with BOM encoded schema file causes 'unsupported character' compiler error
tobias-tengler opened this issue · 7 comments
Since I've upgraded all my relay
packages to v13, I've been getting the following error when running the relay-compiler
:
The configuration in my package.json
file is the following:
"relay": {
"language": "typescript",
"src": "./src",
"schema": "./src/schema.graphql",
"exclude": [
"**/node_modules/**",
"**/__mocks__/**",
"**/__generated__/**"
],
"artifactDirectory": "./src/__generated__"
},
I have also setup the babel-plugin-relay
as instructed with the artifactDirectory
.
How would I go about debugging this? I tried to find whether the compiler has a verbose flag that would help me diagnose the issue, but I haven't been successful.
Hi @tobias-tengler thanks for the report. There's probably something in your source files that our parser could not recognize.
I think you can use --output
flag to enable verbose logging.
relay/packages/relay-compiler/README.md
Lines 126 to 127 in 427c01b
If you have a smaller repro, it would help identify and fix the problem.
Thanks @alunyov, but I couldn't gather anymore relevant information by setting the output mode to "debug":
Unfortunately I can't share any of our actual code due to company policy, but I'll try to create a smaller repro.
Could the issue maybe be related to styled-components? Because it also uses template literals, e.g.
const NodeContainer = styled.div`
display: flex;
cursor: unset;
:hover {
cursor: unset;
}
> * + * {
border-left: 0 !important;
}
div[data-nodeid] {
border-radius: 50%;
background-color: transparent;
border: 1px solid var(--text-color);
}
`;
Albeit I would expect babel-plugin-relay (or the compiler - not sure which one) to only look at the graphql
tagged template literal...
Could the issue maybe be related to styled-components?
Probably not, I just run compiler with styled-components example. And everything seem to work fine there.
but I'll try to create a smaller repro.
Thank you!
Hi,
We're experiencing the same, and there using ts + styled components
Is there a way to debug this?
@alunyov Sorry it took so long, but I was busy with other stuff and we just stayed on v12 for the moment.
I've created a repository containing a stripped-down version of our application that manages to reproduce the bug when running yarn relay
: https://github.com/tobias-tengler/relay-rust-compiler-unsupported-character-reproduction
Something interesting I've noted is that the issue also occurs, if no graphql
annotated literals are present. I've thought that maybe the custom defer / stream directives in our schema might be a problem, but commenting them didn't solve the issue.
You can even replicate this with a fresh create-react-app
project
yarn create react-app test-app --template typescript
yarn add react-relay
yarn add --dev relay-compiler
- Add the script to
package.json
"scripts": {
"relay": "relay-compiler"
}
- Place a
schema.graphql
file in the./src
directory
schema {
query: Query
}
type Query {
test: String
}
- Add relay-compiler config to
package.json
"relay": {
"language": "typescript",
"src": "./src",
"schema": "./src/schema.graphql",
"exclude": [
"**/node_modules/**",
"**/__mocks__/**",
"**/__generated__/**"
],
"artifactDirectory": "./src/__generated__"
}
- Execute the compiler (
yarn relay
) and observe the described issue.
There are not graphql
template literals in the project at this point and the babel-plugin has not been setup, but I think this shouldn't be an issue. Since with create-react-app you would use the babel macro probably.
So this should affect any new person trying out relay in this manner, right?
I found out what the issue is. The issue is that the schema.graphql
file was saved using the UTF-8 with BOM
encoding. Switching to UTF-8
resolves the compiler panic. :)
I'm not closing the issue for now, since I feel like the compiler should be able to handle this.