Tag Archives: Vue error

[Solved] Vue Error: Error in nextTick: “RangeError: Maximum call stack size exceeded“

maximum call stack size exceeded

Vue item error report: error in nexttick: maximum call stack size exceeded because the names of two components are the same, correct them and solve them

Initially, this error was reported as a stack overflow, and I thought there was a circular reference inside the code, and after checking all the methods, there was no circular call.
Later found that the error was reported after the introduction of a component, checked all the code in the component is fine, the use of the component alone in the route will not report an error, the introduction of the error will be reported. After checking, I found that the name of the two components was duplicated and the page was displayed normally after correcting it

export default {
  name: 'Chart'
}

[Solved] Vue Error: Uncaught TypeError: Vue.createApp is not a function

Project scenario:

Today, in the process of reviewing the basis of Vue, I tried to introduce and use Vue with traditional HTML and native memory, and then found that I really pulled it. The memory is not only vague, but also confused. Vue2 mixed with vue3 is there! Next, let’s see how to report the error.

Problem Description:

The HTML structure is as follows:

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <script src="https://cdn.jsdelivr.net/npm/[email protected]"></script>
  </head>
  <body>
    <div id="app"></div>
  </body>
  <script>
    const app = Vue.createApp({
        data() {
            return {
                message: '666'
            }
        },
        template: "<h2>{{message}}</h2>"
    })
    app.mount("#app")
  </script>
</html>

Good guy, 666 didn’t render. Just click and report me the error
Uncaught TypeError: Vue.createApp is not a function。
I’m still wondering. I think it’s ok if createapp creates a Vue application and mount it to the node?Why, vue.createapp is not available yet

Cause analysis:

Later, I read the document and found that I had mixed up vue.createapp and mount, which are the writing methods of vue3, but I introduced vue2
it is clearly written on the official website. Vue2 uses new and is an EL mount node
vue2 is written as follows:

 var app = new Vue({
   el: '#app',
   data: {
     message: '666',
   },
   template: '<h2>{{message}}</h2>',
});

The following is the way vue3 is written

 const app = Vue.createApp({
     data() {
         return {
             message: '666'
         }
     },
     template: "<h2>{{message}}</h2>"
 })
 app.mount("#app")

[Solved] Vue Error: Module build failed: Error: No PostCSS Config found in

Problem description
execute the NPM install command to install all dependencies, and then run NPM run dev to report an error:

error  in ./node_modules/view-design/dist/styles/iview.css

Module build failed: Error: No PostCSS Config found in: /Users/lanweihong/Code/JS/hotel-pms/node_modules/view-design/dist/styles
    at config.search.then (/Users/lanweihong/Code/JS/hotel-pms/node_modules/postcss-load-config/src/index.js:91:15)
    at <anonymous>

Solution
create a new postcss.config.js file in the project root directory. Postcss.config.js is a special processing for webpack 3.0.

postcss.config.js

module.exports = { 
    plugins: { 
      'autoprefixer': {browsers: 'last 5 version'} 
    } 
}

Rerun NPM run dev.

[Solved] Vue Error: Module build failed Error Node Sass version 6.0.1 is incompatible with ^4.0.0.

Vue error module build failed: error: node sass version 6.0.1 is incompatible with ^ 4.0.0. Solution

Error message:

 ERROR  Failed to compile with 1 errors                                                                                                                                      下午6:51:57
 
 error  in ./src/views/Login.vue
 
