Tag Archives: front end

Gyp err! Build error stack error

Error content:

gyp ERR! build error
gyp ERR! stack Error: `C:\\Program Files (x86)\\Microsoft Visual Studio\\2017\\BuildTools\\MSBuild\\15.0\\Bin\\MSBuild.exe` failed with exit code: 1

Repeat several times and still report an error.
Check the problem. The yarn version is normal, and the image is also a Taobao image.


1. Execute NPMI – G node gyp command
2. Delete directory/node_ All files under modules
3. Re install.

In addition, it can be seen on the Internet that it may be due to the node version. The node version needs to be lowered. I didn’t try this method. I don’t know if it’s feasible.

JavaScript summary: the difference between typeof and instanceof, and Object.prototype.toString() method

In my previous blog, I introduced basic data type and reference data type: basic type is a simple data segment stored in stack memory, that is, a single literal value; reference data type refers to an object composed of multiple values.

Typeof is an operator used to detect variable data types, mainly used to detect basic data types. It can determine whether a variable is a string, a numeric value, a Boolean value or undefined. However, if the detected variable is a reference data type, it can return object or function, but it can’t tell in detail whether it is array or regexp.

The main purpose of nstanceof is to detect reference types.

Let’s take a closer look

The difference between typeof and instanceof:


Typeof is a unary operation, which can be of any type before an operand.

It is mainly used to determine whether the data is the basic data type:
string, number, object, null, undefined and Boolean, but it is unable to determine the function, array and regexp

the return value is a string indicating the type of the operand.

only a few results can be returned, such as number, undefined, and Boolean.

We can even use typeof to determine whether a variable exists,
such as if (typeof a = = undefined){ document.write (“OK”);}, and you don’t need to use if (a), because if a doesn’t exist (undeclared), there will be an error. For special objects such as array and null, typeof will always return objects, which is the limitation of typeof.

Take a look at the code example:

<!DOCTYPE html>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script language="javascript" type="text/javascript">
document.write ("typeof(1): "+typeof(1)+"<br>");
document.write ("typeof(NaN): "+typeof(NaN)+"<br>");
document.write ("typeof(Number.MIN_VALUE): "+typeof(Number.MIN_VALUE)+"<br>");
document.write ("typeof(Infinity): "+typeof(Infinity)+"<br>");
document.write ("typeof(true): "+typeof(true)+"<br>");
document.write ("typeof ([]): "+typeof([])+"<br>");
document.write ("typeof ({}): "+typeof({})+"<br>");
document.write ("typeof(window): "+typeof(window)+"<br>");
document.write ("typeof(Array()): "+typeof(new Array())+"<br>");
document.write ("typeof(document): "+typeof(document)+"<br>");
document.write ("typeof(null): "+typeof(null)+"<br>");
document.write ("typeof(function(){}): "+typeof(function(){})+"<br>");
document.write ("typeof(eval): "+typeof(eval)+"<br>");
document.write ("typeof(Date): "+typeof(Date)+"<br>");
document.write ("typeof (''): "+typeof('')+"<br>");
document.write ("typeof(\"123\"): "+typeof("123")+"<br>");
document.write ("typeof(sss): "+typeof(sss)+"<br>");
document.write ("typeof(undefined): "+typeof(undefined)+"<br>");
if(typeof a=="undefined"){document.write ("ok");}

Running results:


The main purpose of instanceof is to detect the reference type. The return value of is only true and false </ font>, which can be used to determine whether the prototype attribute of a constructor exists in the prototype chain of another object to be detected. Here we can ignore the prototype first

See the following code example:

<!DOCTYPE html>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script language="javascript" type="text/javascript">
document.write ("[] instanceof Array: " + ([] instanceof Array )+ "<br>");
document.write ("{} instanceof Object: " + ({} instanceof Object )+ "<br>");
document.write ("/\d/ instanceof RegExp: " +( /\d/ instanceof RegExp) + "<br>");
document.write ("function(){} instanceof Object: " + (function(){} instanceof Object) +"<br>");
document.write ("function(){} instanceof Object: " + (function(){} instanceof Function) +"<br>");
document.write ("'' instanceof String: " + ('' instanceof String) +"<br>");
document.write ("1 instanceof Number: "+ (1 instanceof Number) +"<br>");

The running results are as follows:

For example, we need to determine whether a is an instance of B?You can use a instance of B?Alert (“true”): Alert (“false”); to judge

Instanceof is used to determine whether a variable is an instance of an object
for example, var a = new array(); alert (a instanceof array); will return true
and alert (a instanceof object) will return true;
this is because array is a subclass of object.

When it comes to instanceof, we need to insert one more problem, which is the arguments of function. We may all think that arguments is an array, but if we use instanceof to test, we will find that arguments is not an array object, although it looks very similar.

In addition:

Test var a = new array(); if (a instance of object) alert (‘y ‘); else alert (‘n’);
get ‘y’

