"Ignore this error message" code fix in JSX results in rendering // @ts-ignore

[brieb]

TypeScript Version: 3.2.0-dev.20181004

Search Terms:

disableJsDiagnostics
JSX
Code fix
Ignore this error message
Add '@ts-ignore' to all error messages

Code

// MyComponent.jsx
// @ts-check
import React from "react";

class MyComponent extends React.Component {
  render() {
    return (
      <div>
        // @ts-ignore
        {doesNotExist}
      </div>
    );
  }
}

export default MyComponent;

Running the Ignore this error message or Add '@ts-ignore' to all error messages code fix inserts a // @ts-ignore which satisfies the compiler.

But,

<div>
  // @ts-ignore
  {doesNotExist}
</div>

will actually render // @ts-ignore.

Expected behavior:

Looks like {/* @ts-ignore */} or {/* // @ts-ignore */} are not recognized as valid ignore comments.

So, the best I could come up with is

<div>
  {/* 
  // @ts-ignore */}
  {doesNotExist}
</div>

Actual behavior:

// MyComponent.jsx
// @ts-check
import React from 'react';

class MyComponent extends React.Component {
  render() {
    return (
      <div>
        // @ts-ignore
        {doesNotExist}
      </div>
    );
  }
}

export default MyComponent;

where // @ts-ignore mistakenly gets rendered.

Related Issues:

#25240

[weswigham]

Please note: Unless we add new suppression forms (ie, inline), the only fix for this is disabling the quickfix when a valid suppression position cannot be produced.

[weswigham]

(unless we really think something like

{/* 
  // @ts-ignore */}

is OK?)

[brieb]

