Tag Archives: front end

vue Error: Uncaught SyntaxError: Invalid shorthand property initializer

When defining an object using JSON format in JavaScript

An error occurred while debugging the browser: uncaught syntax error: invalid shorthand property initializer

<body>
    <div id=app>
        <button @click="handclick">Button</button>
        <p>{{name}}</p>
    </div>
</body>
<script src="./js/vue.js"></script>
<script>
    let app = new Vue({
        el: "#app",
        // The reason is that "=" should be written as ":"
        data: {
            name: "张三"
        },
        methods: {
            handclick() {
                this.name = 'lis'
            }
        },
        watch: {
            name(newVal, oldVal) {
                console.log(newVal, oldVal)
            }
        }
    })
</script>

[Solved] error ‘test‘ is assigned a value but never used no-unused-vars

1. Relevant error reporting information

error  'test' is assigned a value but never used  no-unused-vars

2. Error reporting reason

The eslint loader is used for relevant syntax check. Because the test variable has not been used and does not comply with relevant syntax rules, an error is reported.

3. Turn off related syntax checking
create a new Vue in the root directory of the related project config.JS file

in Vue config.JS file is configured as follows

module.exports = {
    // Turn off syntax checking
    lintOnSave: false
}

after restarting the project, it is found that the relevant error message disappears
See Vue cli configuration parameters for details

[Solved] layui table org.thymeleaf.exceptions.TemplateInputException: An error happened during template…

The error message is as follows

Reason:
because the expression between [[…]] is considered an inline expression in thymeleaf, rendering error occurs

Solution 1:
change [[]] after cols to [[]]

Solution 2:
in <script type=“text/javascript” > Add th: inline = “None”

<script type="text/javascript" th:inline="none">

Error: Node Sass does not yet support your current environment: Linux 64-bit with Unsupported runtim

Error: node sass does not yet support your current environment: Linux 64 bit with unsupported runtime (93)

It is taken for granted that the versions of node and node sass do not match.

It is useless to refer to various upgrades and demotions of the forum. mmp.

There’s really no way to install sass:

npm install sass

My project will automatically use sass. If you are worried or node sass is still working, you can also uninstall node sass:

npm uninstall node-sass

At this point, your project should run normally. Anyway, this is how I run packaging.

Reference articles:
https://zhuanlan.zhihu.com/p/405365755

Using ts-node to Execute .ts files Error [Solved]

When learning typescript, you want to execute the TS file. First install the TS package, then use the TSC command to execute it, compile it into a JS file, and use node xxx.js to execute it. However, this is troublesome. Later, you want to use TS node to directly execute it and simplify the steps. An error is reported:

It is found that the corresponding package needs to be installed to compile:

Solution:
 
npm install -D tslib @types/node

[Solved] Node.js v17 npm run dev Error: opensslErrorStack

Node.js 17 version opensslErrorStack: [ ‘error:03000086:digital envelope routines::initialization error’ ]
Error Messages:

D:\workspace\ideaproject\RuoYi-Cloud\ruoyi-ui>npm run dev

> [email protected] dev
> vue-cli-service serve

 INFO  Starting development server...