But if (window instance of object) alert (‘y ‘); else alert (‘n’);
get ‘n’

Therefore, the object of instanceof test here refers to the object in JS syntax, not the DOM model object.

There are some differences when using typeof
alert (typeof (window)) will get object

three Object.prototype.toString

In many cases, we can use the instanceof operator or the constructor property of the object to detect whether the object is an array. For example, many JavaScript frameworks use these two methods to determine whether an object is an array type. But detecting arrays in cross frame pages fails. The reason is that arrays created in different iframes do not share their prototype properties with each other

    var iframe_arr=new window.frames[0].Array;
    alert(iframe_arr instanceof Array); // false
    alert(iframe_arr.constructor == Array); // false

The tostring() method is called across the prototype chain Object.prototype.toString (), which can solve the above cross framework problem.
This is a primitive prototype extension function of an object, which is used to distinguish data types accurately
when Object.prototype.toString (o) After execution, the following steps are performed:

1) Get the class property of object o.
2) connection string “[object” + result (1) + “]
3) return result

Object.prototype.toString . call ([]);// returns “[object array]”
0 Object.prototype.toString . call (/ reg/Ig);// returns “[object regexp]”

And we will find that it is not accurate to judge the data type by typeof. For example, the return values of array, regular, date and object typeof are all objects, which will cause some errors.
Therefore, on the basis of type of judgment, we need to use Object.prototype.toString Method to further determine the data type.

Let’s look at the code:

<script language="javascript" type="text/javascript">
var type=Object.prototype.toString
console.log(type.call(''));//object String
console.log(type.call([]));//object Array
console.log(type.call({}));//object Object
console.log(type.call(false));//object Boolean
console.log(type.call());//object Null
console.log(type.call(undefined));//object Undefined
console.log(type.call(function(){}));//object Function
console.log(type.call('')=="[object String]");//true

Running results:

To sum up:

Both typeof and instanceof are operators used to detect variable types. The difference between them is that

Typeof is used to judge the basic type of variable; instanceof is used to judge the type of object;

Call the tostring() method across the prototype chain: Object.prototype.toString (), which can solve the cross frame problem.
This is a primitive prototype extension function of the object, which can be used to accurately distinguish data types

Yapi platform deployment error (MAC must report error) solution

1. Deploy Yapi locally

According to the official documents, after the global installation of Yapi CLI and mongodb, the terminal executes Yapi server, and the browser enters to open the deployment page

After filling in the basic information, click Start deployment, wait for a period of time, the problem appears

node server/install.js

   throw err;

Errpr:Cannot find module 'nodemailer'
  at Function.Module_resolveFileName(.........)
  at Function.Module_resolveFileName(.........)


The reason for the error is probably the lack of nodemailer module, so I tried to install the module globally. After the installation, I still reported the same error. In this way, I kept looking for the error. I deleted the project and started over again. After repeated tossing and tossing, I was about to re install the system. After one afternoon’s tossing and tossing, I finally found a solution

2. Solutions

Due to the problem of MAC permission, Yapi is initialized according to the official document writing method, and finally there is no write permission in NPM, resulting in the loss of packets

Modify the “Yapi server” as

sudo yapi server

Then the project is deployed again and the problem is solved






Error in created hook: “typeerror: cannot read property ‘cm’ of undefined”

At the beginning, I put the initialization and instance of the map in the created hook function. As a result, I reported an error

Error in created hook: “TypeError: Cannot read property ‘CM’ of undefined”

When ecarts was used before, it would report an error when it was put in created at the beginning. Later, it was put in mounted after Baidu, so it was directly put in mounted, and the effect was realized.

Learn the difference between these two hook functions and make a record to deepen your impression

Error: EBUSY: resource busy or locked

Error: EBUSY: resource busy or locked, LSTAT ‘C:\ swapfile.sys ’。
Here are some effective methods I summarized:

Method 1: delete node_ Module, and then install (NPMI);
method 2: delete node_ Modules, run NPM cache clean or NPM cache clean — force command, and then install;
method 3: upgrade the node version and delete the node_ Modules, and then install it.

Error: syntax error – unexpected token P in JSON at position 0

Error: syntax error – unexpected token P in JSON at position 0

Please check the error log carefully to see if the format of the data type from the front end to the back end is correct.

For example, the background needs data in JSON format, while the front-end data format is not in JSON format.

You can use: JSON.pase () and JSON.stringify ()

Error failed to compile with 1 errors

The specific errors are as follows:


94% asset optimization

 ERROR  Failed to compile with 1 errors                                                                                     14:27:08

This dependency was not found:

* !!vue-style-loader!css-loader?{“sourceMap”:true}!../../../node_ modules/vue-loader/lib/style-compiler/index?{“vue”:true,”id”:”data-v-59d9138a”,”scoped”:false,”hasInlineConfig”:false}!stylus-loader?{“sourceMap”:true}!../../../node_ modules/vue-loader/lib/selector?type=styles&index=0!./ List.vue in ./src/pages/list/ List.vue

