Category Archives: JavaScript

[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] VSCode package Error: Command failed: npm list –production –parseable –depth=99999 –loglevel=error

After VSCode package, there is an error report: command failed: NPM list –production –parseable –depth=99999 –loglevel=error appears. missing: vsce@^2.10.0, required by [email protected]

Note: this error pops up when I try to package the vscode plug-in

I found that many situations may lead to this error Command failed: npm list --production --parseable --depth=99999 --loglevel=error. Please pay attention.

reason

After some troubleshooting, I found that the reason I got this error was because I started installing the vsce package in the current location, and then I decided that it was wrong and changed it to a global installation. Then, instead of uninstalling vsce from the current location, I just deleted the node_modules folder. The error occurred because the vsce package command was not executed correctly because it was not uninstalled and then deleted.

 

Solution:

Reinstall the vsce package at the current location, npm install vsce,

Use npm uninstall vsce to uninstall.

Finally, you can choose to delete node_modules folder.

 

[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

 

[Solved] Vue Project Error: error ‘v-model‘ directives require no argument vue/valid-v-model

In Vue projects, you need to reference third-party libraries, such as vant@^2.12.47. When using the dialog popup component, you need to use v-model:show to determine whether to display the popup.

When the project is running, an error will be reported: error ‘v-model’ directives require no argument vue/valid-v-model

Solution: Add:'vue/valid-v-model':'off' in the root directory, .eslintrc.js file.

As shown in the figure:

[Solved] electron Package and Startup Error: Error: ENOENT: no such file or directory, open ‘xxx/manifest.json‘‘

Start the error report after packaging with electron-builder:

Reading /xxx/manifest.json failed.
Error: ENOENT: no such file or directory, open '/xxx/manifest.json'
    at Object.fs.openSync (fs.js:558:18)
    at Object.module.(anonymous function) [as openSync] (ELECTRON_ASAR.js:173:20)
    at Object.fs.readFileSync (fs.js:468:33)
    at Object.fs.readFileSync (ELECTRON_ASAR.js:506:29)
    at getManifestFromPath (/xxx/node_modules/electron/dist/Electron.app/Contents/Resources/electron.asar/browser/chrome-extension.js:34:26)
    at Function.BrowserWindow.addDevToolsExtension (/xxx/node_modules/electron/dist/Electron.app/Contents/Resources/electron.asar/browser/chrome-extension.js:373:22)
    at App.Z.enabled.X.on (/xxx/webpack:/~/electron-debug/index.js:78:1)
    at emitTwo (events.js:111:20)
    at App.emit (events.js:191:7)

Solution:

1. Execute the following command:

npm install vue-devtools --global

2. Modify src/main/index.dev.js as follows:

import {  BrowserWindow } from 'electron'; //Add
/* eslint-disable */

// Install `electron-debug` with `devtron`
// require('electron-debug')({ showDevTools: true })
require('electron-debug')() //Modify

// Install `vue-devtools`
require('electron').app.on('ready', () => {
  let installExtension = require('electron-devtools-installer')
  //Comment out
  // installExtension.default(installExtension.VUEJS_DEVTOOLS)
  //   .then(() => {})
  //   .catch(err => {
  //     console.log('Unable to install `vue-devtools`: \n', err)
  //   })
  //Add
  BrowserWindow.addDevToolsExtension('node_modules/vue-devtools/vender')
})
// Require `main` process to boot app
require('./index')

3. Recompile:

npm run build:win32

4. Repackage:

electron-builder

It can start normally:

[Solved] ant design pro vue Startup Error: ERROR Failed to compile with 1 error 20:34:09 error in ./src/components/Num

Error reporting information

ERROR Failed to compile with 1 error 20:34:09

error in ./src/components/NumberInfo/NumberInfo.vue?vue&type=style&index=0&id=4370c5af&lang=less&scoped=true&

Syntax Error: TypeError: Cannot set properties of undefined (setting ‘parent’)

Delete the NumberInfo folder under the components folder, start the project again, and after starting, Ctrl + z to withdraw the deleted NumberInfo component folder, after which the project will start normally

Solution:

1. Delete, yarn run serve to start project

2. Withdrawal

3. Project started successfully

[Solved] fontconfig cross-compilation Error: PRI_CHAR_WIDTH_STRONG 

make report an error as below:
“fontconfig-2.12.1/src/fcmatch.c:324:63: error: ‘PRI_CHAR_WIDTH_STRONG’ undeclared here (not in a function); did you mean ‘PRI_WIDTH_STRONG’?”

"fontconfig-2.12.1/src/fcmatch.c:324:63: error: ‘PRI_CHAR_WIDTH_STRONG' undeclared here (not in a function); did you mean ‘PRI_WIDTH_STRONG’?"

 

Solution:
Enter the source code directory. My path is
1.
fontconfig-2.12.1/fontconfig/fontconfig.h
Found #define FC_CHAR_WIDTH “charwidth” /* Int / deleted
Add #define FC_CHARWIDTH “charwidth” / Int */
#define FC_CHAR_WIDTH FC_CHARWIDTH
2.
fontconfig-2.12.1/src/fcobjs.h
Find FC_OBJECT (CHAR_WIDTH, FcTypeInteger, NULL) and delete it.
Add FC_OBJECT (CHARWIDTH, FcTypeInteger, NULL)
3.
fontconfig-2.12.1/src/fcobjshash.gperf
Find “CHARWIDTH”, FC_CHAR_WIDTH_OBJECT and delete it.
Add “charwidth”,FC_CHARWIDTH_OBJECT
4.
fontconfig-2.12.1/src/fcobjshash.h
Find {(int)(long)&((struct FcObjectTypeNamePool_t *)0)->FcObjectTypeNamePool_str45,FC_CHAR_WIDTH_OBJECT}, delete
add {(int)(long)&((struct FcObjectTypeNamePool_t *)0)->FcObjectTypeNamePool_str45,FC_CHARWIDTH_OBJECT},
End, make && make install successful
is to modify and replace a few macro definitions, you can happily edit cairo!
Although the high version of fontconfig does not have this error, but the cross-compiler reported that the other failed to solve

 

[Solved] node.js request Error: Error: unable to verify the first certificate

Solution:

Install request-promise

const request = require('request-promise');
var options = {
    method: 'POST',
    uri: 'http://api.posttestserver.com/post',
    "rejectUnauthorized": false, 
    body: {
        some: 'payload'
    },
    json: true // Automatically stringifies the body to JSON
};
 
rp(options)
    .then(function (parsedBody) {
        // POST succeeded...
    })
    .catch(function (err) {
        // POST failed...
    });

The point is to add: “rejectUnauthorized”: false

[Solved] Vue Error: Syntax Error: TypeError: Cannot set properties of undefined (setting ‘XXX’)

Error Messages:

69% building 4279/4311 modules 32 active ...\jeecg-boot-v3.1.0\ant-design-vue-jeecg\node_modules\ant-design-vue\es\vc-tabs\src\TabPane.js[@vue/compiler-sfc] the >>> and /deep/ combinators have been deprecated. Use :deep() instead.

[@vue/compiler-sfc] the >>> and /deep/ combinators have been deprecated. Use :deep() instead.

98% after emitting CopyPlugin

 ERROR  Failed to compile with 1 error                                                                                         下午9:48:08
 error  in ./src/components/NumberInfo/NumberInfo.vue?vue&type=style&index=0&id=4370c5af&lang=less&scoped=true&

Syntax Error: TypeError: Cannot set properties of undefined (setting 'parent')


 @ ./node_modules/vue-style-loader??ref--10-oneOf-1-0!./node_modules/css-loader??ref--10-oneOf-1-1!./node_modules/vue-loader/lib/loaders/stylePostLoader.js!./node_modules/postcss-loader/src??ref--10-oneOf-1-2!./node_modules/less-loader/dist/cjs.js??ref--10-oneOf-1-3!./node_modules/cache-loader/dist/cjs.js??ref--0-0!./node_modules/vue-loader/lib??vue-loader-options!./src/components/NumberInfo/NumberInfo.vue?vue&type=style&index=0&id=4370c5af&lang=less&scoped=true& 4:14-483 15:3-20:5 16:22-491
 @ ./src/components/NumberInfo/NumberInfo.vue?vue&type=style&index=0&id=4370c5af&lang=less&scoped=true&
 @ ./src/components/NumberInfo/NumberInfo.vue
 @ ./src/components/NumberInfo/index.js
 @ ./node_modules/cache-loader/dist/cjs.js??ref--12-0!./node_modules/babel-loader/lib!./node_modules/cache-loader/dist/cjs.js??ref--0-0!./node_modules/vue-loader/lib??vue-loader-options!./src/views/Home.vue?vue&type=script&lang=js&
 @ ./src/views/Home.vue?vue&type=script&lang=js&
 @ ./src/views/Home.vue
 @ ./src/config/router.config.js
 @ ./src/router/index.js
 @ ./src/utils/request.js
 @ ./src/main.js
 @ multi (webpack)-dev-server/client?http://192.168.49.133:3000/sockjs-node (webpack)/hot/dev-server.js ./src/main.js

 

Solution:

Delete yarn.lock, node_modules, and re-execute yarn install, yarn run serve