Category Archives: JavaScript

[Solved] Nuxt Import qrcodejs2.js / QRCode.js Error: document is not defined

preface

qrcodejs2.js/QRCode.js plug-in is in normal Vue.js project works normally. When you are in nuxt.js when used in the project, there will be an error, because qrcodejs2.js/qrcode.js the plug-in internally uses “browser specific (such as window/document) objects”. When compiled into nuxt.js without these, an error will be generated.

This article will provide you with the way to introduce the plug-in from 0-1, which runs perfectly.

Qrcodejs2.js and QRcode JS can be used.

First step

Download the adapter nuxt.js plug-in core code online.

Step 2

Prepare the file you just downloaded.

Put the QRcode.min.js file into the JS folder under the static static directory of the project (create one if you don’t have one).

Step 3

This step requires you to read the notes carefully, and you must understand why the path is written in this way.

Open the project nuxt.config.js configuration file, add the following code to the head configuration item:

// For now, we are using the local IP address http://192.168.3.5:8001 because we are in a development environment.
// Please replace it when you deploy your project later.
// --------- ---------- ---------- ---------- ---------
// For example, my future website deployment will be: http://www.demo.com
// Then this is how it should be written: http://www.demo.com/js/qrcode.min.js
// [domain + /js/qrcode.min.js]

src: 'http://192.168.3.5:8001/js/qrcode.min.js'

As shown in the following figure, pay attention to the position:

Step 4

At this point, your project can use the plug-in.

Cancel your import Import Code:

Test use

Or the original way of use:

// QRCode The keyword is a wrapped instance of the plugin, you can't change it!
let qrcode = new QRCode(qrcodeImgEl, {
    width: 100,
    height: 100,
    colorDark: '#000000',
    colorLight: '#ffffff',
    correctLevel: QRCode.CorrectLevel.H
})

[Solved] vue watch Error: Error in callback for watcher “xxx“: “TypeError: Cannot read properties of undefined …

 

1. Question

1. Listening to an object in data, an error is reported. The error is strange: you cannot use the apply method on undefined

1) detailed errors are as follows:

vue.esm.js?9b69:5059 [Vue warn]: Error in callback for watcher "flowCategory": "TypeError: Cannot read properties of undefined (reading 'apply')"

found in

---> <FlowItem> at src/projects/comen/implemenceWorkstation/flowSetting/FlowItem.vue
       <ElTabPane> at packages/tabs/src/tab-pane.vue
         <ElTabs> at packages/tabs/src/tabs.vue
           <View> at src/views/implemenceWorkstation/flowSetting/view.vue
             <Index> at src/layout/index.vue
               <App> at src/App.vue
                 <Root>
warn$2 @ vue.esm.js?9b69:5059
logError @ vue.esm.js?9b69:3728
globalHandleError @ vue.esm.js?9b69:3724
handleError @ vue.esm.js?9b69:3691
invokeWithErrorHandling @ vue.esm.js?9b6

2) the code is as follows:

  watch: {
    flowCategory: {
      hanlder(newval, oldval) {
        console.log('flowCategory', newval, oldval);
      },
      deep: true
    }
  }

2. Solution:

After searching for a long time, I found that I had written the word “handler” incorrectly. I typed it incorrectly and wrote it as “hanlder”, and the IDE did not prompt  &***&;

Change it to the following. That’s all

  watch: {
    flowCategory: {
      handler(newval, oldval) {
        console.log('flowCategory', newval, oldval);
      },
      deep: true
    }
  }

3. Now we finally understand the error reporting: it is to tell us that the handler has a problem. The watch does not know what to do when monitoring changes.

[Solved] This dependency was not found: * core-js/modules/es.error.cause.js in ./node_modules/_@babel_runtim

Error Message:

This dependency was not found: * core-js/modules/es.error.cause.js in ./node_modules/_@babel_runtim

This dependency was not found:
core-js/modules/es.error.cause.js in ./node_modules/_@[email protected]@@babel/runtime/helpers/createForOfIteratorHelper.js, ./src/directive/permission/hasPermi.js and 5 others
To install it, you can run: npm install --save core-js/modules/es.error.cause.js

 

Solution:
1.vue project: npm install core-js –save
2.npm install
3.npm run dev
or
1.vue project: cnpm install core-js –save
2.cnpm install
3.cnpm run dev
Perfect solution!!!

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!

show dbs Error: [js] uncaught exception: Error: listDatabases failed

When mongo is built with replica set cluster.
If you log into one of the SECONDARY nodes and execute the command show dbs, you will get an error:

2022-08-16T15:20:00.606+0800 E  QUERY    [js] uncaught exception: Error: listDatabases failed:{
    "operationTime" : Timestamp(1660634399, 2),
    "ok" : 0,
    "errmsg" : "not master and slaveOk=false",
    "code" : 13435,
    "codeName" : "NotMasterNoSlaveOk",
    "$clusterTime" : {
        "clusterTime" : Timestamp(1660634399, 2),
        "signature" : {
            "hash" : BinData(0,"NPF356c5NKl0PqHLlmiQ9vey9e4="),
            "keyId" : NumberLong("7101680539345616897")
        }
    }
} :
_getErrorWithCode@src/mongo/shell/utils.js:25:13
Mongo.prototype.getDBs/<@src/mongo/shell/mongo.js:147:19
Mongo.prototype.getDBs@src/mongo/shell/mongo.js:99:12
shellHelper.show@src/mongo/shell/utils.js:906:13
shellHelper@src/mongo/shell/utils.js:790:15
@(shellhelp2):1:1

 

