Tag Archives: Web front end

uniapp [Vue warn]: Error in onLoad hook: “TypeError: Attempting to change the setter of an unconfigu

1. Background

I found this error when developing wechat applet with uniapp, and recorded how I solved it!

2. Error message

uniapp [Vue warn]: Error in onLoad hook: “TypeError: Attempting to change the setter of an unconfigurable property.”

3. Error reason:

Because in the Object.defineproperty method, the control property cannot be deleted. It is in an unconfigurable state.

4. Error analysis

Let’s take a look at the specific use of the Object.defineproperty method:

The role of Object.defineproperty is to define a new property directly on an object, or modify an existing property

Object.defineproperty parameter

The Object.defineproperty method needs to pass 3 parameters

Object.defineproperty(obj, prop, desc)

Parameter 1: obj The current object whose properties need to be defined

Parameter 2: prop The name of the property that currently needs to be defined

Parameter 3: The desc descriptor is generally an object

Generally, by assigning a value to the property of the object, the property of the object can be modified or deleted, but the property of the object can be defined by Object.defineProperty(), and the property of the object can be controlled more precisely by the setting of the descriptor.

Object.defineProperty(obj, variate, {
                enumerable:true, //Controls whether the property can be enumerated, the default value is false
                 //writable:true, //Whether the control property can be modified, the default value is false
                 configurable:true, //Control whether the property can be deleted, the default value is false
                set: function (value) {
                    console.log('global set value!');
                    val = value; 
                    const data = {};
                    data[variate] = value;
                    console.log('page set value!');
                    page.setData(data);
                },
                get: function () {
                    console.log('global get value!');
                    // This will be executed when getApp().globalData.variate is called in other interfaces.
                     return val; // return the current value
                }
            });

Finally, there are two most important attributes, set and get (that is, accessor Description: define how attributes are accessed). What are these two attributes used for?

Note: when getter or setter methods are used, writable and value attributes are not allowed (if used, an error will be reported directly)

5. Solution

This error is caused by the value of configurable being set to false, so it can be changed to true! Pay attention to the error prompt on the console. Maybe your error is reported in other situations!

[Solved] mqtt.js Error: n.createConnection is not a function

Reason: This is a version problem, 4.2.X+ (this is also the problem when I use the latest version, which may be improved in the future)

Solution: use the lower version, I use 4.1.X is OK.

Here is the output of the client after the connection is successful

Vue solution:
Vue installation. Not only the version needs to be modified, but also the ^  in front of the version needs to be removed (in packpage.json), but there is no Vue test. You can try it (a picture of other blogs is cut here)

Module not found: Error: Can‘t resolve ‘sass-loader‘ in…

sass-loader!

Failed to compile.

./src/main.js
Module not found: Error: Can't resolve 'sass-loader' in 'E:\study_software\JetBrains\WebStorm2021\WebstormProjects\vue-element-admin-master'

npm install sass-loader sass webpack --save-dev
npm install --save-dev node-sass
or
cnpm install node-sass --save

sass-loader: https://www.npmjs.com/package/sass-loader

Vue install reports an error operation not allowed

Solution:

1. Permission problem
you can run CMD as an administrator or open CMD by pressing Win + x .

2. Dependency package error
generally, in this case, we need to focus on the directory after operation not allowed . Through the error prompt, the problem can be solved by correctly installing the required dependent packages globally.

3. NPM version problem
this is also similar to the previous one, because different versions sometimes have problems with dependent packages. For example, the version is too high and there is no corresponding dependent package, so it is OK to change the NPM version.

[Solved] TypeError: Converting circular structure to JSON – JSON.stringify

When using the json.stringify method to convert a string, an error typeerror: converting circular structure to JSON will be reported

Reason: there is a circular reference to itself in the object;

For example:

let test = { a: 1, b: 2 };
test.c = test; // Circular references
JSON.stringify(test); // report an error

Solution:
the following JSON_ STR is the converted String of JSON. Stringify

var cache = [];
var json_str = JSON.stringify(json_data, function(key, value) {
    if (typeof value === 'object' && value !== null) {
        if (cache.indexOf(value) !== -1) {
            return;
        }
        cache.push(value);
    }
    return value;
});
cache = null;	//release cache

error This is probably not a problem with npm. There is likely additional logging output above.

Nextjs program released, reported a pile of errors

18 verbose node v14.11.0
19 verbose npm  v6.14.8
20 error code ELIFECYCLE
21 error errno 1
22 error [email protected] build: `next build`
22 error Exit status 1
23 error Failed at the [email protected] build script.
23 error This is probably not a problem with npm. There is likely additional logging output above.
24 verbose exit [ 1, true ]

Maybe due to the version update,
the solution is to install it again. It is recommended to empty all the previous ones

rm -rf node_modules
rm package-lock.json
npm cache clear --force
npm install

 

NuxtSe rverError:Request failed With status code 500 my solution and thinking

catalog

1、 Source of the problem

2、 Solutions

3、 Solutions