10% building 2/5 modules 3 active ...ader\index.js??ref--13-0!D:\workspace\ideaproject\RuoYi-Cloud\ruoyi-ui\src\main.jsError: error:0308010C:digital envelope routines::unsupported
    at new Hash (node:internal/crypto/hash:67:19)
    at Object.createHash (node:crypto:130:10)
    at module.exports (D:\workspace\ideaproject\RuoYi-Cloud\ruoyi-ui\node_modules\webpack\lib\util\createHash.js:135:53)
    at NormalModule._initBuildHash (D:\workspace\ideaproject\RuoYi-Cloud\ruoyi-ui\node_modules\webpack\lib\NormalModule.js:417:16)
    at handleParseError (D:\workspace\ideaproject\RuoYi-Cloud\ruoyi-ui\node_modules\webpack\lib\NormalModule.js:471:10)
    at D:\workspace\ideaproject\RuoYi-Cloud\ruoyi-ui\node_modules\webpack\lib\NormalModule.js:503:5
    at D:\workspace\ideaproject\RuoYi-Cloud\ruoyi-ui\node_modules\webpack\lib\NormalModule.js:358:12
    at D:\workspace\ideaproject\RuoYi-Cloud\ruoyi-ui\node_modules\loader-runner\lib\LoaderRunner.js:373:3
    at iterateNormalLoaders (D:\workspace\ideaproject\RuoYi-Cloud\ruoyi-ui\node_modules\loader-runner\lib\LoaderRunner.js:214:10)
    at iterateNormalLoaders (D:\workspace\ideaproject\RuoYi-Cloud\ruoyi-ui\node_modules\loader-runner\lib\LoaderRunner.js:221:10)
    at D:\workspace\ideaproject\RuoYi-Cloud\ruoyi-ui\node_modules\loader-runner\lib\LoaderRunner.js:236:3
    at runSyncOrAsync (D:\workspace\ideaproject\RuoYi-Cloud\ruoyi-ui\node_modules\loader-runner\lib\LoaderRunner.js:130:11)
    at iterateNormalLoaders (D:\workspace\ideaproject\RuoYi-Cloud\ruoyi-ui\node_modules\loader-runner\lib\LoaderRunner.js:232:2)
    at Array.<anonymous> (D:\workspace\ideaproject\RuoYi-Cloud\ruoyi-ui\node_modules\loader-runner\lib\LoaderRunner.js:205:4)
    at Storage.finished (D:\workspace\ideaproject\RuoYi-Cloud\ruoyi-ui\node_modules\enhanced-resolve\lib\CachedInputFileSystem.js:55:16)
    at D:\workspace\ideaproject\RuoYi-Cloud\ruoyi-ui\node_modules\enhanced-resolve\lib\CachedInputFileSystem.js:91:9
node:internal/crypto/hash:67
  this[kHandle] = new _Hash(algorithm, xofLen);
                  ^

Error: error:0308010C:digital envelope routines::unsupported
    at new Hash (node:internal/crypto/hash:67:19)
    at Object.createHash (node:crypto:130:10)
    at module.exports (D:\workspace\ideaproject\RuoYi-Cloud\ruoyi-ui\node_modules\webpack\lib\util\createHash.js:135:53)
    at NormalModule._initBuildHash (D:\workspace\ideaproject\RuoYi-Cloud\ruoyi-ui\node_modules\webpack\lib\NormalModule.js:417:16)
    at handleParseError (D:\workspace\ideaproject\RuoYi-Cloud\ruoyi-ui\node_modules\webpack\lib\NormalModule.js:471:10)
    at D:\workspace\ideaproject\RuoYi-Cloud\ruoyi-ui\node_modules\webpack\lib\NormalModule.js:503:5
    at D:\workspace\ideaproject\RuoYi-Cloud\ruoyi-ui\node_modules\webpack\lib\NormalModule.js:358:12
    at D:\workspace\ideaproject\RuoYi-Cloud\ruoyi-ui\node_modules\loader-runner\lib\LoaderRunner.js:373:3
    at iterateNormalLoaders (D:\workspace\ideaproject\RuoYi-Cloud\ruoyi-ui\node_modules\loader-runner\lib\LoaderRunner.js:214:10)
    at Array.<anonymous> (D:\workspace\ideaproject\RuoYi-Cloud\ruoyi-ui\node_modules\loader-runner\lib\LoaderRunner.js:205:4)
    at Storage.finished (D:\workspace\ideaproject\RuoYi-Cloud\ruoyi-ui\node_modules\enhanced-resolve\lib\CachedInputFileSystem.js:55:16)
    at D:\workspace\ideaproject\RuoYi-Cloud\ruoyi-ui\node_modules\enhanced-resolve\lib\CachedInputFileSystem.js:91:9
    at D:\workspace\ideaproject\RuoYi-Cloud\ruoyi-ui\node_modules\graceful-fs\graceful-fs.js:123:16
    at FSReqCallback.readFileAfterClose [as oncomplete] (node:internal/fs/read_file_context:68:3) {
  opensslErrorStack: [ 'error:03000086:digital envelope routines::initialization error' ],
  library: 'digital envelope routines',
  reason: 'unsupported',
  code: 'ERR_OSSL_EVP_UNSUPPORTED'
}

