Babel plugin does not run with Typescript

[mathewbyrne]

🐛 bug report

The relay babel plugin does not run on outputted javascript when using Typescript. It appears that something is happening, since Parcel will complain about missing plugins; but the graphql template tags that relay strips are still present in the output.

🎛 Configuration (.babelrc, package.json, cli command)

.babelrc

{
    "presets": ["env"],
    "plugins": ["relay"]
}

(see gist for remaining config)

🤔 Expected Behavior

The page should render the error output from the QueryRenderer.

😯 Current Behavior

Uncaught Error: graphql: Unexpected invocation at runtime. Either the Babel transform was not set up, or it failed to identify this call site. Make sure it is being used verbatim as graphql.

This invariant is hit because the plugin has not run to strip out the template tags.

💁 Possible Solution

If I switch away from Typescript to regular JSX files, the babel plugin operates as expected.

It would be good to get some more transparency/documentation about how Parcel is bundling things together. Currently I do not really know how to go about debugging this issue.

🔦 Context

I am trying to bootstrap a project that uses Typescript and Relay. I attempted to do this by first getting Typescript going (very easy 💯 ) then running through the Relay Quick Start Guide.

💻 Code Sample

https://gist.github.com/mathewbyrne/9d792f20da06cb4604c354091297dd70

🌍 Your Environment

Software	Version(s)
Parcel	1.9.2
Node	8.11.2
npm/Yarn	yarn 1.7.0
Operating System	OSX 10.13.4

[cdock1029]

Same issue with babel-plugin-emotion

[cdock1029]

For my issue, I solved it by setting "jsx": "preserve" in my tsconfig.json, which makes tsc only responsible for removing the types, and leaves JSX transformation to babel.

This is the minimal tsconfig that worked in a test repo:

{
  "compilerOptions": {
    "allowSyntheticDefaultImports": true,
    "module": "es6",
    "moduleResolution": "node",
    "jsx": "preserve"
  }
}

For my issue, this makes obvious sense because the css attribute is embedded within the JSX, so needs to be handled by the plugin not typescript.

I'm not sure if it will also address your issue with graphql but worth a shot.

[DeMoorJasper]

@cdock1029 's solution should work, removed the bug flag. As this ain't no bug, just misconfiguration

[mathewbyrne]

Yep, this was a misconfiguration issue to do with interaction between Typescript and Babel. As @cdock1029 suggests the solution is to prevent Typescript from transpilation, and leave it to Babel.