Tag Archives: & View

[Vue warn]: Error in nextTick: “TypeError: Cannot read property ‘map‘ of null“

When using element UI in Vue project, an error is reported: [Vue warn]: error in nexttick: "typeerror: cannot read property 'map' of null"

The error message is as follows:

It’s ridiculous. I studied it myself and recorded it. It’s all the fault of carelessness:

The reason is that the data source of El table is initially set to null. When the default sort attribute is used, the table will map the data source by default and report an error
change currentpagedata: null to currentpagedata: [] .

Resolution process:

Locate the error location 10051 line according to the error information:

array.map reports the error as null, and then locate the array up:

according to the parameters and contents of this method, it is basically determined that the error information is caused by the default sort attribute of El table, that is, the data source array of El table during compilation and sorting is null
looking back at the data source, I found that the data source was initially assigned null. No wonder
change the initial value of the data source array to [] empty array.

Itself is a very simple mistake, but I didn’t expect it.

Solve NPM err! code 128

An error is reported after NPM install

npm ERR! code 128
npm ERR! An unknown git error occurred
npm ERR! command git --no-replace-objects ls-remote ssh://[email protected]/adobe-webplatform/eve.git
npm ERR! [email protected]: Permission denied (publickey).
npm ERR! fatal: Could not read from remote repository.
npm ERR!
npm ERR! Please make sure you have the correct access rights
npm ERR! and the repository exists.

npm ERR! A complete log of this run can be found in:
npm ERR!     C:\Users\AppData\Local\npm-cache\_logs\2021-07-22T03_30_02_444Z-debug.log

  solve:

git config --globalurl."https://".insteadOfgit://

npm cache clean --force

quill Cannot import ImageResize. Are you sure it was registered?

When using Vue quill editor rich text editor, an error is reported when registering the plug-in provided by Vue quill editor. Typeerror: cannot read property ‘imports’ of undefined; quill Cannot import ImageResize. Are you sure it was registered?

First look at the error code

quill cannot import imageresize. Are you sure it was registered
Cannot read property ‘imports’ of undefined

There are many solutions on the Internet for webpack, but the invalid pro test may be the version problem. Relatively speaking, this solution is not very friendly, because most apes don’t know enough about webpack

To get to the point, first read the newspaper wrong

    error content: the undefined attribute ‘imports’ or cannot be read. You can download this JS file to see the error at a glance. When calling the window.quill.imports method, the window.quill is undefined, that is, the plug-in is loaded earlier than quild, and there is no window.quill. This object .
    4. The solution is directly to the code. First, you can Download the JS file of the module to be imported. My JS file is image-resize.min.js. This JS file can be downloaded from the official document. If it has been installed, you can download your own node_ Find
    main.js in the modules folder. When importing, write the following code to ensure that window.quil exists when registering the plug-in, and all problems will be solved 

    	 import {Quill} from 'vue-quill-editor' 
	window.Quill = Quill
	
	const scriptEl = document.createElement('script'); 
	scriptEl.charset = 'utf-8' 
	scriptEl.src =  './image-resize.min.js' 
	const head = document.head || document.getElementsByTagName('head')[0]; 
	head.appendChild(scriptEl);

    Summary

    No matter how you register components

    Quill.register(‘modules/imageResize’, ImageResize); var Module = Quill.import(‘core/module’); class CustomModule extends Module {} Quill.register(‘modules/custom-module’, CustomModule);

    Can be introduced by the above methods, simple and practical

Vue3 uses element plus package to solve the problem of occasionally disordered code on the icon after it goes online

Unlike element UI, element plus does not use node sass or dart sass, but sass and sass loader. At first, I thought it might be that the sass version and sass loader version of the project are inconsistent with the version of element plus, so I deleted the version of my project and installed the version consistent with the version used by element plus, but the problem is not solved. The version is as follows:

 "devDependencies": {
    "postcss-loader": "^5.3.0",
    "sass": "^1.35.1",
    "sass-loader": "^10.0.1",
  }

After tossing around for a while, I found an article on the Internet (the solution of icon garbled code packaged by dart sass compiled element UI). This is a solution for element UI, but I don’t know whether it is effective for element plus. Therefore, after using this method for element plus according to the instructions, I found that it is also effective, so I made a record, The steps are as follows:
1. Install the plug-in CSS Unicode loader;

yarn add css-unicode-loader -D //npm install css-unicode-loader -D

2. In vue.config.js configuration, I used the object writing method, and here it is modified to function writing method

// vue.config.js
module.exports = {
  configureWebpack: config => {
    config.module.rules.filter(rule => {
      return rule.test.toString().indexOf("scss") !== -1;
    }).forEach(rule => {
        rule.oneOf.forEach(oneOfRule => {
          oneOfRule.use.splice(oneOfRule.use.indexOf(require.resolve('sass-loader')), 0,
          	{ loader: require.resolve("css-unicode-loader")})
        })
      })
    }
}

