Tag Archives: front end

Hexo Error: error: spawn failed [How to Solve]

Problem description

First, an error occurred:

error:spawn failed...

After some blog operations, the following problems will occur:

fatal: cannot lock ref 'HEAD': unable to resolve reference HEAD: Invalid argument error: src refspec

Or:

error: src refspec HEAD does not match any.

The following picture is an error report after uploading GitHub by myself hexo d:

FATAL {
  err: Error: Spawn failed
      at ChildProcess.<anonymous> (D:\Program Files\blog\node_modules\hexo-util\lib\spawn.js:51:21)
      at ChildProcess.emit (node:events:526:28)
      at ChildProcess.cp.emit (D:\Program Files\blog\node_modules\cross-spawn\lib\enoent.js:34:29)
      at Process.ChildProcess._handle.onexit (node:internal/child_process:291:12) {
    code: 128
  }
} Something's wrong. Maybe you can find the solution here: %s https://hexo.io/docs/troubleshooting.html


Cause analysis:

The problem is mostly due to git doing a push or hexo d and changing some of the content under the .deploy_git file.


Solution:

Solution: 1

1. Delete .deploy_git folder
2. Enter git config --global core.autocrlf false
3. Then, execute in sequence:

hexo clean
hexo g
hexo d

Solution: 2

1. Enter the hexo root directory
2 Direct the arrow to .deploy_git and public are deleted directly

3. Then, execute in sequence:

hexo clean
hexo g
hexo d

Be careful!!: Deleting these two folders will not affect you! After the implementation of hexo, the third company will redeploy simple violence!

[Solved] vue.esm.js?efeb:591 [Vue warn]: Error in event handler for “click“: “TypeError: Cannot read property

vue.esm.js?efeb:591 [Vue warn]: Error in event handler for “click”: “TypeError: Cannot read property ‘setCheckedKeys’ of undefined”

This is because this.dialogVisible = true does not update the dom immediately, but waits for the entire logic to be executed and then renders it again, so the popup box is not rendered at this time and does not exist in the dom tree.
This.$refs.tree is undefined so setCheckedKeys must also be undefined.

Solution: Use this.$nextTick(), this.$nextTick() will execute callback after DOM update:

opetation (auth) {
  this.dialogVisible = true
  this.$nextTick(function() {
    this.$refs.tree.setCheckedKeys(auth)
  })
}

[Solved] VUE npm install Error: Module build failed: Error: ENOENT: no such file or directory, scandir

The error information is as follows:

Module build failed: Error: ENOENT: no such file or directory, scandir 'D:\renren-fast-vue\node_modules\node-sass\vendor'
    at Object.fs.readdirSync (fs.js:904:18)
    at Object.getInstalledBinaries (D:\renren-fast-vue\node_modules\node-sass\lib\extensions.js:132:13)
    at foundBinariesList (D:\renren-fast-vue\node_modules\node-sass\lib\errors.js:20:15)
    at foundBinaries (D:\renren-fast-vue\node_modules\node-sass\lib\errors.js:15:5)
    at Object.<anonymous> (D:\renren-fast-vue\node_modules\node-sass\lib\index.js:14:35)
    at Module._compile (module.js:653:30)
    at Object.Module._extensions..js (module.js:664:10)
    at Module.load (module.js:566:32)
    at tryModuleLoad (module.js:506:12)
    at Function.Module._load (module.js:498:3)
    at Module.require (module.js:597:17)
    at require (internal/module.js:11:18)
    at Object.<anonymous> (D:\renren-fast-vue\node_modules\sass-loader\lib\loader.js:3:14)
    at Module._compile (module.js:653:30)

The solution is as follows:

Re execute NPM rebuild node-sass

Finally, the solution is started successfully:

[Solved] SyntaxError: Cannot use import statement outside a module

SyntaxError: Cannot use import statement outside a module

Problem: When debugging js code with vs code, I get “SyntaxError: Cannot use import statement outside a module”

import express from "express";

const app=express();
app.listen(9527,function(){
    console.log(9527);
})

Solution:

npm init -y
Add type(“type”:”module”,) in package. json

{
  "name": "serve",
  "version": "1.0.0",
  "description": "Server-side interface building for js phase projects",
  "main": "index.js",
   "type":"module",
  "scripts": {
    "node":"node app.js",
    "dev":"nodemon ./app.js"
  },
  "keywords": [
    "shop"
  ],
  "author": "wff",
  "license": "ISC",
  "devDependencies": {
    "express": "^4.17.3",
    "nodemon": "^2.0.15"
  }
}

The terminal runs node index.js or vs Code F5 can be run.

[Solved] Font End Image Display Error: net::ERR_CONNECTION_RESET 431 (Request Header Fields Too Large)

(1) The pictures are stored in the database

Use the el-upload component to convert the picture into a string in Base64 format and store it in the MySQL database. The field type is longtext.

(2) Error in front-end display picture

Get the picture data from the back end through the post request and assign it to Src. As a result, the picture cannot be displayed and an error: net::ERR_CONNECTION_RESET 431 (Request Header Fields Too Large)

(3) Problem-solving

Add “data:image/jpeg;base64,” before the base64 format string.

