Fragment Render Error with $ref is not defined

[kenmintae]

I'm having a bug with $fragmentRefs while trying to add a fragment container to QueryRenderer.

On my App.tsx I have a query like this:

const rootQuery = graphql`
    query AppQuery {
        data(
            marketInfo: {
                zipCode: [10001]
            }
        ) {
            ...MarketInfo_data
        }
    }
`

This is my codebase for MarketInfo.tsx:

const MarketInfo: React.FC<MarketInfoProps> = ({data}: MarketInfoProps) => {
    return (
        <Container>
            <InfoCard data={data} />
        </Container>
    )
}

export default createFragmentContainer(MarketInfo, {
    data: graphql`
        fragment MarketInfo_data on MarketData {
            id
            latestValue
            previousValue
            year
            change
        }
    `,
})

When I run relay compile, I got this bug: ReferenceError: _MarketInfo_data$ref is not defined.

I checked the ts file generated by Relay Compiler and everything looks fine:

declare const _MarketInfo_data$ref: unique symbol
export type MarketInfo_data$ref = typeof _MarketInfo_data$ref

I'm new to the whole Relay thing. Do you know what I can do to fix this bug? Thank you.

[jgcmarins]

Is it a create-react-app? It could be a setup problem related to babel-plugin-relay.

[alloy]

@kenmintae Is this still an issue? Off-hand I wouldn't know what caused it, so would need some more detail to debug this.