4、 Summary


1、 Source of the problem

Usually using nuxt and deploying it online are normal, and occasionally 500 errors are reported one day;

Nuxt.js The operation ( NPM run dev ) reported the following error:

The server error log is as follows:

0|qiu  |  ERROR  Request failed with status code 500                           20:17:14
0|qiu  |   at createError (node_modules/axios/lib/core/createError.js:16:15)
0|qiu  |   at settle (node_modules/axios/lib/core/settle.js:18:12)
0|qiu  |   at IncomingMessage.handleStreamEnd (node_modules/axios/lib/adapters/http.js:201:11)
0|qiu  |   at IncomingMessage.emit (events.js:187:15)
0|qiu  |   at IncomingMessage.EventEmitter.emit (domain.js:441:20)
0|qiu  |   at endReadableNT (_stream_readable.js:1094:12)
0|qiu  |   at process._tickCallback (internal/process/next_tick.js:63:19)

2、 Solutions

500 status code: server internal error, unable to complete the request.

Generally speaking, this problem occurs when the server code fails

So the problem lies in the back end, check the interface

3、 Solutions

Annotate the code one by one, and find an interface error in the page, so that the problem can be solved after the back-end correction;

The error of the request interface is as follows (PHP in the background)

 

It’s a clumsy way to comment the code one by one. If you can, you can directly look at the network of the console to see the interface in error;


4、 Summary

because Nuxt.js It is a framework for server-side rendering. As long as an interface in the page reports an error and the server returns an error, the front-end display page will crash;

And an interface error, nuxt only returns 500 errors, can’t directly locate the problem, need to check one by one, hope nuxt is more and more powerful

 

The wechat app I developed (online):
if you are interested, you can have a look at it and pay close attention to it with one click. Thank you ~
1. Xiaolv depression Test Assistant (wechat APP): a completely free and ad free depression self-test app, which collects questionnaires from global authorities and provides them to you for free. There are novel score records and posters to share, You can see and learn!

Xiaolv depression test assistant

JQuery is a solution to the disappearance of listening events after adding elements with append

Suppose you want to append an element in the div with ID target
the original listening event format is:

$(".textBox").mouseover(function() {});

To be amended as follows:

$("#target").on("mouseover", ".textBox", function() {});

Add a dynamic box for target ID all the time, not a dynamic box!!! If you really can’t, just let the body go

Attributeerror: object has no attribute

Error report: in the front-end test, the interface sends a put request, the error report occurs on the interface, the request cannot respond, and the server status code is 500.

Error analysis: semantically, “the object does not have a XXX attribute.”.

Look up most of the information, most of the problems with Python. The front end of this project uses react, and the back end uses the djongo framework of Python.

The main reason for asking the back-end colleagues is that the data type of the parameters passed by the front-end is incorrect. The back end needs a string “true”, but the front end passes a Boolean “true”, which causes the above problem.

In case of such a problem, the error code returned by the server is 500. For such a problem, usually ask the back-end colleagues to check the log for common analysis.

NS_ERROR_DOM_BAD_URI: Access to restricted URI denied

If our js file contains Ajax code, and references the HTML file of this js file, open the test directly locally, this error will appear:
as shown below:
util. Js file

function ajax(url,options,type){
    var oAjax=null;
    var type=type || "GET";
    //alert(type);
    if(window.XMLHttpRequest){
        oAjax=new XMLHttpRequest();

    }
    else{
        oAjax=new ActiveXObject('Microsoft.XMLHTTP');
    }

    oAjax.onreadystatechange=function(){
        if (oAjax.readyState==4) {
            if (oAjax.status==200) {
                options.onsuccess(oAjax.responseText);
            } 
            else{
                options.onfail();
            };
        };
    }

    url=url+"?name="+options.data.name+"&password="+options.data.password+"&t="+Math.random();
    oAjax.open(type,url,true);
    oAjax.send();
}

Assuming that there are other functions in the util.js file that we need, when we introduce util.js into the HTML file, the local browser opens the test with an error

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>task0002</title>
    <script type='text/javascript' src='js/util.js'></script>
</head>
<body>
   <textarea name="hobby" id="hobby" cols="30" rows="10"></textarea><br/>
    <input type="button" id='btn' value='filtration'>
    <script>
        var oTxt=document.getElementById('hobby');
        var btn=document.getElementById('btn');
         var p=document.createElement('p');
         document.body.appendChild(p);
        btn.onclick=function(){
            var hobbys=oTxt.value;
            var ary=hobbys.split(/[,、;\n\s,\u3000]/);
            ary=uniqArray(ary);
            p.innerHTML="";
            p.innerHTML="hobby:"+ary.join("<br/>");
        }
    </script>
</body>
</html>

The reason: When local browsing opens the page, a cross-domain problem occurs, so the message is that you don’t have permission
Solution:
1. Put the ajax code part in the HTML file, there will be no problem
2. By placing the project folders on the server, they will be in one domain by default and cross-domain problems will not occur