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.

[ivan-bragin]

@johnsoncodehk Oh well. That's unfortunate but not that bad I guess. Can this information be added to the setup documentation? Since this @types/react comes from Storybook I can see this to be an issue with other libraries too.
Thanks again for checking and providing a nice workaround! 👍

[johnsoncodehk]

@ivan-bragin of course, will update docs for this.

[Blackfaded]

Still having the same issue.
Tried to exclude all typings, because i also have @types/react from storybook in my node_modules.
This is my tsconfig:

{
  "compilerOptions": {
    "target": "es5",
    "module": "esnext",
    "strict": true,
    "importHelpers": true,
    "moduleResolution": "node",
    "resolveJsonModule": true,
    "skipLibCheck": true,
    "esModuleInterop": true,
    "allowSyntheticDefaultImports": true,
    "sourceMap": true,
    "allowJs": true,
    "baseUrl": ".",
    "typeRoots": ["@typings"],
    "types": ["jest", "node"],
    "paths": {
      "@/*": ["src/*"]
    },
    "lib": ["esnext", "dom", "dom.iterable", "scripthost"]
  },

  "include": ["src/**/*.ts", "src/**/*.vue", "@typings"],
  "exclude": ["node_modules"]
}

[johnsoncodehk]

@Blackfaded please try https://github.com/johnsoncodehk/volar-starter/blob/master/tsconfig.json. If the problem still on, please provide a repro case.

[Blackfaded]

The config sadly did not resolve my issue.
The last working Version is 0.27.26. From that on the template gets detected as jsx.

I will try to setup a repo in the next days!

[johnsoncodehk]

@Blackfaded I learned in Discord that pnpm may encounter this problem, and adding shamefully-hoist=true in file .npmrc can resolve it for now. (Thanks to @praburangki!)

[johnsoncodehk]

@Blackfaded I learned in Discord that pnpm may encounter this problem, and adding shamefully-hoist=true in file .npmrc can resolve it for now. (Thanks to @praburangki!)

Fixed in 564af29.

[euaaaio]

@Blackfaded I learned in Discord that pnpm may encounter this problem, and adding shamefully-hoist=true in file .npmrc can resolve it for now. (Thanks to @praburangki!)

Fixed in 564af29.

It works for components. But still warnings on <slot></slot>:

JSX element type '__VLS_23' does not have any construct or call signatures.

[johnsoncodehk]

@euaaaio please open a new issue and provide a repro case.

[euaaaio]

@euaaaio please open a new issue and provide a repro case.

Done: #568

[Blackfaded]

@Blackfaded please try https://github.com/johnsoncodehk/volar-starter/blob/master/tsconfig.json. If the problem still on, please provide a repro case.

Solved it by excluding **/*.stories.ts in the tsconfig!

[johnsoncodehk]

Please move to #592 for related problems.

[yuquanwang]

declare global {
  namespace React {
    interface HTMLAttributes<T> extends AriaAttributes, DOMAttributes<T> {
      class?: string
    }
  }
 ...
}

this can solve my "class" problem

[nchutchind]

I couldn't get any of the answers here to work, but what finally worked for me was to just add this to my compilerOptions in tsconfig.json:

{
  "paths": {
    "react": [ "" ]
  }
}

My hope was that it would cause any attempts to load react types to fail and that seems to be what's happened. You will need to use a different tsconfig file to run storybook files, though.

I did have mild success with making the react.d.ts file to override the class type, but then it fails for object and array values, and other HTML attributes have react types when you're developing. With my change it uses Vue for all of the types.