graphql: Unexpected invocation at runtime about relay-compiler-language-typescript HOT 9 CLOSED

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?

from relay-compiler-language-typescript.

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

from relay-compiler-language-typescript.

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

from relay-compiler-language-typescript.

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!

from relay-compiler-language-typescript.

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.

from relay-compiler-language-typescript.

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.

from relay-compiler-language-typescript.

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

from relay-compiler-language-typescript.

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!

from relay-compiler-language-typescript.

Good point, done 👍

from relay-compiler-language-typescript.