Category Archives: Javasript

Vue Use the top-level await Error [How to Solve]

Use the top-level await in Vue to generate an error reporting solution

1. Version information

vue:3.2.16

vite:2.6.4

node:17.1.0

2. Error message

error during build:
Error: Transform failed with 1 error:
assets/index.867f4832.js:187:9: error: Top-level await is not available in the configured target environment ("chrome87", "edge88", "es2019", "firefox78", "safari13.1")

3. Solution

Add the following code in vite.config.js

export default defineConfig({
  plugins: [vue()],
  build:{
    target:['edge90','chrome90','firefox90','safari15']
  }
})

[Solved] Error: loading chunk * failed, Vue router lazy loading error

Recently, Vue project routing has been changed to lazy loading mode. At first, there is no problem. After emptying the project file and downloading the configuration again, the console reports the following errors:

[vue-router] Failed to resolve async component default:
Error:Loading chunk 10 failed.

After refreshing the page, no more errors will be reported. After thinking about it, we should use the route. After lazy loading, the component loading is abnormal, but we don’t know what the reason is. Friends who know can leave a message
solution:
there is an error handling function onerror in Vue router, which is used to handle routing exceptions. Please see the description:

When rendering a route, an error occurs when trying to resolve an asynchronous component
this situation should be consistent with our error situation, because no error will be reported after refreshing the page. Therefore, assuming that the error expectation is true, we can solve the problem by reloading our target page in the onerror method
please see the scheme:

/*Routing exception error handling. An error occurs when trying to parse an asynchronous component. Re render the target page*/

router.onError((error) => {
const pattern = /Loading chunk (\d)+ failed/g;
const isChunkLoadFailed = error.message.match(pattern);
const targetPath = router.history.pending.fullPath;
if (isChunkLoadFailed) {
router.replace(targetPath);
}
});

[Solved] Vue route Duplicate Error: error avoid redundant navigation to current location: “/home”

Add in index.js under router file

import Vue from 'vue';

import VueRouter from 'vue-router';

Vue.use(VueRouter);

// Solve the problem that vue-router in the navigation bar of ElementUI reports an error when repeatedly clicking the menu in version 3.0 or above
const originalPush = VueRouter.prototype.push
VueRouter.prototype.push = function push(location) {
  return originalPush.call(this, location).catch(err => err)
}

perhaps

const originalReplace = VueRouter.prototype.replace;
Router.prototype.replace = function replace(location) {
  return originalReplace.call(this, location).catch(err => err);
};

VUE NPM install Error: Failed at the [email protected] install script… 

npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! [email protected] install: `node install.js`
npm ERR! Exit status 1
npm ERR!
npm ERR! Failed at the [email protected] install script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.

npm ERR! A complete log of this run can be found in:
npm ERR!     C:\Users\Administrator\AppData\Roaming\npm-cache\_logs\2021-11-29T02_05_58_628Z-debug.log

Solution:

npm install [email protected] --ignore-scripts

JS Error: window.crypto.subtle = undefind [How to Solve]

Error reporting when using JS encryption function: window.crypto.subtle = undefind

Then the normal should be like this, with a substle attribute missing

At first, I suspected that there was a problem with JS, but I found that the same was true of my other sites  ， This is a page, and JS loads a JQ. (using Tencent cloud server) I doubt my life. Is there a problem with my server configuration???

It can only be used in HTTPS sites, but not in HTTP sites.

[Solved] Vue3.X version error: Parsing error: Parsing error: Unexpected token

For example, the following error: it has nothing to do with the code

 error  in ./src/App.vue

Module Error (from ./node_modules/eslint-loader/index.js):

D:\workspace\test\element-plus-test\src\App.vue
  1:1  error  Parsing error: Unexpected token <

✖ 1 problem (1 error, 0 warnings)

Solution:

1. Install the eslint plugin Vue plug-in

 npm install eslint-plugin-vue -D

2. Add the following configuration in the. Eslint.js configuration file:

module.exports = {
  root: true,
  parserOptions: {
    "ecmaVersion": 7,
    sourceType: 'module'
  },
  "parser": "vue-eslint-parser",   // Add this line
  rules: {
    "@typescript-eslint/explicit-module-boundary-types":"off"
  }
}

How to Solve Vue Space Line Wrap Error

The main reason for this problem is that you set eslint (normalized code, you can reinitialize and turn off eslint) during initialization. The solution is as follows (recommended method 3, simple):

Method 1:

Find the build folder in the directory with the webpack.base.config.js file on it. Comment out the code and restart it

Because the project I created with Vue cli does not have a build folder, the webpack.base.config.js file cannot be found and cannot be solved by the above method, so ↓

Method 2:  

Open the. Eslintrc.JS file in the root directory and add the following code

chainWebpack: config => {
    config.module
      .rule('vue')
      .use('vue-loader')
      .loader('vue-loader')
      .tap(options => {
        options.compilerOptions.preserveWhitespace = true
        return options
      })
  }

As shown in the figure:

Method 3:

Another method is very simple. Just delete the strict mode configuration (restart the editor after deletion!), as shown in the figure:

core-js & RegExp error All In One [How to Solve]

core-js & RegExp error All In One

Module not found: Error: Can’t resolve ‘core-js/modules/es.regexp.dot-all.js’

error
Use regular constructor

check (objString = '{}') {
    const result = JSON.stringify(obj).replace(new RegExp(/%/, 'g'), '%%');
},

Solution:

Use regular literals instead of regular constructors

check (objString = '{}') {
    const result = JSON.stringify(obj).replace(/%/g, '%%');
},

[Solved] Vue3 vetur error: has no default export component is not exported

Vscode plug-in vetur reports an error: it says that the component is useless to throw,

Two components are written in two ways: options API and script setup

My component writing method is vue3’s syntax sugar script setup

Reason: after data query, vehicle (v0.35.0) does not support ts

Solution:

1) Replace the syntax highlighting plug-in volar that supports ts to replace vetur (this method is recommended)

2) Use options API instead of script setup syntax (not recommended)