Tag Archives: View.js

[Solved] Vue Compile Error: JavaScript heap out of memory

Vue element UI project

The default size limit of V8 engine for memory use is 1.4g. You can set the limit through the node.js command to solve this problem. Modify the contents in the package.json file as follows.

"serve": "npx --max_old_space_size=4096 vue-cli-service serve",
"build": "npx --max_old_space_size=4096 vue-cli-service build --modern"

General Vue items

Vue didn’t put  package.json   inside  scripts  The node command of the script command of the field is hidden. We directly write the option parameters provided in V8 above to scripts  Field  node  After the command, it’s OK. An example is as follows

"build": "node --max_old_space_size=4096 build/build.js"

VUE Error: Mixed spaces and tabs [How to Solve]

Error reporting reason:

Mixed spaces and tabs.

Eslint is used in the development process to standardize the code style. Eslint loader is used in webpack configuration. Eslint is a syntax checking tool. The disadvantage is that it is too strict with the written code. Most code conventions require the use of spaces or tabs for indentation. Therefore, if a line of code is mixed with tab indentation and space indentation at the same time, it is usually wrong. You need to delete the spaces where the error is reported before compiling.

Solution:

Add rules under eslintconfig in package.json

"rules": {
		"no-console": "off",
		"no-debugger": "off",
		"no-mixed-spaces-and-tabs": "off"
	}

How to Solve Vue loading 3D model Error 

Loading the 3D model in vue today keeps reporting errors

There is no error in the code, but the path of the model is wrong, resulting in an error when loading the model (the model was originally placed under the assets path and imported through the relative path). After checking the data, it is found that the model file cannot be placed under the assets path, but under the public path, and the file under the public must be imported through the absolute path (this depends on the configuration of publicpath in vue.config.js. The default is /)

Specific code and steps for loading 3D model in Vue:

1. NPM install three — save package for installing three.js

2. Introduce three related packages

import * as THREE from 'three';
import {OrbitControls} from 'three/examples/jsm/controls/OrbitControls';
import {MTLLoader} from 'three/examples/jsm/loaders/MTLLoader';
import {OBJLoader} from 'three/examples/jsm/loaders/OBJLoader';

3. The model should be placed in the public folder. The resources placed in the public directory will be copied directly and will not be packaged by webpack

4. Load model

Vscode save Vue format eslint check error [How to Solve]

1. Problem description

When writing items with Vue, the eslint syntax check was turned on as usual, but various errors, single and double quotation marks and function spaces were found after formatting and saving with vscode. Because the formatting plug-in of vscode itself does not match eslint. Therefore, some configurations need to be modified to achieve the effect of configuration. There are two ways to modify.

2. Solution 1

Since the vsdoe formatting does not match eslint, we will modify the rules of vscode. Create a file .Pretierrc under the current project and modify relevant configuration items. Here, we only modify single and double quotation marks and semicolons.

 {
   "semi": true,
   "singleQuote": true
 }

3. Solution 2

Modify the style location where you save Vue formats:

3.1 open configuration item

3.2 find the corresponding configuration item and modify the corresponding value

"[vue]": {
        //"editor.defaultFormatter": "esbenp.prettier-vscode" //before fixing,
         "editor.defaultFormatter": "octref.vetur" // Use vetur formatting rules, after modification
    },

3.3 setting vetur rules

"vetur.format.defaultFormatterOptions": {
        "js-beautify-html": {
            "wrap_attributes": "force-aligned" //Attribute forced line alignment
         },
         "prettier": {
             "semi": true, // keep the semicolon
             "singleQuote": true, // true uses single quotes
        },
    },

Vue Start Error: This relative module was not found:

This relative module was not found:
I checked it for a long time and found nothing wrong. Finally, I took a look at the directory

I first created an empty project… And then created another project in the empty project by using the terminal command NPM create. The result is that when NPM install XXX is followed, it is in the parent directory of vuero. Therefore, an error will be reported when starting vuero,
in addition, try to use cnpm install XXX instead of NPM insatl XXX

[Solved] Install The Latest Version of Jest Error: TypeError: Cannot read property ‘instrument‘ of undefined

Background:

In order to add jest to the existing projects, many pits have been stepped on. The pits are listed as follows, the adopted solutions, new problems and final treatment methods.

First of all, my project is vue2, and the Babel of package.json is @ Babel, so the following problems will occur. The handling method of this version is to use the CLI plug-in to start jest instead of the Babel version; If it is Babel version, the normal NPM install – G jest configuration script is enough, which will be described later; The jest installation of vue3 is simpler and is not covered in this article.

Pit 1: it runs directly in Vue project and reports an error

requires Babel "^7.0.0-0", but was loaded with "6.26.3". If you are sure you have a compatible version of @babel/core, it is likely that something in your build process is loading the wrong version. Inspect the stack trace of this error to look for the first entry that doesn't mention "@babel/core" or "babel-core" to see what is calling Babe

Tried:

npm install --save-dev "babel-core@^7.0.0-bridge.0"

