Tag Archives: I saw it. JS Company

JavaScript Common Errors List (Reasons & Solutions)

Here is a list of the most common errors in JavaScript.

 

JavaScript Common Errors List

1.Uncaught TypeError: Cannot read property

Improper initialization of the state when reading the properties of an undefined object or calling its methods or rendering UI components will appear in the console

The simplest Solution: initialize state in the constructor.

2. TypeError: ‘undefined’ is not an object

An error occurred while reading a property or calling a method on an undefined object in safari.

3. TypeError: null is not an object

An error occurred while reading a property or calling a method on an empty object in Safari

Note: in JavaScript, null and undefined are different, which is why we see two different error messages. Undefined is usually a variable that has not been allocated, and null means the value is empty.

4.  (unknown): Script error

This kind of script error occurs when an uncaught JavaScript error (an error caused by the window.oneror handler rather than captured in the try catch) is restricted by the browser’s cross domain policy.

5. TypeError: Object doesn’t support property

The error in ie when calling an undefined method is equivalent to the “typeerror:” undefined “isnotafunction” error in chrome.

6. TypeError: ‘undefined’ is not a function

This is an error in chrome when calling an undefined function.

7. Uncaught RangeError

This error occurs when calling a recursive function that does not terminate, or if you pass a value to a function that is out of range.

8. TypeError: Cannot read property ‘length’

An error occurred while reading the length attribute of an undefined variable.

9. Uncaught TypeError: Cannot set property

When accessing an undefined variable, it always returns undefined. We cannot get or set any undefined properties.

10. ReferenceError: event is not defined

This error is raised when a variable is undefined or is outside the current scope.

[Solved] Front end error: Unknown custom element

report errors

chunk-vendors.js:2128 [Vue warn]: Unknown custom element: - did you register the component correctly? For recursive components, make sure to provide the “name” option. - did you register the component correctly?For recursive components, make sure to provide the "name" option

 

reason

el component not registered

Solution:

1. Download elementUI

npm i element-ui -S

2. Import

Add the following three lines  in main.js:

import ElementUI from 'element-ui';
import 'element-ui/lib/theme-chalk/index.css';
Vue.use(ElementUI);

Done!

Parsing error:x-invalid-end-tag [How to Solve]

Parsing error:x-invalid-end-tag

Reason: When iView renders tags as native html tags, some tags are self-closing, such as input, so having end tags will report an error.
Solution 1: Remove the end tag.
Solution 2: Modify the configuration file to ignore the check.
root directory - eslintrc.js - Rules
add a line: "Vue/no parsing error": [2, {"x-invalid end tag": false}]

Chrome Broswer V98 Can not manually add cookies locally, refresh cannot be retained, and the cookie item is red

Solution for Chrome 91 after SameSite by default cookies were removed, solution for cross-domain POST requests in Chrome that can’t carry cookies

Yesterday after work to start the project, Google Chrome automatically upgraded to version 98, because the previous project is required to manually add a cookie in the local development debugging, now it is impossible to manually add a cookie, and the high version removed SameSite by default cookies, resulting in the previous method can not be used, manually set after the cookie also reported red, as follows:

Now just open Chrome and visit the address chrome://flags/ and search for Partitioned cookies and change the setting to Enabled, restart the browser, manually adding cookies will be retained and will not b

How to Solve Vue & Django Cross-domain Issue

1. Install the package to solve cross-domain related problems at the terminal

python -m pip install django-cors-headers

2. Add the following configuration to the setting.py file clock in the django project

‘corsheaders’,

comment csrf out and add  ‘corsheaders.middleware.CorsMiddleware’,

finally add these two lines of configuration

[Solved] vite package Error: globalThis is not defined

Problem:
browser version 65
globalthis requires chrome 71 or above

vite + vue3.0 after the project is packaged, the browser prompts globalthis is not defined.

How to Solve:
Modify vite.config.js
Add plugin @vitejs/plugin-legacy

import legacy from '@vitejs/plugin-legacy'

export default defineConfig({
	plugins: [
		legacy({
			targets: ['Chrome 63'],
			additionalLegacyPolyfills: ['regenerator-runtime/runtime'],
			modernPolyfills: true
		})
	],
	build:{
   		target:'es2015'
	}
})

Just repack it

[Solved] Echarts Error: Uncaught (in promise) Error: Initialize failed: invalid dom.

Problem screenshot: the reason for

Cause: After entering the chart page and calling the Get Chart Data interface, the interface jumps away from the chart page before returning the data, and then the data is returned and the chart is created, but after jumping away from the chart page, the container element is not available, so an error is reported and the chart creation fails.

Solution:
1. Instead of using the native js method to get the container element (e.g. document.getElementById()), use this.$refs instead.
2. If the chart page is a cached page and you want the chart to load after jumping back to the chart page, you need to write the width and height of the container (in px) in the in-line style of the chart container. (For cached pages there is also another solution: execute the create chart method in the activated life cycle of the component)

<div ref="chinaMapChart" style="width: 770px; height: 560px" />

------

const myChart = echarts.init(this.$refs.chinaMapChart)

[Solved] error ‘xxx‘ is never reassigned. Use ‘const‘ instead prefer-const

If let or var variables are used to declare in TS, an error will appear:

Slint: identifier ‘errmsg’ will never be reassigned; Use ‘const’ instead of ‘let’. (prefer const)

code snippet:

Solution:

1. Use const to declare
2. Open tslint.json file under the project, set prefer-const to false.

Cesium.js:1 Error loading image for billboard: [object Event]

Label pictures are not displayed

Address error

When going to reference local images in the .js file, the path should be introduced in the form of require(), modified as follows

billboard: {
        image: require("../img/boshi.png"),
        pixelOffset: new Cesium.Cartesian2(-120, 0),
        // eyeOffset: new Cesium.Cartesian3(0.0, 0.0, 0.0),
        horizontalOrigin: Cesium.HorizontalOrigin.LEFT,
        verticalOrigin: Cesium.VerticalOrigin.CENTER,
        // scale: 0.25,
        distanceDisplayCondition: new Cesium.DistanceDisplayCondition(100, 20000)
 }