Tag Archives: javascript

[Vue warn]: Error in mounted hook: “Error: please transfer a valid prop path to form item“

Problem generation

I encountered some problems when writing the project. Although it has little impact on the project, a red report looks uncomfortable, so I’ll see how to solve it and report the following errors

[Vue warn]: Error in mounted hook: “Error: please transfer a valid prop path to form item!”

English:
[Vue warning]: mounting hook error: “error: please pass a valid prop path to form an item!”

Causes of problems

In the Chinese translation, we can clearly know that there is an error in the mounting hook, that is, the value of prop is wrong

Solution:

Modify :prop = "'domains.'+ index +'.value '" to :prop = "domain.fieldname" 

<a-form-model-item
  v-for="(domain, index) in model.configDetails"
  :key="index"
  :label="index === 0 ?'Add field' : ''"
  :prop="'domains.' + index + '.value'"
  :rules="{
    required: true,
    message: 'Can not be empty!',
    trigger: 'blur',
  }"
>
  <a-input v-model="domain.fieldName" placeholder="Enter field name" style="width: 40%; margin-right: 8px" />
  ~
  <a-input v-model="domain.fieldValue" placeholder="Enter field value" style="width: 40%; margin-right: 8px" />
  <a-button v-if="model.configDetails.length >= 1" @click="removeDomain(domain)">删除</a-button>
</a-form-model-item>

After modification

<a-form-model-item
  v-for="(domain, index) in model.configDetails"
  :key="index"
  :label="index === 0 ?'Add field' : ''"
  :prop="domain.fieldName"
  :rules="{
    required: true,
    message: 'Can not be empty!',
    trigger: 'blur',
  }"
>
  <a-input v-model="domain.fieldName" placeholder="Enter field name" style="width: 40%; margin-right: 8px" />
  ~
  <a-input v-model="domain.fieldValue" placeholder="Enter field value" style="width: 40%; margin-right: 8px" />
  <a-button v-if="model.configDetails.length >= 1" @click="removeDomain(domain)">删除</a-button>
</a-form-model-item>

Expand

When the form is verified, prop specifies that the attribute to be verified must be the attribute name of the corresponding object in the form model attribute

[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] electron project Package Error: spawn exe\dll ENOENT

Error after electron packaging: spawn exe enoent error solution.

Today, an error occurred when the project was running after packaging: spawn exe enoent error. When looking for a solution, I thought it should be that the referenced exe program was packaged into the app It is caused by the ASAR file, so the EXE file is not packaged into the app ASAR files should solve the problem.

I packed it with electron builder in Vue config.JS file, in Vue config.JS add the following code

