Tag Archives: Vue3 Error

[Solved] Vue3 Error: Failed to resolve component:xxx

I use vite+typescript+pinia to develop the vue3 project, because I have just come into contact with this problem recently. Look at the code first:

<script lang="ts" setup name="XtxMore">
</script>
<template>
  <RouterLink
    to="/"
    class="xtx-more"
  >
    <span>
      <slot>Check All</slot>
    </span>
    <i class="iconfont icon-angle-right"></i>
  </RouterLink>
</template>

At this time, an error will be reported in the console:

This is because when we name the component, that is, when we add the name attribute to the component, there is no content in the script tag, which will lead to the failure of parsing and the error will be reported.

Just add something in the script tag

<script lang="ts" setup name="XtxMore">
defineProps()
</script>
<template>
  <RouterLink class="xtx-more">
    <span>
      <slot>Check All</slot>
    </span>
    <i class="iconfont icon-angle-right"></i>
  </RouterLink>
</template>

 

[Solved] Vue3 Error: error Delete `··` prettier/prettier

vue3 project error: error Delete `··` prettier/prettier

Run

npm  run  lint --fix

It depends on what tool is used. If you use yarn or pnpm, you can replace it

If present

Open package.json file, and view the configuration

For example, the configuration of my project is as follows

The command to run is:

npm run lint:eslint --fix

Then restart the project

Supplement:

Found that error Delete `——–␍⏎` prettier/prettier is too much when using webstorm, and every time I modify the code, this error will appear, which is troublesome to operate. So choose to close the Prettier code specification directly
Just configure it in the rules in eslintrc.js

'prettier/prettier': 'off'

[Solved] Vue3 Error: Unhandled error during execution of scheduler flush. This is likely a Vue internals bug. P

Unhandled error during execution of scheduler flush. This is likely a Vue internals bug. Please open an issue at https://new-issue.vuejs.org/?repo=vuejs/vue -next

Error reason

An error is reported when vue2 turns to vue3

Error reporting reason

Nested functions are used in the way of global variables. When functions are executed, errors are reported and vue3 direct errors are reported

Check the error position

On the page with problems, correct the errors by commenting the code and quickly find the error location

Solution

The code in the function is written correctly

No error reported!

Vue3 Error: [vue/no-multiple-template-root] The template root requires exactly one element

vue3.0 supports <template/></template> tag to delegate more than one root element
Building the project with the latest Vite, the code in the default app.vue is as follows:

The code can run normally, but the vscode gives an error prompt:

[vue/no-multiple-template-root]
The template root requires exactly one element. eslint-plugin-vue

The reason is that the vetur plug-in has not been updated

The temporary solution is

Settings -> Search: eslint plugin Vue -> Uncheck the first (Vetur › Validation: Template )

[Solved] Vue3 Error: Cant find variable: GlobalThis

After the project is packaged, use a browser with a lower version to open it and report an error

Solution
Vue config.js

import { defineConfig } from 'vite';
import vue from '@vitejs/plugin-vue';
import legacy from '@vitejs/plugin-legacy';

// https://vitejs.dev/config/
export default defineConfig({
  base: './',
  plugins: [
    vue(),
    legacy({
      targets: ['> 1%, last 1 version, ie >= 11'],
      additionalLegacyPolyfills: ['regenerator-runtime/runtime'],
    }),
  ],
});

[Solved] Vue3 Error: export ‘createRouter‘ was not found in ‘vue-router‘

I started learning vue3 recently, because I have been using vue2. X before. When I write vue3, I will find that there are some differences between the two. Then I will have a variety of problems during practice. I summarize and share it with you here.

1.Error reporting

“export ‘createRouter’ was not found in ‘vue-router’
“export ‘createWebHashHistory’ was not found in ‘vue-router’

2. Error reporting causes and Solutions

If you read my last article, you should be able to see the reason for the error at a glance. This error occurs because we use the wrong Vue router package. We have installed version 2. X. because we are developing and using vue3, we also need to install the Vue router package of vue3. We only need to uninstall the previously installed Vue router package, and then reinstall the Vue router package of vue3.

// uninstall vue2.x vue-router
npm uninstall vue-router --save
// install vue3 vue-router
npm install vue-router@next --save

This can be solved. I hope it will help you!

[Solved] Vue3 Error: Cannot use ‘in‘ operator to search for ‘path‘ in undefined

when creating the route of vue3, an error is reported: cannot use 'in' operator to search for 'path' in undefined . After many troubleshooting, it is found that I used the createwebhashhistory() method incorrectly in the route file and used it as a variable.

1. Error reporting

2. Causes and solutions of error reporting

this error is reported because I mistakenly used the createwebhashhistory() method in the routing file and used it as a variable. I just need to write it as a method to solve the problem.

hope to help you!!!