This is because the SECONDARY node does not have the permission to execute the show dbs command.
In this case, there are two solutions
1. Login to the PRIMARY node
2. Use the cluster connection method
mongo –host  testmongo/ip:port,ip:port,ip:port -uusername -p’passwd’ –authenticationDatabase admin

request.js?b775:101 Uncaught (in promise) Error: Failed to convert value of type ‘java.lang.String’ to required type ‘java.lang.Long’;

request.js?b775:101 Uncaught (in promise) Error: Failed to convert value of type ‘java.lang.String’ to required type ‘java.lang.Long’; nested exception is java.lang.NumberFormatException: For input string : “undefined” at _default (request.js?b775:101:1)

Database and entity class type comparison

 

 Entity class id to write @JsonFormat(shape = JsonFormat.Shape.STRING)

 

 time to write this

 

 Vue’s time display format:

 

[Solved] Vue Error: Parsing error:No Babel config file detected for xxx

In the Vue project, the following error is reported at the beginning of each file.
Prompt: Parsing error: No Babel config file detected for xxx. Either disable config file checking with requireConfigFile: false, or configure Babel so that it can find the config files.eslint
Solution:
Add “requireConfigFile”: false in “parserOptions” of the package.json file as below:

npm run dev Error: opensslErrorStack: [ ‘error:03000086:digital envelope routines::initialization error‘ ]

npm run dev Error: opensslErrorStack: [ ‘error:03000086:digital envelope routines::initialization error‘ ]

report errors:

Solution:

Method 1: Replace the scripts part in package.json:

 "scripts": {
    "dev": "SET NODE_OPTIONS=--openssl-legacy-provider && vue-cli-service serve",
    "serve": "SET NODE_OPTIONS=--openssl-legacy-provider && vue-cli-service serve",
    "lint": "eslint --ext .js,.vue src",
    "build:prod": "SET NODE_OPTIONS=--openssl-legacy-provider && vue-cli-service build",
    "build:stage": "vue-cli-service build --mode staging",
    "preview": "node build/index.js --preview",
    "new": "plop",
    "svgo": "svgo -f src/icons/svg --config=src/icons/svgo.yml",
    "test:unit": "jest --clearCache && vue-cli-service test:unit",
    "test:ci": "npm run lint && npm run test:unit"
  }

Method 2: reduce the node version

[Solved] “npm WARN logfile could not be created: Error: EPERM: operation not permitted,…”

Error: “npm WARN logfile could not be created: Error: EPERM: operation not permitted,…”

npm WARN logfile could not be created: Error: EPERM: operation not permitted, open 'D:\nodejs\node_cache\_logs\2022-08-09T03_07_24_221Z-debug-0.log'
npm WARN logfile could not be created: Error: EPERM: operation not permitted, open 'D:\nodejs\node_cache\_logs\2022-08-09T03_07_24_798Z-debug-0.log'
npm ERR! code EPERM
npm ERR! syscall open
npm ERR! path D:\nodejs\node_cache\_cacache\tmp\299683ad
npm ERR! errno -4048
npm ERR! Error: EPERM: operation not permitted, open 'D:\nodejs\node_cache\_cacache\tmp\299683ad'
npm ERR!  [Error: EPERM: operation not permitted, open 'D:\nodejs\node_cache\_cacache\tmp\299683ad'] {
npm ERR!   errno: -4048,
npm ERR!   code: 'EPERM',
npm ERR!   syscall: 'open',
npm ERR!   path: 'D:\\nodejs\\node_cache\\_cacache\\tmp\\299683ad'
npm ERR! }
npm ERR!
npm ERR! The operation was rejected by your operating system.
npm ERR! It's possible that the file was already in use (by a text editor or antivirus),
npm ERR! or that you lack permissions to access it.
npm ERR!
npm ERR! If you believe this might be a permissions issue, please double-check the
npm ERR! permissions of the file and its containing directories, or try running
npm ERR! the command again as root/Administrator.

npm ERR! Log files were not written due to an error writing to the directory: D:\nodejs\node_cache\_logs
npm ERR! You can rerun the command with `--loglevel=verbose` to see the logs in your terminal

Solution:

  1. window + r –> cmd –> where node –> find the path where nodejs is located
  2. nodejs file –> right click –> properties

3. Security -> Select Users -> Edit -> Check Full Control -> Click Confirm

    why is this problem reported? Because I don’t have permission

[Solved] ESlint Create New File Error: Component name “Home” should always be multi-word.

Find the rules in the configuration of your ESlint and add such a configuration, set the value off, and you will not get the error message.

"vue/multi-word-component-names":0

Find the vue.config.js file in your project, add the following codes:

lintOnSave: false

After saving and recompiling, the problem is solved