JSX element implicitly has type 'any' because no interface 'JSX.IntrinsicElements' exists.ts(7026)

Question

JSX element implicitly has type 'any' because no interface 'JSX.IntrinsicElements' exists.ts(7026)

chrissyast opened this issue 3 years ago · comments

Describe the bug
The above error is shown for any 'native' html (span, div) tag, but not for Vue components such as template, MyComponent.
I have the exact same repo on three machines (Two W10, one Mac) and it only happens on one (W10), so it doesn't seem to be anything wrong with the config. Nothing has been changed

To Reproduce
Difficult to provide exact reproduction because it is only happening on one environment out of three, but minimal repo provided anyway https://github.com/chrissyast/nuxt-typescript/tree/minimal_example

Clone
yarn install
Open pages/index.vue

Expected behavior
No errors on <div> tag

Screenshots

Additional context
A lot of the google search results were related to React and suggested it was a types issue https://stackoverflow.com/a/59046713/8940624, but I have added "@nuxt/types" to tsconfig.
On both the failing and working PC, tsc --version yielded tsc' is not recognized as an internal or external command,. I installed typescript on the failing PC anyway but still the issue persists

MarceCandil · Answer 1 · Thu Dec 09 2021 01:33:10 GMT+0800 (China Standard Time)

same issue here

김지호 · Answer 2 · Sat Dec 11 2021 12:46:34 GMT+0800 (China Standard Time)

If you are using "volar", try using "vutur".

chrissyast · Answer 3 · Sat Dec 11 2021 19:53:48 GMT+0800 (China Standard Time)

@jihogrammer Disabling Volar worked for me. I wasn't even aware I had the extension as it was installed by default in my company's workspace config. Thanks!

Ray Foss · Answer 4 · Fri Feb 25 2022 00:51:32 GMT+0800 (China Standard Time)

This issue is unrelated to typescript... but, for anyone who stumbles on this issue:

Uninstalling volar is no longer an acceptable answer... vue-tsc will also produce this error.
install @vue/runtime-dom and then in a tsconfig.node.json referenced file, experimental mode

Here's my tsconfig.node.json:

{
  "compilerOptions": {
    "composite": true,
    "module": "esnext",
    "moduleResolution": "node"
  },
  "include": [
    "vite.config.ts"
  ],
  "vueCompilerOptions": {
    "experimentalCompatMode": 2, // delete after migrating to vue3 (or nuxt3)
    "experimentalTemplateCompilerOptions": {
      "compatConfig": {
        "MODE": 2
      } // delete after migrating to vue3 (or nuxt3)
    }
  }
}

Charles Brandt · Answer 5 · Mon Mar 07 2022 10:35:35 GMT+0800 (China Standard Time)

I had been running the vue application in a docker container and the node modules were separate. Once I installed the node modules in the local directory, I restarted VS Code and it found the modules and the error went away.

Israel Ortuño · Answer 6 · Tue Mar 08 2022 17:52:21 GMT+0800 (China Standard Time)

This issue is unrelated to typescript... but, for anyone who stumbles on this issue:

Uninstalling volar is no longer an acceptable answer... vue-tsc will also produce this error. install @vue/runtime-dom and then in a tsconfig.node.json referenced file, experimental mode

Here's my tsconfig.node.json:
{
  "compilerOptions": {
    "composite": true,
    "module": "esnext",
    "moduleResolution": "node"
  },
  "include": [
    "vite.config.ts"
  ],
  "vueCompilerOptions": {
    "experimentalCompatMode": 2, // delete after migrating to vue3 (or nuxt3)
    "experimentalTemplateCompilerOptions": {
      "compatConfig": {
        "MODE": 2
      } // delete after migrating to vue3 (or nuxt3)
    }
  }
}

I can say that this definitely works 🔥

Eavan · Answer 7 · Thu Mar 10 2022 11:23:03 GMT+0800 (China Standard Time)

I use the quasar framework, version 2.5.5. I have the same problem as you. My solution is to update the version of Vue, and this problem will be solved immediately

Pete Stewart · Answer 8 · Tue Mar 15 2022 00:51:21 GMT+0800 (China Standard Time)

This issue is unrelated to typescript... but, for anyone who stumbles on this issue:

Uninstalling volar is no longer an acceptable answer... vue-tsc will also produce this error. install @vue/runtime-dom and then in a tsconfig.node.json referenced file, experimental mode