To install it, you can run: npm install –save !!vue-style-loader!css-loader?{“sourceMap”:true}!../../../node_ modules/vue-loader/lib/style-compiler/index?{“vue”:true,”id”:”data-v-59d9138a”,”scoped”:false,”hasInlineConfig”:false}!stylus-loader?{“sourceMap”:true}!../../../node_ modules/vue-loader/lib/selector?type=styles&index=0!./ List.vue

My mistake here is because I added a wrong specification in the process of creating a single file component:


Error: property ‘TZ’ does not exist on type ‘type of moment’

A new ABP project, NPM install, then NPM start, results in an error: property ‘TZ’ does not exist on type ‘type of moment’

moment.tz.setDefault ( abp.timing.timeZoneInfo . iana.timeZoneId );

Because this paragraph is wrong:

Property 'tz' does not exist on type 'typeof moment'.  TS2339

    24 | 
    25 |   if (abp.clock.provider.supportsMultipleTimezone) {
  > 26 |     moment.tz.setDefault(abp.timing.timeZoneInfo.iana.timeZoneId);
       |            ^
    27 |   }
    28 | 
    29 |   const stores = initializeStores();
This error occurred during the build time and cannot be dismissed.


https://blog.csdn.net/qq_ thirty-six million two hundred and seventy-nine thousand four hundred and forty-five

Change here to

import * as moment from ‘moment-timezone’;



[Error] because it violates the following Content Security Policy directive

[Error] because it violates the following Content Security Policy directive

In the process of HTML development, we encountered the following error, which means the permission problem of HTML meta setting

Refused to connect to 'blob:http://localhost:8080/6d57f07f-3c2f-49ca-be30-fd0b7f4cff6e' 
because it violates the following Content Security Policy directive: 
"default-src * 'self' 'unsafe-inline' 'unsafe-eval' data: gap: content: ". 
Note that 'connect-src' was not explicitly set, so 'default-src' is used as a fallback.

Specifically, this bug appears when using vue-html2pdf.
The screenshot is as follows

the last time I encountered a similar problem was when I used the video tag.
These are similar problems

You need to open the source code of the HTML page (for example, index.html ), modify the meta in the head section

  <meta http-equiv="Content-Security-Policy" content="default-src * 'self' 'unsafe-inline' 'unsafe-eval' data: gap: content: https://ssl.gstatic.com; 
    media-src * blob: 'self' http://* 'unsafe-inline' 'unsafe-eval'; 
    style-src * 'self' 'unsafe-inline'; 
    img-src * 'self' data: content:; 
    connect-src * blob:;">

The example is divided into multiple lines and can be modified according to your own needs. For example, IMG SRC allows * and other types of resources.
Connect SRC allows * blob: and other types of resources. Note that * does not contain the blob: type. If it is not declared, blob: may be wrong

reference material

Used to connect to XXX – because it violates the following content security policy
Cordova rejected to connect to xxxxx - white list refuses to send network requests
meta tag official website: https://developer.mozilla.org/zh-CN/docs/Web/HTML/Element/meta
Content security policy website: https://developer.mozilla.org/zh-CN/docs/Web/HTTP/Headers/Content-Security-Policy__ by_ cnvoid

Uncaught Error: THREE.OBJLoader : unexpected line: “DOCTYPE HTML” [solved]

Today’s problem really makes me despair. What you netizens say is that it’s OK to put it under static, but I can’t do it here 😥
Then I found that I had a static folder under public. After testing, I found that it was really static under public….
The code can still be written as usual

obj file is put under public/static
but why I don’t understand?If you know, please leave a message in the comment area 😁

To solve the problem of NPM run eject error in react

To solve the problem of NPM run eject error in react

Recently, I began to learn react. I used create react app to initialize a react project. Then I found that I wanted to configure webpack manually, but I didn’t know where it was. I found that I was using BD to configure webpack package.json There’s a bunch of code in the

 "scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test",
    "eject": "react-scripts eject"

NPM run eject will copy all dependent files and corresponding dependencies ( webpack , Babel ) to your project. It's a single operation. Once eject , you can't go back. If you want to go back to the normal project, you have to Re NPM install create react app - G

It was found that the following error was reported when executing NPM run eject :

checked online, which means that the problem here is that the scaffold adds . Gitgnore files, but there is no local warehouse, which can be used normally according to the following order

git init
git add .
git commit -m 'init'

Then execute NPM run eject again, and the execution is successful.
after the execution is completed, it is found that package.json It's like this:

  "scripts": {
    "start": "node scripts/start.js",
    "build": "node scripts/build.js",
    "test": "node scripts/test.js"

The last line of code was deleted by the system itself, not by me!

That's all for today

Reprint should be marked, thank you!