Tag Archives: Vue Project Error

[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] 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] vue Project Error: react lazy eslint error Parsing error: Unexpected token import

vue Project Error: react lazy eslint error Parsing error: Unexpected token import

1. You need to install the extension component eslint, and then click settings in settings – extension search – eslintrc and add this line (“parser”: “Babel-eslint”) in settings.json, save the code, and then run the project

[Solved] Vue Project Error: Module build failed: Error: Missing binding

Train of thought

Through the error message, we can see that the core problem is that the sass file cannot be found in the dependent file. This prompts us to reinstall sass

1. Switch to the dependent folder of the current project through CD, that is, node_modules file, and then run the command to install sass. The command is as follows

npm rebuild node-sass

2 . Then switch to the project folder and run the command to update it. The command is as follows:

npm update

3. Finally, run the command to start the project

npm run dev

[Solved] Vue Project Error: Error: Cannot find module ‘webpack‘ Require stack以及Error: Rule can only have one resource so

Error 1: NPM run serve reports an error when Vue project is started: error: cannot find module ‘webpack’ require stack

After the project is pulled down and the dependencies are installed normally, start the project and report error: cannot find module ‘webpack’ require stack. It is found that the webpack module is missing,

Error: Cannot find module 'webpack'
Require stack:
  at Function.Module._load (internal/modules/cjs/loader.js:725:27)
    at Module.require (internal/modules/cjs/loader.js:952:19)
    at require (internal/modules/cjs/helpers.js:88:18)

However, I have already installed webpack. Here, I need to re open CMD to install webpack globally

reason:

even if you installed webpack before, it must be a non global installation

Solution:

npm install  -g webpack

After the installation is complete, I start the project and find that it reports an error again!
Reported error: Error: Rule can only have one resource source (provided resource and test + include + exclude) in

Error 2: Project Error: Error: Rule can only have one resource source (provided resource and test + include + exclude) in

Error: Rule can only have one resource source (provided resource and test + include + exclude) in {
  "exclude": [
    null
  ]

reason:

package. Webpack version conflict in JSON

Solution::

delete the webpack and reinstall the previous version

npm uninstall webpack
npm install webpack@^4.0.0 --save-dev

[Solved] Vue Project Error: Syntax Error: TypeError: this.getOptions is not a function

Question:

Vue project, NPM run dev, the following error:

Or

reason:

The installed sass loader version is too high. Reinstall the lower version sass-loader.

Solution:

// Uninstall the current version
npm uninstall sass-loader

// Install the specified version
npm install --save-dev sass-loader@10

[Solved] Vue Project Error: This relative module was not found

Vue project error: this relative module was not found

The questions are as follows

Solution:

If this error occurs, check your own path. I have solved the problem

“. /”: represents the current directory.

“.. /” represents the upper level directory.

“.. /. /” represents the upper level directory.

And so on

I have solved it successfully