Tag Archives: javascript

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

How to Solve Vue add element Install Error

Install element normally

Just enter

vue add element

However, the following errors may occur:

If the error report shows that it is a node-sass problem, change the second option to no, that is, do not introduce the SCSS of element

Perfect solution

But remember to add the following code to the main file later:

import ‘element-ui/lib/theme-chalk/display.css’

It is to directly introduce the CSS of the element

How to Solve Vue project Startup Error (Node Upgrade issue)

introduction:

Recently, after upgrading the nodejs version to v18.7.0, the project report digital envelope routes::unsupported was launched. After many searches, the solution was finally found.

reason:

node.js version problem

Because of the recent release of OpenSSL 3.0 in node.js V17, OpenSSL 3.0 adds strict restrictions on allowed algorithms and key sizes, which may have some impact on the ecosystem. Therefore, previous projects will report an error after upgrading the nodejs version

Solution:

Method 1:

export NODE_OPTIONS=--openssl-legacy-provider

Method 2:
Modify package.json, add set NODE_OPTIONS=–openssl-legacy-provider before the relevant build command

"scripts": {
   "serve": "SET NODE_OPTIONS=--openssl-legacy-provider && vue-cli-service serve",
   "build": "SET NODE_OPTIONS=--openssl-legacy-provider && vue-cli-service build"
},

HTML + PHP inline execute JavaScript Error [How to Solve]

Error message

read.php:1 Refused to run the JavaScript URL because it violates the following Content Security Policy directive: “script-src ‘self’”. Either the ‘unsafe-inline’ keyword, a hash (‘sha256-…’), or a nonce (‘nonce-…’) is required to enable inline execution. Note that hashes do not apply to event handlers, style attributes and javascript: navigations unless the ‘unsafe-hashes’ keyword is present.

 

Solution:

Add unsafe-inline in the header

header("Content-Security-Policy: script-src 'self' 'unsafe-inline';);

[Solved] Vue Error: Error in v-on handler (Promise/async): “[object object]“

[Solved] Vue Error: Error in v-on handler (Promise/async): “[object object]“

Solution:

Use try_ catch package async… await function

  /**
   * export
   */
  async download () { // export
    try {
      const { parkName } = this.formInline
      const res:any = await exportInvoice({ parkName })
      this.downSteam(res)
    } catch (_) {}
  }

[Solved] Uncaught DOMException: Failed to execute ‘readAsDataURL‘ on ‘FileReader‘: The object is already busy

Uncaught DOMException: Failed to execute ‘readAsDataURL’ on ‘FileReader’: The object is already busy reading Blobs.

Error reason: a FileReader is reused

Solution: Create a FileReader each time

function read_files(){
    document.querySelector(openfiles[data_jigsaw_puzzle]).click();
    $(openfiles[data_jigsaw_puzzle]).change(function(){
        var reader_index = 0;
        var len = this.files.length;
        while(reader_index < len){
            var reader=new FileReader();
            reader.readAsDataURL(this.files[reader_index]);  
            reader.onload=function(){
                answers.push(this.result);
            }                                    
            reader_index++;
        } 
    })
}
read_files();

[vite] Failed to parse source for import analysis because the content contains invalid JS syntax.

 

While developing a Vue.js 3.0 project using the vite tool, a configuration issue caused the project to run with the following error message:

16:17:27 [vite] page reload main.js
Failed to parse source for import analysis because the content contains invalid JS syntax. Install @vitejs/plugin-vue to handle .vue files.
16:17:28 [vite] Internal server error: Failed to parse source for import analysis because the content contains invalid JS syntax. Install @vitejs/plugin-vue to handle .vue files.
  Plugin: vite:import-analysis
  File: /home/projects/vitejs-vite-der4uu/App.vue

We need to install the plug-in @@vitejs/plugin-vue that uses error prompts.

The solution steps are as follows:

1. Install dependent plug-ins first

npm install @vitejs/plugin-vue -D

2. Then configure the vite project configuration file: vite.config.js

// vite.config.js
import { defineConfig } from 'vite';
import vue from '@vitejs/plugin-vue';

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [vue()],
});

In this way, we have configured the vite project to recognize the ability to parse single-file components with a .vue suffix.

3. Rerun

npm run dev

This is the problem. It is solved perfectly.

[Solved] Module build failed TypeError this.getOptions is not a function at Object.loader

How to Solve error: Module build failed TypeError this.getOptions is not a function at Object.loader

Solution: Reduce the current style-loader version

npm install -save -dev [email protected]
npm install -save -dev [email protected]
npm install --save-dev [email protected] less

[Solved] Failed to execute ‘getRangeAt‘ on ‘Selection‘: 0 is not a valid index.“

Failed to execute ‘getRangeAt‘ on ‘Selection‘: 0 is not a valid index.“

const sel = window.getSelection()
range = sel.getRangeAt(0)

The following error message appears when getting the object in the text area selected by the mouse

Solution:

const sel = window.getSelection()
for (let i = 0; i < sel.rangCount; i++) {
    range[i] = sel.getRangeAt(i)
}

[Solved] vueCli 4.x Upgrade to 5.x Error: Progress Plugin Invalid Options

Running the compile command after upgrading vueCli 4.x to 5.x may result in the following error:

ERROR  ValidationError: Progress Plugin Invalid Options
 
        options should NOT have additional properties
        options should NOT have additional properties
        options should NOT have additional properties
        options should pass "instanceof" keyword validation
        options should match exactly one schema in oneOf

This may be caused by the inconsistency between the locally installed version of webpack and the version of vue-cli.

Solution:

1. Check if the webpack version in node_modules is also upgraded to version 5.x. If not, upgrade to version 5.x.

2. Check if the devServer in vue.config.js has overlay configuration, this configuration will be incompatible in vue-cli 5.x version, you have to remove it, otherwise it will also report an error when running

3. delete the wrong node_modules and package-lock.json

4. Clear npm cache: npm cache clean –force

5. reinstall the dependencies: npm install