this. form. userPhoto=”data:image/jpeg;base64,”+this. form. userPhoto;

Here, image/JPEG is the name of the data type, Base64 is the encoding method, and the data after the comma is the data taken from the database. You can also check the data URL on the Internet.

So the problem is solved.

[Solved] nodejs Error: request entity too large

A project written in Vue and nodejs requires image upload, but report error:

PayloadTooLargeError: request entity too large
at readStream

Solution: add Middleware

const bodyParser = require('body-parser');
router.use(bodyParser.urlencoded({extended: false, limit: '10mb'}));

The default is 100kb, which can be replaced by a large number. The unit can be MB, etc

[Solved] error Component name “xxx“ should always be multi-word vue/multi-word-comp

Project issues

An error was encountered in the Vue project today. The console reported error Component name “xxx“ should always be multi-word vue/multi-word-comp, which is mainly the error reported by eslint standardization

 

Solution:

Turn off naming rule verification
find it in the root directory eslintrc.js file, add the following code:

   "vue/multi-word-component-names":"off",

.eslintrc.js file content:

[Solved] Uncaught (in promise) DOMException: Failed to load because no supported source was found.

The audio error of uniapp,
my situation is that sometimes it is good and sometimes it is not good
the error report is shown in the figure below:

the reason for the error report is that the audio cannot find resources
check the code and find that the path is written like this

so the following modifications are made:
just import it directly above


solved~

[Solved] Invalid prop: type check failed for prop “modelValue“. Expected Number…

Warning prompt

After running the project, chrome console will prompt the following error message:

[Vue warn]: Invalid prop: type check failed for prop "modelValue". Expected Number with value 5, got String with value "5".

  at <VanRate modelValue="5" onUpdate:modelValue=fn<onUpdate:modelValue> size=11  ... >

  at <DetailItem detailData= (2) [{…}, {…}] onTrustBuyClick=fn<bound trustClick> >

  at <Detail onVnodeUnmounted=fn<onVnodeUnmounted> ref=Ref< Proxy {getSpecialData: ƒ, trustClick: ƒ, moreClick: ƒ, …} > key=0 >

  at <RouterView>

  at <App>

analysis

According to the above warning prompt, you can clearly see the problem, Invalid prop: type check failed for prop “modelValue”. Expected Number with value 5, got String with value “5” This sentence has actually explained that the reason for the error is prop The attribute value of the value failed to be verified. The value required by the component is 5 of the number type, but the currently obtained value is “5” of the string type. This is caused by inconsistent data types. The prop is used as a property in the Vue component, so you only need to determine which component is reporting the error. Check the value format of the prop and change it to the Expected type, such as number here. To sum it up: warning errors due to inconsistent data types.

Solution:

The warning log has indicated that the specific error occurred in that component. Find the location of that component, and then check where the data types are inconsistent when transmitting values, and then modify the attributes. Generally, the value format type in the props of the component can be directly modified to the type required by the corresponding component.

 

[Solved] Syntax Error: Error: No ESLint configuration found & TypeError: eslint.CLIEngine is not a constructor

Here we will show you how to solve the two common error:

  1. Syntax Error: Error: No ESLint configuration found.
  2. Syntax Error: TypeError: eslint.CLIEngine is not a constructor

 

Solution:

Error 1: Syntax Error: Error: No ESLint configuration found.

Method 1:
1 Global install eslint: npm i eslint -g
2 Generate configuration file: eslint –init
3 Set according to your own project requirements:

√ How would you like to use ESLint?· problems
√ What type of modules does your project use?· esm
√ Which framework does your project use?· vue
√ Does your project use TypeScript?· No/Yes
√ Where does your code run?· browser
√ What format do you want your config file to be in?· JavaScript
The config that you've selected requires the following dependencies:

eslint-plugin-vue@latest
?Would you like to install them now with npm?» Yes

Method 2:
1 Install eslint in the project: npm install eslint –save-dev
2 Build profile: ./node_modules/.bin/eslint –init
3. After successful initialization, a will be generated a .eslintrc.js file in the project root directory, file content:

module.exports = {
    "env": {
        "browser": true,
        "es2021": true
    },
    "extends": [
        "eslint:recommended",
        "plugin:vue/essential"
    ],
    "parserOptions": {
        "ecmaVersion": 12,
        "sourceType": "module"
    },
    "plugins": [
        "vue"
    ],
    "rules": {
    }
};

Error 2: Syntax Error: TypeError: eslint. CLIEngine is not a constructor

Solution: open package JSON delete and re run the following code (stop the project and re NPM run serve)

after deletion, the eslint syntax verification of the project will become invalid and can run successfully (NPM run serve needs to be re run)

[antdv: DatePicker] `value` provides invalidate moment time. If you want set empty value, use `null`

[antdv: DatePicker] `value` provides invalidate moment time. If you want set empty value,use `null`

Always encounter this problem

Normal use:

html:
 <a-month-picker v-model="monthValue"  :allowClear="false" type="month" placeholder="选择月"></a-month-picker>
data:
monthValue:moment().format('YYYY-MM')

Reason:
ant design vue datepicker needs the format of moment by default, so an error will be reported.

Solution: use following method to define the data:

 monthValue: moment(new Date(), 'YYYY-MM')