[HMR] Waiting for update signal from WDS…

  The console displays [HMR] waiting for update signal from WDS

Solution:

1. Find the following documents

node_ modules/webpack/hot/log.js

2. Comment out the following codes

module.exports = function(level, msg) {
	// if (shouldLog(level)) {
	// 	if (level === "info") {
	// 		console.log(msg);
	// 	} else if (level === "warning") {
	// 		console.warn(msg);
	// 	} else if (level === "error") {
	// 		console.error(msg);
	// 	}
	// }
};

Vue router click the menu bar and the same module reports an error Vue router.esm.js? 2215:2065 Uncaught (in promise) Error

Background: the following problems occur when the project switches the interface through the menu bar. Although it does not affect the switching of the interface and the use of the system, it will affect the robustness of the system

Reason: the problem shown in the screenshot above is the problem when the system switches routes, mainly due to the version of Vue router. The callback form of Vue router above 3.0 is in the form of promise API, and a promise is returned. If no error is caught, the console will always show the warning above.

Solutions:
1. Install a lower version of Vue router or catch throw in errors
2. Delete node_ Modules folder, and then use “cnpm install” to re install the dependency
3. If the Vue router installed is still the wrong version when downloading the dependency package again, how to solve it?The solution is also very simple. Run NPMI Vue in the project directory- [email protected] -S is enough
4. If you don’t want to change the version of Vue router or it’s still useless, add the following lines in main.js or router.js in SRC folder of project directory:

import Router from 'vue-router'
 
const originalPush = Router.prototype.push
Router.prototype.push = function push(location) {
  return originalPush.call(this, location).catch(err => err)
}

If you have any questions or suggestions, you are welcome to leave a message in the comment area ([

[Solved] Vue Project Start Error: Support for the experimental syntax ‘jsx‘ isn‘t currently enabled

The project is built with Vue scaffold

As shown in the figure:

According to the prompt in the red box in the figure:

I need you in. Babelrc   Just add @ Vue/Babel preset JSX to the configuration file

{
  "presets": [
    ["@babel/preset-env", { "modules": false }],
    "@vue/babel-preset-jsx" 
  ],
  "plugins": [
    "@babel/plugin-proposal-class-properties", 
    "syntax-dynamic-import",
    [
      "component",
      {
        "libraryName": "element-ui",
        "styleLibraryName": "theme-chalk"
      }
    ]
  ]

}

The problem has been solved.

2021-07-03module parse failed: unexpected token (763:13) you may need an appropriate loader to

After updating the scaffold and creating a new project, NPM run serve reported this error

directly using the method
1. At the beginning of Vue create XXX, check the CSS when you check the pre selection

but this method is not good, sometimes you just don’t want to check what to do.

2. Update the webpack, and update all other updates. This should be ok……

Uncaught syntax error: unexpected token ‘< 0‘

Background

Vue and Vue cli versions for the project

“vue”: “^2.6.11”
“@vue/cli”: “~4.5.0”

I created a static directory in SRC directory to store JS and CSS, and then call it in code.

c.href = '../static/css/he-standard.css';
s.src = '../static/js/he-standard.js';

An error was found after running the project

Uncaught SyntaxError: Unexpected token '<'

solve

Put the static folder under public 

c.href = '/static/css/he-standard.css';
s.src = '/static/js/he-standard.js';

Reference:
https://blog.csdn.net/weixin_43742708/article/details/110594790

error Unable to authenticate, need: BASIC realm=“Sonatype Nexus Repository Manager“

Today, when I was working on the Vue project to switch private service nexus and NPM login, I encountered the following problem: error unable to authenticate, need: basic realm = “sonatype nexus repository manager”
I searched the Internet, it seems that I may encounter this problem when I log in, register and publish. The reason for the problem is also very clear, Is the authority verification failed. The following is my online solution integration

First, the information input is incorrect. Carefully compare whether the user, password and email you input are correct (do not use the password remembered on the webpage to log in, because it may have been changed.)
the second method: if it’s registration, the user name may have been used
the third method: clear cache: NPM cache clear — force
I’ve tried all the above methods, but it doesn’t solve my problem, The following is my way to solve the problem
the fourth method: add permissions to the private service
(1) the browser logs in to the private service
(2) settings – security – realms – add NPM bearer token realm to the active
the fifth method: the Limited Download address in. Package-lock.json conflicts with the address you use

Check the address used: NRM is to see if it is consistent with the address in package-lock.json. This is my latest problem. When I visit Taobao image and https://registry.npmjs.org/
solution: delete package-lock.json