Tag Archives: Front end development

[Solved] unhandled error during execution of watcher callback

report errors

unhandled error during execution of watcher callback

analysis

When drawing data with the Echorts icon, an error is reported: unhandled error during execution of watcher callback. The reason for the prompt is that the Echorts chart is rendered before the data is obtained in the current year, which results in the chart cannot being displayed and an error being reported

Solution:

Before data rendering, make a non-empty judgment
for example:

if(value){
	Start rendering data
}

or

if(value !== undefined){
	Start rendering data
}

Turn off eslint checksum and resolve formatting conflicts

Turn off eslint verification

1. Modify the following code for index.js in config

    useEslint: false,

2. The universal method is to write in the first line of the error reporting JS file

/* eslint-disable */

3. There is a file. Eslintignore file in the root directory. You can add files that you do not need to verify.
for example, if you do not want it to verify Vue files, add. Vue. Of course, this will make all Vue files not verified. Similarly,. JS does not verify all JS files.
4. Open the extension of vscode editor and enter eslint search, Disable the eslint extension to solve the problem fundamentally
5. Check as shown in the figure to cancel the error reporting, restart vscode, and no error will be reported during compilation

6. Change the verification rule to 0 (0 means no verification, 1 means warning, 2 means error reporting)

 rules: {
    'vue/html-self-closing': 0,
    'vue/html-indent': 0,
    'vue/max-attributes-per-line': [
      1,
      {
        singleline: 10,
        multiline: {
          max: 4,
          allowFirstLine: true
        }
      }
    ],
  }

7. Directly modify the configuration file vue.config.js

module.exports = {
  lintOnSave: false
}

Causes and solutions of configuration conflict between eslint and prettier in vscode

Vscode uses the eslint plug-in and the prettier plug-in. The settings.json configuration of the editor is as follows:

{
  "editor.formatOnSave": true, // Auto-formatting on save
    "[javascript]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode", // use prettier when formatting
  },
  "editor.codeActionsOnSave": {
        "source.fixAll.eslint": true // use eslint to verify files when saving
    }
}

Eslint, prettier, eslint config prettier, eslint plugin prettier
are installed in the project. Pretierrc is added to the root directory

{
    "singleQuote": true,
    "semi": true,
}

Path cannot be used with params in this. $router. Push() method, otherwise params will be invalid

Path in this. $router. Push() method cannot be used with params, otherwise params will be invalid!!

This. $router.push can pass parameters in two ways:

The first one is the first one

Pass parameters -- this.$router.push({path: ' route ', query: {key: value}})

Parameter fetch -- this.$route.query.key

With this approach, the passed parameters are spliced after the route and appear in the address bar.

Second:

Passing parameters -- this.$router.push({name: ' name of route ', params: {key: value}})

Parameters take values -- this.$route.params.key

With this approach, the parameters are not spliced behind the route and are not visible on the address bar...

Dynamic routing also passes params, so in this. $router. Push() method, path cannot be used with params, otherwise params will be invalid. You need name to specify the page.

[access through the name attribute of routing configuration]

[Solved] This is probably not a problem with npm. There is likely additional logging output above.

If this error occurs, you need to re install the node_ Contents in the modules folder   But before installing, you should clear all the previous contents. The steps are as follows:

1. Delete the node first_ modules

rmdir /s/q node_modules

2.delete package-lock.json file
3.npm cache clean –force
4.npm install（npm i is ok）

Error in mounted hook: “TypeError: Cannot read property ‘init‘ of undefined“

Error in mounted hook: “TypeError: Cannot read property ‘init’ of undefined” 

let myChart = this.$echarts.init(document.getElementById('radar1'))

Error reason: ecarts version is too high, after unloading. Install lower version:

cnpm install [email protected] -S

  However, it is found that there are still errors:

Error: ENOENT: no such file or directory, open

terms of settlement:

Restart the service. Recompile!

Error: enoent: no such file or directory, stat ‘/ usr / local / var / www / /_ book/gitbook/git

Every time a gitbook is edited, there will be an error that causes the service that has been started through gitbook serve to stop. The error message is: error: enoent: no such file or directory, stat ‘/ usr/local/var/www//_ book/gitbook/gitbook-plugin-livereload/ plugin.js ‘

The background is that a new gitbook has been installed. Every time I edit the MD file in the project, I will hold the above error. As a result, the service I started through gitbook serve will stop and I can’t browse the edited gitbook normally

At the beginning, I didn’t care when I reported the error. The back office revised and edited the file several times, and found that the gitbook service would stop and report the above error after each modification. I found that this was not a mistake in my operation, but a problem with gitbok. After looking for the problem for a while, I didn’t have any idea, so I Baidu found out the bug in gitbook itself, The original configuration of gitbook is wrong. The specific modification method is as follows:

1. Find the configuration file address of gitbook (MAC system) in the user directory: Cd ~ to jump to the user directory of the current user

2. Find ~ /. Gitbook/versions/3.2.3/lib/output/website/ copyPluginAssets.js File, and then find all the confirm configuration items in this file (a total of 2 places), and change the original value of true to false

confirm: false

There are two places in total. Just change them