Here's my tsconfig.node.json:
{
  "compilerOptions": {
    "composite": true,
    "module": "esnext",
    "moduleResolution": "node"
  },
  "include": [
    "vite.config.ts"
  ],
  "vueCompilerOptions": {
    "experimentalCompatMode": 2, // delete after migrating to vue3 (or nuxt3)
    "experimentalTemplateCompilerOptions": {
      "compatConfig": {
        "MODE": 2
      } // delete after migrating to vue3 (or nuxt3)
    }
  }
}

This worked perfectly for me.

张亚瀚 · Answer 9 · Mon Jun 27 2022 11:53:12 GMT+0800 (China Standard Time)

This issue is unrelated to typescript... but, for anyone who stumbles on this issue:
Uninstalling volar is no longer an acceptable answer... vue-tsc will also produce this error. install @vue/runtime-dom and then in a tsconfig.node.json referenced file, experimental mode
Here's my tsconfig.node.json:
{
  "compilerOptions": {
    "composite": true,
    "module": "esnext",
    "moduleResolution": "node"
  },
  "include": [
    "vite.config.ts"
  ],
  "vueCompilerOptions": {
    "experimentalCompatMode": 2, // delete after migrating to vue3 (or nuxt3)
    "experimentalTemplateCompilerOptions": {
      "compatConfig": {
        "MODE": 2
      } // delete after migrating to vue3 (or nuxt3)
    }
  }
}
I can say that this definitely works 🔥

thank you very much，It helped me.

Evgeny Kalashnikov · Answer 10 · Mon Jan 01 2024 06:37:51 GMT+0800 (China Standard Time)

All the solutions above don't work for me anymore.

Hugo REGIBO · Answer 11 · Sun Jan 14 2024 00:27:40 GMT+0800 (China Standard Time)

Same for me, issue appeared randomly while it worked fine before. Not in VSCODE, but in Docker. The docker build fails with this error. (please note i use vue3 + vite using the generated app for a vue 3 project)

Thomas Champion · Answer 12 · Wed Jan 17 2024 22:51:31 GMT+0800 (China Standard Time)

Did you try to upgrade vue-tsc to the last version ?
I had this error as well, but it's gone now after the upgrade.

yokusrelynkno · Answer 13 · Sat Jan 20 2024 00:01:35 GMT+0800 (China Standard Time)

Did you try to upgrade vue-tsc to the last version ? I had this error as well, but it's gone now after the upgrade.

This worked for us, thank you!

Hugo REGIBO · Answer 14 · Wed Jan 24 2024 21:14:33 GMT+0800 (China Standard Time)

Did you try to upgrade vue-tsc to the last version ? I had this error as well, but it's gone now after the upgrade.

This solved the problems in my case too, thank you so much!

Milad Joodi · Answer 15 · Wed Apr 10 2024 21:11:08 GMT+0800 (China Standard Time)

All the solutions above don't work for me.

SunJinBo · Answer 16 · Thu Apr 25 2024 14:17:51 GMT+0800 (China Standard Time)

Did you try to upgrade vue-tsc to the last version ? I had this error as well, but it's gone now after the upgrade.

Thank you, I am Chinese and I have resolved this issue by setting the Vue to version 3.3.4 and the Vue TSC to version 1.8.16

chrissyast · Answer 17 · Thu Apr 25 2024 14:22:20 GMT+0800 (China Standard Time)

Did you try to upgrade vue-tsc to the last version ? I had this error as well, but it's gone now after the upgrade.

Thank you, I am Chinese and I have resolved this issue by setting the Vue to version 3.3.4 and the Vue TSC to version 1.8.16

Does the fix only work for Chinese people?

SunJinBo · Answer 18 · Thu Apr 25 2024 15:44:36 GMT+0800 (China Standard Time)

Did you try to upgrade vue-tsc to the last version ? I had this error as well, but it's gone now after the upgrade.

Thank you, I am Chinese and I have resolved this issue by setting the Vue to version 3.3.4 and the Vue TSC to version 1.8.16

Does the fix only work for Chinese people?

You misunderstood. Of course, the plan is suitable for everyone. I just want to express my gratitude to your issue for solving the problem for me. When I said where I come from, it was a friendly gesture. I apologize for any misunderstanding caused

WangShuo2000 · Answer 19 · Tue May 14 2024 16:43:42 GMT+0800 (China Standard Time)

Add "jsxImportSource": "vue" in tsconfig.json, it works for me