[V13] UTF-8 with BOM encoded schema file causes 'unsupported character' compiler error

[tobias-tengler]

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.

[alunyov]

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

	- `--output` Output format of the compiler. Supported options: `debug` |
	`verbose` | `quiet` | `quietWithErrors`. The default value is `verbose`.

If you have a smaller repro, it would help identify and fix the problem.

[tobias-tengler]

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...

[alunyov]

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!

[NicolaBizzoca]

Hi,
We're experiencing the same, and there using ts + styled components
Is there a way to debug this?

[tobias-tengler]

@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.

[tobias-tengler]

You can even replicate this with a fresh create-react-app project

1. yarn create react-app test-app --template typescript
2. yarn add react-relay
3. yarn add --dev relay-compiler
4. Add the script to package.json

"scripts": {
  "relay": "relay-compiler"
}

5. Place a schema.graphql file in the ./src directory

schema {
  query: Query
}

type Query {
  test: String
}

6. Add relay-compiler config to package.json

"relay": {
  "language": "typescript",
  "src": "./src",
  "schema": "./src/schema.graphql",
  "exclude": [
    "**/node_modules/**",
    "**/__mocks__/**",
    "**/__generated__/**"
  ],
  "artifactDirectory": "./src/__generated__"
}

7. 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?

[tobias-tengler]

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.