Volar treats html template as JSX

[ivan-bragin]

• tried re-enabling the plugin
• tried reinstalling the plugin
• tried Vetur, the issue disappears, but that's not a solution since Vetur plugin development now is really focused on Vue2
• tried resetting the plugin settings

[sschneider-ihre-pvs]

I guess I have a similar problem, at least in some cases. With Quasar.

'__VLS_39' cannot be used as a JSX component.
  Its instance type 'QInput' is not a valid JSX element.ts(2786)
(property) 'q-input': ComponentConstructor<QInput, any, any, any, ComputedOptions, MethodOptions>

[ivan-bragin]

@sschneider-ihre-pvs Yes, exactly. That's the part of the issue. I got the same errors as well. I tried to prevent JSX parsing a few times but no luck so far. I believe it's Volar enforcing JSX.

[sschneider-ihre-pvs]

[Trace - 10:24:05] Sending request 'textDocument/codeAction - (99)'.
Params: {
    "textDocument": {
        "uri": "file:///<path>.vue"
    },
    "range": {
        "start": {
            "line": 13,
            "character": 10
        },
        "end": {
            "line": 13,
            "character": 10
        }
    },
    "context": {
        "diagnostics": [
            {
                "range": {
                    "start": {
                        "line": 13,
                        "character": 8
                    },
                    "end": {
                        "line": 13,
                        "character": 15
                    }
                },
                "message": "'__VLS_39' cannot be used as a JSX component.\n  Its instance type 'QInput' is not a valid JSX element.",
                "code": 2786,
                "severity": 1,
                "source": "ts"
            }
        ]
    }

[johnsoncodehk]

@sschneider-ihre-pvs this is a different problem, please open a new issue to track.

@ivan-bragin do you have react types in project? what file will navigation to when you ctrl + left click a <div> tag?

[ivan-bragin]

@johnsoncodehk Yes, you are right! For some reason I do =/ But why is this the case? I mean are .vue files being parsed as JSX? Or is it just the limitation of the TS part?

[ivan-bragin]

Okay, I checked and it seems that this @types/react is a dependency of Storybook.

[johnsoncodehk]

@ivan-bragin after 0.27.27, template virtual code is changed to JSX to improve generic component support.

Okay, I checked and it seems that this @types/react is a dependency of Storybook.

I will take a look. But not sure it can fix, maybe you must config tsconfig to fix, see #111 (comment).

[ivan-bragin]

@johnsoncodehk I'll try this fix, thanks a lot! Honestly, it's not that big, but the combination with the error @sschneider-ihre-pvs mentioned, it lights up half of my files as if there are errors inside. If you'll manage to fix this, I'll become a sponsor xD

btw: @sschneider-ihre-pvs That's a link for you storybookjs/storybook#16213

[ivan-bragin]

@ivan-bragin after 0.27.27, template virtual code is changed to JSX to improve generic component support.

Okay, I checked and it seems that this @types/react is a dependency of Storybook.

I will take a look. But not sure it can fix, maybe you must config tsconfig to fix, see #111 (comment).

Just tried the suggested fix, seems working at the first glance, but I'll test it some more.

[sschneider-ihre-pvs]

@sschneider-ihre-pvs this is a different problem, please open a new issue to track.

@ivan-bragin do you have react types in project? what file will navigation to when you ctrl + left click a <div> tag?

done

[ivan-bragin]

@sschneider-ihre-pvs the suggested fix with "types" also fixes the VLS issue. Can you try that as well?

[sschneider-ihre-pvs]

@sschneider-ihre-pvs the suggested fix with "types" also fixes the VLS issue. Can you try that as well?

No, it seems to be a different issue, I don't have react nor any jsx related stuff maybe apollo client or storybook related who knows. At least they snuck in react.

[johnsoncodehk]

Unfortunately, based on JSX, there is no non-invasive solution. If there is @types/react in the project, you need to specify the tsconfig types option explicitly to exclude @types/react.