Various @Babel or Babel are also installed

But it didn’t work. It is speculated that the conflict is caused by jest’s own package.

Pit 2: then upgrade jest to the latest version, 27 +. report errors

TypeError: Cannot read property 'instrument' of undefined

What should I do?It seems that we can’t find a good method on the Internet. Then go to GitHub and see the projects that @ Babel + vue2 + jest can run. Here are the minimum installation items.

Solution:

npm install @vue/test-utils -D
npm install @vue/cli-service -D
npm install @vue/cli-plugin-unit-jest -D

Jest.conf.js is placed in the root directory, or in the tests directory, or whatever you want

module.exports = {
  preset: '@vue/cli-plugin-unit-jest',
  collectCoverage: false
}

Package.json configuration script and configuration file directory

"scripts": {
   "test:unit": "vue-cli-service test:unit --config ./tests/jest.conf.js",
}

If you report an error:

solution: description of the error information. The paths do not match and the test file cannot be found, so change the directory to tests/unit.

Error reporting:

solution: according to the error reporting information, Vue template compiler and Vue need to be the same version, so install the Vue version corresponding to Vue template compiler. My is NPM install Vue template- [email protected]

So far, the unit test is running, and I’m always excited

supplement:

My project can run without changing the. Babelrc file

My package.json:

Here, for the installation and configuration of the Babel version of jest, first look at the package. JSON

Simply start a project

install jest
Global: NPM install – G jest or local: NPM install – D jest
specify the test script in package.json:

run the script to test.

Finally, for TS, you need to install additional packages and configure additional. If you can’t find it on the Internet, go to GitHub.

The Vue parent component uses ref to call the sub component method and reports an error

In the Vue project, the parent component uses $ref to call the method of the child component to report an error. At first, the console will report an error. When the pop-up window is closed and the page is not refreshed, the solution is simple and crude~

Both methods are OK, but the second is more intuitive optimization.

The first method uses a timer to solve the problem that the method is not loaded because the sub components are not mounted when the ref attribute is initially rendered. At this time, this method does not exist, so it cannot be accessed. Add a timer to delay execution. However, if the data is displayed one second later, you will directly see the loading problem of this page;

Therefore, the second method is more appropriate to solve the problem that DOM elements are not loaded. Let the method wait

[Solved] Vue item error: Regeneratorruntime is not defined

Project scenario:

The company’s official website project built with Vue scaffold

Problem Description:

async/await is used when processing asynchrony. It is found that the console reports an error regeneratorruntime is not defined

Cause analysis:

The project uses Babel, and Babel needs some auxiliary functions when translating ES6 syntax. When there is no module to encapsulate these auxiliary functions, it will report similar not defined.

Regeneratorruntime is an auxiliary function generated by Babel for async/await compatible syntax. Regenerator runtime is not defined. Obviously, the package of regenerator runtime is missing.

Solution:

    1. install transform runtime
yarn add  @babel/plugin-transform-runtime -D

Configure Babel (I use Babel 7.0 as Babel.Config.JS)

plugins: [
    
    [
      "@babel/plugin-transform-runtime"
    ]
    
  ]

Restart the service and find that there is no error when running

[Solved] Vue calls style loader error: Module build failed: CssSyntaxError

Vue uses style loader to add CSS style to Dom and reports an error

ERROR in ./src/css/normal.css
Module build failed: CssSyntaxError

(1:1) Unknown word

> 1 | var content = require("!!./normal.css");
    | ^
  2 | 
  3 | if (typeof content === 'string') {

 @ ./src/main.js 11:0-27
npm ERR! code ELIFECYCLE
npm ERR! errno 2
npm ERR! [email protected] build: `webpack`
npm ERR! Exit status 2
npm ERR!
npm ERR! Failed at the [email protected] build script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.

The loader sequence you configured in the webpack.config.js file may be wrong
original code

const path=require('path')
module.exports={
  entry: './src/main.js',
  output: {
    path:path.resolve(__dirname,'dist'),
    filename:'bundle.js'
  },
  module: {
    rules: [
      {
        test: /\.css$/,
        use: ['css-loader','style-loader']
      },

    ]
  }
}

Code after modification

const path=require('path')
module.exports={
  entry: './src/main.js',
  output: {
    path:path.resolve(__dirname,'dist'),
    filename:'bundle.js'
  },
  module: {
    rules: [
      {
        test: /\.css$/,
        use: ['style-loader','css-loader']
      },

    ]
  }
}

This is because when multiple loaders are configured, the program is read from right to left

[Solved] Uncaught (in promise) TypeError: XXX.a is not a constructor

Tips:

Solution:

Step 1:

npm add vue-grid- [email protected] -beta1

Step 2:
Import vuegridlayout from ‘Vue grid layout’ in
mian.js

Add: .use (vuegridlayout)
createapp (APP).use (Axios).use (router).use (vuegridlayout).mount (‘#app’)

Because Vue grid layout is vue2, but you use vue3, you need to install the dependencies and related configurations of vue3