pluginOptions: {
		electronBuilder: {
			builderOptions: {
				asar: true,
				asarUnpack: ['exeFiles'],//The folder where the referenced dll/exe files are stored
				extraFiles: {
					from: 'exeFiles',// the folder where the referenced dll/exe files are stored, my project is in the same directory as vue.config.js
					to: '. /exeFiles'//the location of the folder after packaging, I packaged this way before and after the reference relationship does not change, spawn code will not have to change
				},		
		}
	}

If you use the older version of Vue cli, it should be in package JSON, the principle is similar.

[Solved] Prittier format code error: JSON Error in…

Error screenshot

[error] Invalid configuration file `src\index.js`: JSON Error in E:\202112\testPrettier\.prettierrc.json: 
[error]
[error] > 1 | ��
[error]     | ^
[error]
[error] Unexpected token "�" (0xFFFD) in JSON at position 0 while parsing "��"
[error]
[error] > 1 | ��
[error]     | ^
[error]

Installation process

Install prettier 

yarn add --dev --exact prettier

Create .Prettier.json

echo {}> .prettierrc.json

Create .prettierignore

echo {}> .prettierignore
# write content
src/assets
**/*.md
**/*.svg
**/*.html
**/*.ejs
**/*.png
**/*.eot
**/*.woff
**/*.ttf
**/*.gif
**/*.jpg
**/*.jpeg
package.json

Execute yarn prettier --write ., an error will be report:

Check the index.js in prettier as following:

searchPlaces: ["package.json", ".prettierrc", ".prettierrc.json", ".prettierrc.yaml", ".prettierrc.yml", ".prettierrc.json5", ".prettierrc.js", ".prettierrc.cjs", "prettier.config.js", "prettier.config.cjs", ".prettierrc.toml"],
loaders: {
      ".toml": loadToml,
      ".json5": loadJson5
    }

More than one name was found prettierrc.JSON format file

Solution:

Replace  prettier.json file with pretierrc.config.js  file and write its internal contents in the following way:

module.exports = {
    trailingComma: "es5",
    tabWidth: 4,
    semi: false,
    singleQuote: true,
};

You can format the file. I don’t understand why.

Combined with husky, the project automatically formats the code before submitting GIT

Premise: the project must be git controlled, otherwise the following will report an error and install lint staged

npx mrm@2 lint-staged

This is a relatively simple and fast way

How to Solve electron import page Error

Uncaught ReferenceError: require is not defined
at index. js:1

index. Index. HTML file js

The following is index.js file

index.JS error

You need to add the following code in the created window: see the first figure for details

 webPreferences: {
    webSecurity: false, // Cancel cross-domain
    nodeIntegration: true, // v5 version requires this line
    contextIsolation: false, // v12 version needs to add this line
    enableRemoteModule:true // v10 version Turn on remote module
}

How to Solve Webpack packag iconfont font error 

ERROR in ./src/fontsize/iconfont.css 1:0
Module parse failed: Unexpected character '@' (1:0)
You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file. See https://webpack.js.org/concepts#loaders
> @font-face {
|   font-family: "iconfont"; /* Project id 2969850 */
|   src: url('iconfont.woff2?t=1638862344321') format('woff2'),
 @ ./src/index.js 2:0-32

 

 

Solution: The webpack.config.js file is wrong, the configuration file should be

[Solved] npm run start Error: Exit status 3221225477

NPM run start reports an error exit status 3221225477

Error content resolution

Error content

#
# Fatal error in , line 0
# Check failed: U_SUCCESS(status).      
#
#
#
#FailureMessage Object: 00000088678FDB80npm ERR! code ELIFECYCLE
npm ERR! errno 3221225477
npm ERR! [email protected] start: `vue-cli-service serve`
npm ERR! Exit status 3221225477
npm ERR!
npm ERR! Failed at the [email protected] start 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\a\AppData\Roaming\npm-cache\_logs\2021-12-13T09_16_55_301Z-debug.log        
/c/Users/a/AppData/Roaming/nvm/nodejs/npm: line 34:  1042 Segmentation fault      "$NODE_EXE" "$NPM_CLI_JS" "$@"

Solution:

The problem can be solved by switching the appropriate node version

[Solved] react-router-dom Error: index.js:1 Warning: Functions are not valid as a React child.

index. js:1 Warning: Functions are not valid as a React child. This may happen if you return a Component instead of < Component /> from render. Or maybe you meant to call this function rather than return it.

reason:

1. When you return a component, you mistakenly write it as component instead of <Component/>

2. Maybe you want to call this function instead of return it.

For example:

① When calling a method, forget to add the following parentheses.

② When using react-router version 6.0.2 (released in 20211110), the writing method has been changed when registering the route.

[Solved] proxy Configure Error: Error occured while trying to proxy to:

The project uses the create react app scaffold to build
before configuring the local proxy, the following

the following projects need to proxy HTTPS, configure the proxy to report an error of 500, and respond to error occurred while trying to proxy to:
find and reconfigure, and add changeorigin: true

proxy: {
    '/cas': {
      target: 'https://**.**.**.**:30090',
      secure: false,
      changeOrigin: true,
      pathRewrite: { "": "" }
    },
  },```

Nuxt integrate with qiankun as the main application Error: SKIP_BECAUSE_BROKEN

Almost all online tutorials are directly connected to micro applications in the home page, which is in the default of layout Vue is labeled with container, and other reference official websites are OK. However, if the sub route is embedded as a page, the first page can be loaded successfully. When you go back and enter the sub route, you will report an error that the micro page cannot be mounted

Target container with #subapp-viewport not existed while sub-vue mounting!

After searching the Internet for a long time, I found this sentence on the official website:

How to load micro applications on a routing page of the main application

It must be ensured that the routing page of the main application is also loaded when the micro application is loaded.

There is a problem with the sub routing of nuxt. Qiankun listens to the change of URL to load micro applications, and nuxt is the same, and the page generated by nuxt is slower than that of Qiankun. Therefore, when Qiankun loads the micro page, the container tag is not generated.

Many methods have been tried to solve the problem in an elegant way, but they can’t. finally, the same solution that nuxt also reports an error when there is no change in the jump route address is adopted. A bridging page is added between the jump page and the target page. The layout of the bridging page is the same as that of the target page, so that the label of the container is loaded. Because the bridging page and the target are the same layout, The container tag is not lost.

The code is as follows:

<template>
  <div>
  </div>
</template>
<script>
/**
 * qiankun bridge, qiankun listen to url changes to load the sub-application, but nuxt is also, can qiankun in advance, will lead to the layout in the container tag has not been loaded, the micro application can not be injected.
 * Use this bridge to load the layout, and container tags in advance.
 */
export default {
  name:'Bridge',
  layout:'subapp',
  created(){
    this.$router.replace(this.$route.query.to)
  }
}
</script>

The jump event of the jump page (home page) is changed to:

 goto(item){
      this.$router.push('/subapp/bridge?to='+this.appid)
    }

Appid is the name of the micro application.

[Solved] Vue console error: navigationduplicated: avoided redundant navigation to current location

Its tip is to avoid redundant navigation to the current location. Simply put, the same route is triggered repeatedly.

The solution is as follows:
in the router folder, click index Add these lines of code to the JS file:

const originalPush = Router.prototype.push

//Error Messages: NavigationDuplicated: Avoided redundant navigation to current location
Router.prototype.push = function push(location) {
	return originalPush.call(this, location).catch(err => err)
}

The detailed location is as follows:

However, he uses vuerouter instead of router. I don’t know if it’s the Vue router version.