Defer <T>() => {} TSX error to Babel 8

[nicolo-ribaudo]

Q	A
Fixed Issues?	Closes #14361
Patch: Bug Fix?
Major: Breaking Change?
Minor: New Feature?
Tests Added + Pass?	Yes
Documentation PR Link
Any Dependency Changes?
License	MIT

#14135 (which disallows <T>() => {} in TSX files, since it should be written as <T,>() => {}) caused problems for multiple users (at least 5 already reported it).

The reason is that most people enable the JSX and TS presets on all files, making also .ts be parsed as .tsx. This is wrong in theory, but until Babel 7.17.0 it always worked since TSX was just a superset of TS (except for the legacy <T> v type casts, but everyone uses v as T now). Even if #14135 is technically correct, it introduced a new error for everyone using single type arguments without a trailing comma and with that misconfiguration.

This error is correct so we should do it, but we could consider it as a breaking change and wait until Babel 8.

I'm marking this as i: discussion because while I think we should do it I'd accept a "we are doing the correct thing by raising the error, so we shouldn't revert it".

[babel-bot]

Build successful! You can test your changes in the REPL here: https://babeljs.io/repl/build/51499/

[liby]

The reason is that most people enable the JSX and TS presets on all files, making also .ts be parsed as .tsx. This is wrong in theory, but until Babel 7.17.0 it always worked since TSX was just a superset of TS

So the correct configuration would be something like the following?

overrides: [
    {
        // Only forcibly enables jsx parsing for .tsx files
        test: /\.tsx$/,
        presets: [
            [
            "@babel/preset-typescript",
            {
                isTSX: true,
                allExtensions: true,
                allowDeclareFields: true,
            },
            ],
        ],
    },
    {
        test: /\.ts$/,
        presets: [
            [
            "@babel/preset-typescript",
            {
                allowDeclareFields: true,
            },
            ],
        ],
    },
],

But it always gives me a feeling of redundancy.

[nicolo-ribaudo]

@liby Something like this is guaranteed to work:

module.exports = {
  overrides: [{
    test: /\.(tsx|ts)$/,
    presets: [["@babel/preset-typescript", { allowDeclareFields: true }]]
  }, {
    test: /\.(jsx|tsx)$/,
    presets: ["@babel/preset-react"]
  }]
};

[liby]

@nicolas-marien

Something like this is guaranteed to work

It doesn't work for me. The error message is:

ReferenceError: React is not defined

It works for me.

    overrides: [
      {
        // Only enable the React preset for .jsx and .tsx files
        test: /\.(jsx|tsx)$/,
        presets: [["@babel/preset-react", { runtime: "automatic" }]],
      },
      {
        // Only enable the TypeScript preset for .ts and .tsx files
        test: /\.(ts|tsx)$/,
        presets: [["@babel/preset-typescript", { allowDeclareFields: true }]],
      },
    ],