Typescript - JSX argument (generic)

[adostal]

Hello,
I have problem with new TypeScript feature: generic in JSX.
I use package: @zeit/next-typescript:1.1.0

When I try use:

<Mutation<A, B> mutation={xxx}>
{() => <div>Test</div>}
</Mutation>

I got: Syntax Error: Unexpected token

TypeScript: 2.9.2

tsconfig.json:

    "target": "esnext",
    "module": "esnext",
    "jsx": "preserve",
    "allowJs": true,
    "moduleResolution": "node",
    "allowSyntheticDefaultImports": true,
    "noUnusedLocals": true,
    "noUnusedParameters": true,
    "removeComments": false,
    "preserveConstEnums": true,
    "sourceMap": true,
    "skipLibCheck": true,
    "baseUrl": ".",

[ifiokjr]

Just so you know this is because the version of @babel/preset-typescrip@7.0.0-beta.42 being required by @zeit/next-typescript was released in March before the functionality was added to the babel library. See this PR babel/babel#7748.

If you're using yarn as your package manager you can solve your problem with resolutions to force @zeit/next-typescript to use the latest version of the typescript plugin.

Add this to your package.json file

{
+ "resolutions": {
+   "@babel/preset-typescript": "7.0.0-beta.54"
+ }
}

This should fix things.

Note that the babel/preset-typescript will always be slightly behind with new additions to the TypeScript syntax.

See this PR for some of the features in the pipeline babel/babel#7747

If you'd rather not use babel for compilation take a look at this code when the repo used ts-loader for compilation.