Tag Archives: View.js

[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!

[Solved] WebPack Error: Watchpack Error (watcher): Error: ENOSPC: System limit for number of file watchers reache

The following error occurs when the Vue project runs the NPM run serve command in the deepin20 system environment: (webpack error: watchpack error (watcher): error: enospc: system limit for number of file watchers reach)

Cause analysis: the limitation of Linux system causes this error!

Solution:

The problem can be solved by executing the following commands on the terminal:

echo fs.inotify.max_user_watches=524288 | sudo tee -a /etc/sysctl.conf && sudo sysctl -p
sudo sysctl --system

[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

[Solved] Vue create Create Project Error: command failed: npm install –loglevel error

Install vue scaffolding a command an error, tossed a day, and finally found a solution.
1. Find the .npmrc file in the file directory C:\Users and delete it (you can open the .npmrc file to see, the contents of which are set by yourself can be safely deleted)
2. Execute the project name created by vue create, the following figure appears is created successfully

[Solved] Vue Project Error: “TypeError: Cannot read properties of undefined (reading ‘init‘)“

 

Background

After introducing the ecarts plug-in into the Vue project, the following errors are found:

[Vue warn]: Error in mounted hook: “TypeError: Cannot read properties of undefined (reading ‘init’)”

The way to import components is: Import on demand

// import echarts
import echarts from 'echarts';
export default {
    name:"",
    mounted() {
        // Initialize echarts instance
        let lineCharts = echarts.init(this.$refs.charts);//On-demand introduction
}

Solution:

Change the introduction method

import * as echarts from 'echarts';

[Solved] arco design vite-plugin-style-import Load menu-item error: Internal server error…

According to Arco design tutorial on the official website

Load components on demand by manual import

Solution:

Change the official website example to the following. The exclude array is the component name without CSS. If you are not clear about the component name, you can print console.log of the resolveStyle function:

createStyleImportPlugin({
      libs: [
        {
          libraryName: '@arco-design/web-vue',
          esModule: true,
          resolveStyle: (name) => {
            const exclude = ['menu-item']
            if (exclude.includes(name)) return ''
            // css
            return `@arco-design/web-vue/es/${name}/style/css.js`
          },
        },
      ],
    }),

Error message

 [vite] Internal server error: Failed to resolve import "D:/Programing/WebstormProjects/cow-Low-code/node_modules/@arco-design/web-vue/es/menu-item/style/css.js" from "src\views\HomeView.vue". Does the file exist?