Relay compiler throws syntax error: unexpected “$” when running in Github Action

[charklewis]

Description

Relay compiler throws Syntax Error: Unexpected "$". when compiling in Github Actions. This issue only does not occur in a local environment or if I commit the schema.graphql to and use this instead of downloaded a fresh copy.

I have raised a stack overflow post about this without much success: Relay compiler throws syntax error: Unexpected “$” when running in Github Action

I am using the vanilla create-react-app set up with the import graphql from "babel-plugin-relay/macro" fix as suggested here.

Here is the section of my yml file where is breaks:

    name: Lint, test and build
    runs-on: ubuntu-latest
    if: "!contains(github.event.head_commit.message, 'ci-skip')"
    steps:
      - uses: actions/checkout@v2
      - uses: actions/setup-node@v1
        with:
          node-version: "12.x"
      - name: Restore cached dependencies
        uses: actions/cache@v1
        with:
          path: node_modules
          key: node-modules-${{ hashFiles('yarn.lock') }}
      - name: Install dependencies
        run: yarn install --frozen-lockfile
      - name: Run ESlint
        run: yarn run lint
      - name: Test using Jest
        run: yarn run test-ci 
        env:
          CI: true
      - name: Download GraphQL Schema
        run: SECRET=$SECRET ENDPOINT=$ENDPOINT yarn run get-schema
        env:
          SECRET: ${{ secrets.hasura_admin_secret }}
          ENDPOINT: ${{ secrets.graphql_endpoint }}
      - name: Test Compile Relay
        run: yarn run relay <<<<< this breaks
      - name: Test build
        run: yarn run build

And here are those scripts in my package.json.

"compile-css": "postcss src/index.css -o src/styles.css",
"build-compile-css": "NODE_ENV=production postcss src/index.css -o src/styles.css",
"start": "yarn run compile-css && react-scripts start",
"build": "yarn run build-compile-css && react-scripts build",
"get-schema": "yarn run get-graphql-schema -h \"x-hasura-admin-secret=$SECRET\" $ENDPOINT > schema.graphql",
"relay": "yarn run relay-compiler --schema ./schema.graphql --src ./src",
"test": "react-scripts test",
"test-ci": "react-scripts test --coverage --reporters=jest-junit",

It fails with the error:

$ /home/runner/work/<company-name>/<app-name>/node_modules/.bin/relay-compiler --schema schema.graphql --src src
Writing js
ERROR:
Syntax Error: Unexpected "$".

I have verified that schema is downloaded and the paths to the schema and src folder are correct.

Environment

    "@testing-library/jest-dom": "^4.2.4",
    "@testing-library/react": "^9.5.0",
    "react": "^16.13.1",
    "react-dom": "^16.13.1",
    "react-relay": "^10.0.1",
    "react-router-dom": "^5.2.0",
    "react-scripts": "3.4.1",
    "relay-runtime": "^10.0.1",

Is there a way I can debug this?

[charklewis]

I have managed to find that when running the get-graphql-schema in Github Actions it is adding the script as the first line of the file. I can remove this via an additional script, but unsure why it is being added?

Resulting schema.graphql

$ /home/runner/work/<company-name>/<app-name>/node_modules/.bin/relay-compiler --schema schema.graphql --src src
schema {
  query: query_root
  mutation: mutation_root
  subscription: subscription_root
}
...

This doesn't occur locally instead, I get the following (as expected).

schema {
  query: query_root
  mutation: mutation_root
  subscription: subscription_root
}
...

[rasulomaroff]

I have managed to find that when running the get-graphql-schema in Github Actions it is adding the script as the first line of the file. I can remove this via an additional script, but unsure why it is being added?

Resulting schema.graphql

$ /home/runner/work/<company-name>/<app-name>/node_modules/.bin/relay-compiler --schema schema.graphql --src src
schema {
  query: query_root
  mutation: mutation_root
  subscription: subscription_root
}
...

This doesn't occur locally instead, I get the following (as expected).

schema {
  query: query_root
  mutation: mutation_root
  subscription: subscription_root
}
...

Hi there! Could you explain how you managed to delete that first line that broke everything, please?. Have the same issue.

[MarceloPrado]

There is a cleaner way to remove the "first line that breaks everything". When you run yarn run X, yarn wraps the output of your script with a header and a footer - the header is what breaks your script.

There's a silent flag you can add that fixes this issue:

scripts: {
  "print-schema": "yarn -s get-graphql-schema http://localhost:3000/graphql > ./data/schema.graphql",
}

From Yarn docs:

-s, --silent skip Yarn console logs, other types of logs (script output) will be printed