Would be awesome to add new suppression forms, and even support for targeting specific errors. But, in the absence of that, we will be using that weirdo comment form since we need the ability to ignore errors in JSX constructs. It's not pretty, but it's the only thing that works. So, the fix could either (1) include it in this form or (2) not include it at all (so it doesn't end up rendering). I like (1) even though its not pretty because it's functionally correct - it would seem off if the rule could ignore everything except errors in the body of a JSX component. Moreover there is some precedent for odd-looking ignore comments in template strings. For example,

const s = `
Hello ${doesnotexist}`;

gets fix-ignored as

const s = `
Hello ${
// @ts-ignore
doesnotexist}`;

[proYang]

{/* 
  // @ts-ignore */}

awesome 🌹

[oshalygin]

Is there another pattern that others are using?

This is really really odd syntax

{/* 
  // @ts-ignore */}

Edit the above doesn't actually work.

How are people ignoring typescript errors inside of TSX files today? I've done a ton of research and can't find a single solution that works. Not being able to ignore some statement is a huge challenge.

[crickford]

Another (odd looking) variation which works:

<
// @ts-ignore
SomeComponent />

[manooog]

(unless we really think something like

{/* 
  // @ts-ignore */}

is OK?)

how smart you are!!!

[adamhwang]

Edit the above doesn't actually work.

How are people ignoring typescript errors inside of TSX files today? I've done a ton of research and can't find a single solution that works. Not being able to ignore some statement is a huge challenge.

Works for .tsx with Typescript 3.6.2

[InsOpDe]

(unless we really think something like

{/* 
  // @ts-ignore */}

is OK?)

Yeah all those linting rules will be so happy about that syntax

Doing this now 😐

    <	// eslint-disable-line react/jsx-tag-spacing
        // @ts-ignore
    Component/>

[junoatwork]

I ran into even more fun in typescript 3.7 in conjunction with prettier, because prettier keeps the attributes on a separate line, and now @ts-ignore must be positioned immediately before the property, not the start of the tag.

Here's the workaround I have:

{/* lol https://github.com/Microsoft/TypeScript/issues/27552#issuecomment-495830020
      // @ts-ignore */ /* prettier-ignore */}
    <MyComponent foo={{
        a: 'prop',
        with: 'lots a',
        big: 'object',
        that: 'forces',
        prettier: 'to wrap',
      }}
    />

previously:

    {/* lol https://github.com/Microsoft/TypeScript/issues/27552#issuecomment-495830020
      // @ts-ignore */}
    <MyComponent
      foo={{
        a: 'prop',
        with: 'lots a',
        big: 'object',
        that: 'forces',
        prettier: 'to wrap',
      }}
    />

[weswigham]

No idea if prettier will also complain about excessive spreads, but

    <MyComponent
      {...{}/* lol https://github.com/Microsoft/TypeScript/issues/27552#issuecomment-495830020
      // @ts-ignore */}
      foo={{
        a: 'prop',
        with: 'lots a',
        big: 'object',
        that: 'forces',
        prettier: 'to wrap',
      }}
    />

should also work? At some point the prettier-ignore is just the better choice, though. There's just not many options for comment locations inside jsx.

[MFry]

Why is this closed? Did we just commit to the ugly solution?

[a-x-]

reopen please...

[weswigham]

Did we just commit to the ugly solution?

Yep. The quickfix now does the ugly thing. "prettiness" isn't a concern when it comes to suppressions which, by all rights, should be exceptional events. We're pretty locked by what jsx syntax allows, so it really is what it is.

[oshalygin]

We definitely committed to the fugly solution...but maybe not.

Can we vote/agree on keeping this open? I’d love to tackle this in some free time but don’t want to waste time if the current solution is the preferred option.

[neocybereth]

Agreed. I'm currently using the fugly solution because a 3rd party library that I rely on has incorrect typings in their latest code. Fugly solution works for now, but would be good to have a one-liner if possible.

[weswigham]

Sadly, there is no other way to get a comment in jsx. It's gotta be within {}.

[forresthopkinsa]

Is there a separate issue to track the possibility of this?

{/* @ts-ignore */}
{whatever}

[brieb]

Sounds like we're open to it now: #37738
PR here: #38228 🎉

[likern]

I personally think

{/* @ts-ignore */}
{whatever}

is the best and the most universal solution for this.

Auto formatting tools (prettier, etc.) may screw up below hacks.

Note:
This solution is working fine

{/* 
  // @ts-ignore */}

while this

<
// @ts-ignore
SomeComponent />

is auto-formatted and becomes invalid (at least on my prettier settings)

[forresthopkinsa]

Based on the success of #38228 I think this landed in 3.9 🎉

[lxe]

I guess this is more of a JSX issue, but check this out:

Let's say I have this:

import * as React from 'react';

declare var SomeComponentFromLibrary: React.FC<{
    children?: React.ReactElement
}>;

declare var MyComponent: React.FC<{
    foo: string,
}>;

export default () => (
    <SomeComponentFromLibrary>
        {/* @ts-expect-error */}
        <MyComponent />
    </SomeComponentFromLibrary>
)

SomeComponentFromLibrary I can't change, and I wish to supress the error that <MyComponent /> generates.

However, adding another element to the children of the SomeComponentFromLibrary now breaks the children?: React.ReactElement type constraint, yielding another type error.

Is it possible to create comments in JSX that don't get transformed into code?

[vincent-czi]

For anyone struggling with this issue but needing to do it inside of a JSX component, the format for comments is different when working inside of a tag. Specifically, drop the "{" and "}":

<ComponentWithTroublesomeProp
  okayProp={a}
  anotherOkayProp={b}
  /* @ts-expect-error */
  problematicProp={cGotTroubles}
  yetAnotherOkayProp={d}
/>

[JoaoVitorLima242]

You can use like this too:

{/* @ts-ignore */}
<ComponentWithTroublesomeProp
  okayProp={a}
  anotherOkayProp={b}
  /* @ts-expect-error */
  problematicProp={cGotTroubles}
  yetAnotherOkayProp={d}
/>

Works for me!