Tag Archives: front end

[Solved] Vue Project Error: Arrow function should not return assignment

Vue item error arrow function should not return assignment

Problem source

Recently, there was an error arrow function should not return assignment

when creating a startup Vue project. In fact, there is more than one error, but the final reason is that the eslint check code is referenced.

Solution:

1. Modify the code to comply with the rules of eslint (this method does not take effect here)
add {} to the code after the arrow; however, it reports this error again (I don’t know how to solve this error up to now)

2. Remove eslint
and comment ‘standard’
in the. Eslintrc.js file under the project root directory

[Solved] JS Error: Uncaught TypeError: Cannot set properties of null (setting ‘innerHTML‘)

Many students have encountered this problem when writing JS code:

Cannot set properties of null (setting ‘innerHTML’). This error means that the null property “innerHTML” cannot be read, which means that the place where you want to insert the written HTML code cannot be found.

Solution: put the script of the read part of the DOM behind the body. Or add window.onload in the script tag and execute this part of the code after the page is loaded.

Reason: when the browser loads the HTML document, it will parse the HTML document into a tree structure called DOM tree. The code is executed from top to bottom. When the innerHTML line of code is executed, it does not load into the following DOM structure, and an error will be reported that the HTML cannot be read.

Example:

<!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>
        function showTime() {
            var today = new Date;
            var year = today.getFullYear();
            var month = checkNum(today.getMonth() + 1);
            var data = checkNum(today.getDate());
            var hour = today.getHours();
            var minute = checkNum(today.getMinutes());
            var second = checkNum(today.getSeconds());
            var day = today.getDay();
            var a = ['Sunday', 'Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday'];
            var tip = 'PM'
            if (hour > 12) {
                hour -= 12;
                tip = 'AM'
            }
            var time = year + 'Year' + month + 'Month' + data + 'date' + ' ' + tip + ' ' + hour + ':' + minute + ':' +
                second + ' ' + a[day];
            document.getElementById('time').innerHTML = time;
        }

        function checkNum(num) {
            if (num < 10) {
                return '0' + num;
            }
            return num;
        }
        setInterval(showTime, 1000);
    </script>
</head>

<body>
    <div id="time"> </div> 
</body>
</html>

Solution: will setInterval(showTime, 1000); Put this line of code after the body:

<body>
    <div id="time"> </div>
</body>
<script>
    setInterval(showTime, 1000);
</script>
</html>

Or add window.onload to the original script tag

        window.onload = function () {
            setInterval(showTime, 1000);
        }
    </script>

This can be solved perfectly!

The Vue project is packaged and deployed to tomcat, and an Error 404 is reported as soon as it is refreshed

The reason is that the history mode is used   HTML5 history mode | Vue router

I didn’t find a solution

So we changed the routing to hash mode

I use cli3

It was

import {createRouter, createWebHistory} from 'vue-router'

const router = createRouter({
    history: createWebHistory(process.env.BASE_URL),
    routes
})

Change to

import {createRouter, createWebHashHistory} from 'vue-router'

const router = createRouter({
  model:'hash',
  history: createWebHashHistory(),
  routes
})

It’s normal after modification

Front end project construction error unexpected character ‘@’ solution

After I imported the CSS file of bootstrap, the following error messages appeared in the construction project:

ERROR in ./src/util/bootstrap/bootstrap.min.css
Module parse failed: D:\eclipseWorkspace\mbos\mbos-portal\webContent\src\util\bootstrap\bootstrap.min.css Unexpected character '@' (1:0)
You may need an appropriate loader to handle this file type.
SyntaxError: Unexpected character '@' (1:0)
    at Parser.pp$4.raise (D:\eclipseWorkspace\mbos\mbos-portal\webContent\node_modules\webpack\node_modules\acorn\dist\acorn.js:2221:15)
    at Parser.pp$7.getTokenFromCode (D:\eclipseWorkspace\mbos\mbos-portal\webContent\node_modules\webpack\node_modules\acorn\dist\acorn.js:2756:10)
    at Parser.pp$7.readToken (D:\eclipseWorkspace\mbos\mbos-portal\webContent\node_modules\webpack\node_modules\acorn\dist\acorn.js:2477:17)
    at Parser.pp$7.nextToken (D:\eclipseWorkspace\mbos\mbos-portal\webContent\node_modules\webpack\node_modules\acorn\dist\acorn.js:2468:15)

The reason is that the CSS file contains the @ symbol, and the configuration file does not specify a loader for the CSS file,

Solution: specify loader for CSS file:


{ 
	test: /\.css$/,
	loader: 'style-loader!css-loader' 
},

(a)’21442;’32771;65306;
styles.css Unexpected character’

How to Solve Node GYP Rebuild Error

Node gyp rebuild error handling

Error message:

node-gyp rebuild

  CXX(target) Release/obj.target/contextify/src/contextify.o
../src/contextify.cc:50:53: error: too few arguments to function call, single argument 'context' was not specified
        target->Set(className, ljsTmpl->GetFunction());
                               ~~~~~~~~~~~~~~~~~~~~ ^
