graphql: Unexpected invocation at runtime

[ivokund]

Hi,

I cannot seem to get the Babel transform running on my generated typescript code. Perhaps you can shed some light on what I am doing wrong. Both relay-compiler and webpack-dev-server start up fine without any errors, generated .graphql.ts files show up in my artifact directory, but in browser console I get

Uncaught Error: graphql: Unexpected invocation at runtime. Either the Babel transform was not set up, or it failed to identify this call site`

Using v1.5.0-plugin.5 from alloy/relay. I run webpack with webpack-dev-server, this is how I run my compiler:

relay-compiler --src ./src --artifactDirectory ./__generated__ --schema ../schema.graphql --language=typescript

This is my .babelrc

{
  "plugins": [
    ["relay", { "artifactDirectory": "./__generated__" }]
  ]
}

I have this in my webpack config:

    module: {
        rules: [
            {
                test: /\.tsx?$/,
                exclude: /node_modules/,
                use: [
                    { loader: 'babel-loader' },
                    { loader: 'ts-loader', options: { transpileOnly: true } },
                ],
            },
        ],
    },

Relevant packages:

    "react-relay": "https://github.com/alloy/relay/releases/download/v1.5.0-plugin.5/react-relay-1.5.0-plugin.5.tgz",
    "relay-compiler": "https://github.com/alloy/relay/releases/download/v1.5.0-plugin.5/relay-compiler-1.5.0-plugin.5.tgz",
    "relay-runtime": "https://github.com/alloy/relay/releases/download/v1.5.0-plugin.5/relay-runtime-1.5.0-plugin.5.tgz",
    "babel-plugin-relay": "https://github.com/alloy/relay/releases/download/v1.5.0-plugin.5/babel-plugin-relay-1.5.0-plugin.5.tgz",
    "relay-compiler-language-typescript": "0.9.0",
    "webpack": "4.2.0",
    "webpack-cli": "2.0.13",
    "webpack-dev-server": "3.1.1"
    "ts-loader": "4.1.0",
    "ts-node": "4.1.0",

Any help would be greatly appreciated. Thanks!

[alloy]

I would suspect that the babel plugin is not doing its work, possibly the artifact dir doesn’t match during webpack resolving 🤔

Can you see if things work correct without using the artifactDirectory option?

[alloy]

Just to be sure, did this work with Relay 1.5 without the language plugin support?

[alloy]

Oh wait, I remember now having dealt with something similar in the past. Assuming you did not previously have this setup working without language plugin support, I think the issue is that tsc is transpiling the code to something like graphql_package.graphql(...) rather than just graphql(...). See the example app for working configuration: https://github.com/relay-tools/relay-compiler-language-typescript/blob/master/example/tsconfig.json

[ivokund]

Thanks for the ideas. Losing the artifactDirectory parameter does not change the outcome and before the upgrade to the language plugin I was using this fork with a custom transformer

    "@secoya/relay-compiler": "^1.1.0-secoya",
    "@secoya/relay-compiler-typescript": "^1.0.0",

I cross-checked the tsconfig from the example app and this is the example app version with some modifications that produces the same error for me:

{
  "compilerOptions": {
    "target": "es2015",
    "module": "commonjs",
    "lib": ["dom", "es2015"],
    "sourceMap": true,
    "jsx": "react",
    "esModuleInterop": true,
    "outDir": "dist",
    "allowSyntheticDefaultImports": true
  },
  "types": [
    "webpack-env",
    "node"
  ],
  "strict": true,
  "include": [
    "src/**/*"
  ],
  "exclude": [
    "node_modules"
  ],
  "files": [
    "typings/Core.d.ts"
  ]
}

However, I was using commonjs here as module, otherwise my imports/exports don't seem to work:

$ ./node_modules/.bin/webpack-dev-server 
/var/www/dev/admin-frontend/webpack.config.ts:1
(function (exports, require, module, __filename, __dirname) { import * as webpack from 'webpack';
                                                              ^^^^^^

SyntaxError: Unexpected token import

And indeed, when I look at the unsourcemapped code in my browser, I see:

exports.CaseListTableContainer = react_relay_1.createFragmentContainer(CaseListTable, react_relay_1.graphql `
    /.../
`);

Could module be the determining factor here? Any idea why import/export does not work properly with "module": "es2015" here?

Thanks a lot!

[alloy]

Yeah the TS module config needs to be set to es2015 for the code to be transpired in a way that the babel plugin will be able to pick it up, as you have found in your above examples.

As for the import issue, it looks like you may not be using a transform such as babel-plugin-transform-es2015-modules-commonjs which should be transforming those to commonjs require statements.

PS: @kastermester has started on a tsc plugin as an alternative to the babel plugin, but it has not been finished/released yet afaik.

[kastermester]

I have some upcoming plans at work to test out the plugin. You can find it in the PR (#21). It is correct that no test release has been made yet (perhaps that would be a fine move to make though).

I think the help @alloy provided should get you going using the babel plugin however.

[alloy]

I added some documentation about this to the README bdbc0e2, let me know if you have any further thoughts/questions on this topic.

[ivokund]

Great, thanks! Using es2015 and babel-plugin-transform-es2015-modules-commonjs solved my problems like a charm. The additions to README are helpful, although it might save some hours for people to mention/link to the specific plugin?

Thanks for your help!

[alloy]

Good point, done 👍