Node.js v17.1.0

Solution:

The reason for the problem is that OpenSSL has been updated in node.js V17
the solutions are:

1. Solve temporarily and set environment variables

#windows
set NODE_OPTIONS=--openssl-legacy-provider
#linux
export NODE_OPTIONS=--openssl-legacy-provider

2. Lower the version of node.js instead of V17

[Solved] nodejs express Error: MulterError: Unexpected field

Problems encountered when using express to write and upload files

The front-end Axios and the back-end express use the multer middleware. They always report the error of the server 500 when uploading. They repeatedly check the code and check the multer documents, and finally find the problem.

No more nonsense, just go to the code:

Back end:

router.post('/upload',upload.single('img'),function(req,res,next){
    console.log(req.file);
})

front end:

formdata.append('img',imgfile);

here, the name in upload.Single() should be consistent with the field name in the front end formdata

Vue init webpack Error: unable to verify the first certificate

When initializing the webpack project with Vue cli, use the following commands:

$ vue init webpack [project-name]

After setting up the agent of NPM and modifying the domestic image warehouse, an error is still reported. The error information is as follows:

$ vue-cli · Failed to download repo vuejs-templates/webpack: unable to verify the first certificate

According to the information, the reason for this problem is that we use the proxy server, so Vue cli cannot verify the proxy server certificate when downloading the webpack template, so this error is reported
to solve this error, one way is to turn off the verification of SSL certificates. However, this method is not valid for everyone, and the following method is only used when your proxy server is trusted:

$ npm config set npm_config_strict_ssl=false

If this method doesn’t work, another way is to use the offline method to initialize the Vue project.

Clone the webpack template project to the local C:\users [username]. Vue Templates folder. If there is no such folder, create one. The folder starting with. Cannot be created in windows. You can use CMD or PowerShell to switch to the C:\users [username]\directory and enter the following command to create the folder:

$ mkdir .vue-templates

The download address of the webpack template is: vuejs templates. Select the required template to clone. I select the complete webpack template here. You can clone the project to the folder we created in the previous step through the following command (provided that git Bash is installed):

$ git clone https://github.com/vuejs-templates/webpack ~/.vue-templates/webpack
    1. If Git is not installed, you can also directly download the project in the form of zip on the GitHub and extract it into. Vue templates. Generally speaking, if the clone speed of Git is too slow, you can also directly download and extract the zip in step 3 in addition to setting the agent… Rerun the command of Vue to initialize the project. Note that the offline mode is
$ vue init webpack [project-name] --offline
$ cd [prject-name]
$ npm run dev

How to Solve MAC electronic installation dependent startup error

file: https://github.com/electron/electron/issues/8466

Error message:

Solution:

Switch to node_ The index file used for the electron pair in modules, then enter the terminal and execute it in the current directory with node install.js before completing the electron dependent installation

Then go to the project again and start the project

Vscode uses /deep/ Syntax error [How to Solve]

Use/deep/to report syntax errors in vscode and report them in red

When pulling other people’s items, you will encounter/deep/reporting syntax errors in vscode, but the items can run and we can’t modify them. The problem can be solved by modifying the configuration file of vscode

CSS> Lint: empty rules

then there is no red wavy line and no error is reported