/Users/xxx/Library/Caches/node-gyp/14.15.4/include/node/v8.h:6482:46: note: 'GetFunction' declared here
  V8_WARN_UNUSED_RESULT MaybeLocal<Function> GetFunction(
                                             ^
../src/contextify.cc:60:74: error: too few arguments to function call, single argument 'context' was not specified
        ContextifyContext* ctx = new ContextifyContext(info[0]->ToObject());
                                                       ~~~~~~~~~~~~~~~~~ ^
/Users/xxx/Library/Caches/node-gyp/14.15.4/include/node/v8.h:2822:44: note: 'ToObject' declared here
  V8_WARN_UNUSED_RESULT MaybeLocal<Object> ToObject(
                                           ^
../src/contextify.cc:75:48: error: too few arguments to function call, single argument 'context' was not specified
        Local<String> code = info[0]->ToString();
                             ~~~~~~~~~~~~~~~~~ ^
/Users/xxx/Library/Caches/node-gyp/14.15.4/include/node/v8.h:2810:44: note: 'ToString' declared here
  V8_WARN_UNUSED_RESULT MaybeLocal<String> ToString(
                                           ^
../src/contextify.cc:81:51: error: too few arguments to function call, single argument 'context' was not specified
            ScriptOrigin origin(info[1]->ToString());
                                ~~~~~~~~~~~~~~~~~ ^
/Users/xxx/Library/Caches/node-gyp/14.15.4/include/node/v8.h:2810:44: note: 'ToString' declared here
  V8_WARN_UNUSED_RESULT MaybeLocal<String> ToString(
                                           ^
../src/contextify.cc:124:45: error: too few arguments to function call, single argument 'context' was not specified
        constructor.Reset(tmpl->GetFunction());

Solution: switch the node version to node 8.17.0 to solve the above error reports

Mac install to multi version node

1. Download and install
NPM install -g n
2. Download the specified version (followed by the version number)
sudo n 14.15.0
3. Display which versions have been installed
n LS
4. Switch the version used (followed by the version number)
sudo n
view the installed version and switch the version used up and down

[Solved] Cannot read property ‘setCheckedKeys‘ of undefined“

Elementui reports an error. Cannot read property ‘setcheckedkeys’ of undefined“

Click the tree node and execute the following code. An error will be reported because the DOM element is not loaded

  handleRowClick(row) {
    this.$refs.tree.setCheckedKeys(ids);
  },

Correct writing:

  handleRowClick(row) {
    this.$nextTick(() => {
      this.$refs.tree.setCheckedKeys(ids);
    })
  },

Create xxx.vue file with vscode, add comments and report error

Create xxx.vue file with vscode, add comments and report error

Create a. Vue file

When we use vscode to create. Vue files, we need to install relevant plug-ins that support Vue, such as vetur

    after installing the plug-in,
    there will be an error in adding comments. This should be due to some conflict in the installed plug-in. To solve the error in adding comments, you can add a div tag to the template tag, that is

Error: no mail configuration found…

An error was reported when running the code today…

error: no postcss config found...
probably means that this configuration is not found in my file
solution: add a file named postcss. Config. JS in the root directory, and add the code in the file:

module.exports = { 
}

Then use the NPM run serve instruction to run the project successfully.

Error “NPM err” when starting Vue project! code ELIFECYCLE”

Since NPM and cnpm have been used together before, there is no problem. Today, when starting the Vue project, I encountered an error “NPM”   ERR!   code   “Elifecycle” was initially used with NPM   Run started and later changed to cnpm   Neither can run.

  After checking the information, it is mostly said on the Internet that it is because of node_ There is a problem with the installation of modules. The basic solution is to clear the cache and reinstall.

The following steps are summarized:

1、npm   cache   clean  — force

2、rm  – rf   node_ modules

3、rm  – rf   Package-lock.json (optional)

4、npm   install

 

 

Duplicate keys detected: ‘***‘. This may cause an update error

Encountered while developing Vue project    Duplicate keys detected: ’13’. This may cause an update error. This error will not affect the page display, but will always be printed on the console. As shown in the figure  

 

Error reason: the key value set during V-for loop is not unique. As shown in the figure  

Solution

The key that sets the V-for loop is unique. As shown in the figure  

 

 

   

 

Error code 1 error resolution (NPX create react app my app execution reports an error)

npm ERR! code 1
npm ERR! path /Volumes/D/HTML/vscodework/react/my-app/node_modules/canvas
npm ERR! command failed
npm ERR! command sh -c node-gyp rebuild
npm ERR! Package pangocairo was not found in the pkg-config search path.
npm ERR! Perhaps you should add the directory containing `pangocairo.pc'
npm ERR! to the PKG_CONFIG_PATH environment variable
npm ERR! No package 'pangocairo' found
npm ERR! gyp: Call to 'pkg-config pangocairo --libs' returned exit status 1 while in binding.gyp. while trying to load binding.gyp
npm ERR! gyp ERR! configure error 
npm ERR! gyp ERR! stack Error: `gyp` failed with exit code: 1
npm ERR! gyp ERR! stack     at ChildProcess.onCpExit (/Volumes/D/HTML/vscodework/react/my-app/node_modules/node-gyp/lib/configure.js:351:16)
npm ERR! gyp ERR! stack     at ChildProcess.emit (events.js:400:28)
npm ERR! gyp ERR! stack     at Process.ChildProcess._handle.onexit (internal/child_process.js:277:12)
npm ERR! gyp ERR! System Darwin 20.6.0
npm ERR! gyp ERR! command "/usr/local/bin/node" "/Volumes/D/HTML/vscodework/react/my-app/node_modules/.bin/node-gyp" "rebuild"
npm ERR! gyp ERR! cwd /Volumes/D/HTML/vscodework/react/my-app/node_modules/canvas
npm ERR! gyp ERR! node -v v14.17.5
npm ERR! gyp ERR! node-gyp -v v7.1.2
npm ERR! gyp ERR! not ok

npm ERR! A complete log of this run can be found in:

Problem solving: install dependent Libraries

brew install pkg-config cairo pango

Check the functions of these databases:

PKG config: used to return installation library information

Cairo: a free drawing library

Pango: a free function library

I don’t know what to do after checking. It’s good anyway!