Module build failed: Error: Node Sass version 6.0.1 is incompatible with ^4.0.0.
    at getSassImplementation (D:\IDEA\IDEA Projects\Vue\hello-vue\node_modules\[email protected]@sass-loader\dist\utils.js:77:13)
    at Object.loader (D:\IDEA\IDEA Projects\Vue\hello-vue\node_modules\[email protected]@sass-loader\dist\index.js:34:59)
 
 @ ./node_modules/vue-style-loader!./node_modules/css-loader?{"sourceMap":true}!./node_modules/vue-loader/lib/style-compiler?{"vue":true,"id":"data-v-26084dc2","scoped":true,"hasInline
Config":false}!./node_modules/[email protected]@sass-loader/dist/cjs.js?{"sourceMap":true}!./node_modules/vue-loader/lib/selector.js?type=styles&index=0!./src/views/Login.vue 4:14-389
 13:3-17:5 14:22-397
 @ ./src/views/Login.vue
 @ ./src/router/index.js
 @ ./src/main.js
 @ multi (webpack)-dev-server/client?http://localhost:8080 webpack/hot/dev-server ./src/main.js

Solution:

Find the problem: module build failed: error: node sass version 6.0.1 is incompatible with ^ 4.0.0

This problem is caused by the high version of SASS, so just change the version to the corresponding version according to the prompt. Here, change to version 4.0.0.

Step 1: find the package.json file in the IDE:

Step 2: find sass loader and change its version to 4.0.0

Finally, execute

cnpm install

Finally, execute

cnpm install

npm run dev

[Solved] Vue Error: TypeError: Cannot read property ‘end‘ of undefined

My code:

computed: {
    handleTimestamp() {
    let endData = this.activityList[0].end
    }
}

The error message is as follows:
but when I print this.activitylist, it has value

The reason for the error here is:
the page has not rendered data at the beginning. At this time, the activitylist is still empty. Of course, you can’t get its value in the calculated method

Solution:
at the beginning of the method, judge the length of the activitylist. If it is empty, the execution will not continue. If it is not empty, the following code will be executed:

computed: {
    handleTimestamp() {
    if(!this.activityList.length) return
    let endData = this.activityList[0].end
    }
}

That’s it~~~

How to Solve VUE Error: Avoid mutating a prop directly since the value will be overwritten …

1. Demand and error reporting

Requirements: the scenarios are: component a refers to component B, uses V-model to pass parameters to B, B uses props: {value} to receive content, directly modifies and assigns value according to logic in B, and sees error report in browser console after event triggering, as follows:

Avoid mutating a prop directly since the value will be overwritten whenever the parent component re-renders. 
Instead, use a data or computed property based on the prop's value. Prop being mutated: "value"

2. Analyze the reasons

In terms of the content of the error report, we have changed the variables of the parent component referenced in the child component, that is, the data in props; From the prompt information, is it feasible to use mutated ?In vue2, the data in the component props can only flow in one direction, that is, it can only pass props from the parent component through the component’s DOM attribute to the child component, and the child component can only passively receive the data from the parent component, and in the child component, the props data from the parent component cannot be modified. The value of props cannot be modified in the component, and the modified value will not be synchronized to the outer layer of the component, that is, the calling component does not know what the current state is inside the component

2.1 what causes this?

In the vue1. X version, the props binding modifiers twoway and . Sync can be used to realize the bidirectional data binding of props . Remove the bidirectional data binding function of props in vue2.0 . If bidirectional binding is needed, you need to implement it yourself
in vue2.0 , the data flow of component’s props is changed to only one-way flow, that is, it can only be transferred from (parent component) to (child component) through component’s v-bind: attributes , and the child component can only passively receive the data from the parent component, The props data passed by the parent component cannot be modified in the child component. Official document explanation:

Prop is unidirectional: when the properties of the parent component change, it is passed to the child component, but not vice versa. This is to prevent the child component from unintentionally modifying the state of the parent component – which makes the data flow of the application difficult to understand
although abandoning the two-way binding of props is beneficial and correct for the whole project, we do need to modify the requirements of props from within the component at some times

In vue2.0 , the following methods can be used to realize the bidirectional binding mode of component attributes (not binding, but asynchronous modification)

The V-model instruction or . Sync modifier will transfer the method of modifying attributes to the subcomponent call through v-bind . The subcomponent can directly use the method to transfer the method of modifying attributes to the subcomponent call through v-on , and use $emit() to implement callback modification or use this. $parent to modify

3. Solution: use v-on to realize the modification mode

It’s also for code readability

do not directly modify the props data passed from the parent component, redefine a variable in the data function, assign the props data value to the data variable, and then modify the data variable. As follows:

Component B accepts the parameters of component A

name: "B",
props: {
	father: {
		type: String,
		default: null
	}
}
data(){
  return{
    father_a : this.father
  }
}

If you want to listen to the variables passed in the a component to modify a data in the b component, you can use the watch listening function to listen. As follows:

name: "B",
props: {
	father: {
		type: String,
		default: null
	}
}
data(){
  return{
    father_a: this.father
    son: ''
  }
}
//Listening function, whenever the father variable passed from the parent component changes,
// the son variable defined in the child component will be assigned the value "son"
watch:{
  father(val, valOld){
    this.son = "Son"
  }
}

If b wants to modify the attributes passed by a , you can use $emit to modify the attributes

A

<B :father="a" @change="changeA" />

<script>
export default {
	name: 'A',
	data() {
		return {
			a: 'Variables of A'
		}
	},
	methods: {
		changeA(val) {
			this.a = val
		}
	}
}
</script>

B

<script>
export default {
	name: 'B',
	props: {
		father: {
			type: String,
			default: null
		}
	},
	data() {
	},
	watch:{
	  father(val, valOld){  // Here you can also define the variable in data and assign the father to it, and monitor the variable here
	    // This is the logic that the child component needs to handle if the father variable changes
	  }
	}, the
	methods: {
		changeAFather() { // Who calls it? It's the child component's business operation
			this.$emit('change', val)
		}
	}
}
</script>

So far, the data in the child component and the data in the parent component are bound Bi directionally, and the data inside and outside the component are synchronized: when the internal component changes, the external component decides whether to change

vue1.0 data bidirectional binding is abandoned in vue2.0 version?Through the case, it can also be found that there are many bidirectional binding props codes, which is not conducive to the data state management between components, especially in complex business. It is not easy to understand and read the logic, so we try not to use this way of bidirectional binding, and use vuex for data management in too complex data processing.