Tag Archives: front end

[Solved] uview u-sticky Error: Cannot read property ‘bottom‘ of null

The causes are:

The component u-sticky and the bottom navigation bar tabbar conflict when switching pages, the sticky component creates an Observer listener, and when the page is switched and not destroyed, it causes the component to remain listening, so the error Cannot read property ‘bottom’ of null appears. So we need to disconnect the Observer listener manually to solve this error problem

Source code:

<u-sticky offset-top="200" >

</u-sticky>

 

Modified:

<template>
	
		<u-sticky offset-top="200" :enable="enable">
				
		</u-sticky>
</template>

<script>
	export default {
		data() {
			return {
				// @property {Boolean} enable Whether to open the ceiling function(default is true)
				enable:true
			}
		},
		// Turn on or off listeners in the corresponding show and hide page lifecycle
		onShow() {
			this.enable= true
		},
		onHide() {
			this.enable= false
		}

	}
</script>

[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';

How to Solve appium Startup Error (Various Error Messages)

The appium startup keeps reporting errors.
Various errors, such as.

[debug] [ADB] Creating ADB subprocess with args: ["-P",5037,"-s","192.168.0.4:5555","shell","am","instrument","-w","io.appium.uiautomator2.server.test/androidx.test.runner.AndroidJUnitRunner"]
[debug] [WD Proxy] Matched '/status' to command name 'getStatus'
[debug] [WD Proxy] Proxying [GET /status] to [GET http://localhost:8200/wd/hub/status] with no body
[WD Proxy] Got an unexpected response: {"errno":-4077,"code":"ECONNRESET","syscall":"read"}

or:

[debug] [ADB] Running 'D:\003-soft\android-sdk-windows\platform-tools\adb.exe -P 5037 -s 192.168.0.4\:5555 forward --remove tcp\:8200'
[UiAutomator2] Unable to remove port forward 'Error executing adbExec. Original error: 'Command 'D\:\\003-soft\\android-sdk-windows\\platform-tools\\adb.exe -P 5037 -s 192.168.0.4\:5555 forward --remove tcp\:8200' exited with code 1'; Stderr: 'error: listener 'tcp:8200' not found'; Code: '1''
[debug] [BaseDriver] Event 'newSessionStarted' logged at 1659668519002 (11:01:59 GMT+0800 (China Standard Time))

 

The appium.setting installed on the device doesn’t open manually either, and I always thought that was the reason.
Tried to re-install appium and node version, still not working. Finally, here is the solution below:

if automation_name =='UiAutomator2':
    desired_cap['uiautomator2ServerInstallTimeout'] = 20000 This time is changed from 9000 to 20000 and it's fine. It started successfully. After a week of problems, finally good.

[Solved] arco design vite-plugin-style-import Load menu-item error: Internal server error…

According to Arco design tutorial on the official website

Load components on demand by manual import

Solution:

Change the official website example to the following. The exclude array is the component name without CSS. If you are not clear about the component name, you can print console.log of the resolveStyle function:

createStyleImportPlugin({
      libs: [
        {
          libraryName: '@arco-design/web-vue',
          esModule: true,
          resolveStyle: (name) => {
            const exclude = ['menu-item']
            if (exclude.includes(name)) return ''
            // css
            return `@arco-design/web-vue/es/${name}/style/css.js`
          },
        },
      ],
    }),

Error message

 [vite] Internal server error: Failed to resolve import "D:/Programing/WebstormProjects/cow-Low-code/node_modules/@arco-design/web-vue/es/menu-item/style/css.js" from "src\views\HomeView.vue". Does the file exist?

How to Solve Vue add element Install Error

Install element normally

Just enter

vue add element

However, the following errors may occur:

If the error report shows that it is a node-sass problem, change the second option to no, that is, do not introduce the SCSS of element

Perfect solution

But remember to add the following code to the main file later:

import ‘element-ui/lib/theme-chalk/display.css’

It is to directly introduce the CSS of the element

How to Solve Vue project Startup Error (Node Upgrade issue)

introduction:

Recently, after upgrading the nodejs version to v18.7.0, the project report digital envelope routes::unsupported was launched. After many searches, the solution was finally found.

reason:

node.js version problem

Because of the recent release of OpenSSL 3.0 in node.js V17, OpenSSL 3.0 adds strict restrictions on allowed algorithms and key sizes, which may have some impact on the ecosystem. Therefore, previous projects will report an error after upgrading the nodejs version

Solution:

Method 1:

export NODE_OPTIONS=--openssl-legacy-provider

Method 2:
Modify package.json, add set NODE_OPTIONS=–openssl-legacy-provider before the relevant build command

"scripts": {
   "serve": "SET NODE_OPTIONS=--openssl-legacy-provider && vue-cli-service serve",
   "build": "SET NODE_OPTIONS=--openssl-legacy-provider && vue-cli-service build"
},

HTML + PHP inline execute JavaScript Error [How to Solve]

Error message

read.php:1 Refused to run the JavaScript URL because it violates the following Content Security Policy directive: “script-src ‘self’”. Either the ‘unsafe-inline’ keyword, a hash (‘sha256-…’), or a nonce (‘nonce-…’) is required to enable inline execution. Note that hashes do not apply to event handlers, style attributes and javascript: navigations unless the ‘unsafe-hashes’ keyword is present.

 

Solution:

Add unsafe-inline in the header

header("Content-Security-Policy: script-src 'self' 'unsafe-inline';);

[Solved] error“:“element click intercepted“,“message“:“element click intercepted“

Error reporting: Selenium project can run locally, and there is no graphical use case execution error on Jenkins deployed in CentOS virtual machine: element click intercepted

Troubleshooting ① first check whether the browser and driver versions match

Browser driver download address: http://chromedriver.storage.googleapis.com/index.html

Troubleshooting ② check whether there are chrome processes that have not been closed. If there are, you need to kill them in batches

 kill -9  $(pgrep chrome) 

Troubleshooting ③ if the driver version matches, report and correct the error. Add the following code, with the focus on adding window size

chrome_options = Options()
chrome_options.add_argument('--headless')     # To open the browser, comment out the line of code
chrome_options.add_argument('--disable-gpu')
chrome_options.add_argument("--window-size=1920,1080")  # Error reported when adapting jenkins build{"error":"element not interactable"}
chrome_options.add_argument("--no-sandbox")
chrome_options.add_argument('--disable-dev-shm-usage')
driver = webdriver.Chrome(chrome_options=chrome_options)

Build successful

[Solved] Vue Error: Error in v-on handler (Promise/async): “[object object]“

[Solved] Vue Error: Error in v-on handler (Promise/async): “[object object]“

Solution:

Use try_ catch package async… await function

  /**
   * export
   */
  async download () { // export
    try {
      const { parkName } = this.formInline
      const res:any = await exportInvoice({ parkName })
      this.downSteam(res)
    } catch (_) {}
  }

[Solved] Error: error:0308010C:digital envelope routines::unsupported

Error: error:0308010C:digital envelope routines::unsupported

npm run serve error: error:0308010C

Error: error:0308010C:digital envelope routines::unsupported
    at new Hash (node:internal/crypto/hash:71:19)
    at Object.createHash (node:crypto:133:10)
    at module.exports (D:\Item\springbootVue\springboot\vue\node_modules\webpack\lib\util\createHash.js:135:53)
    at NormalModule._initBuildHash (D:\Item\springbootVue\springboot\vue\node_modules\webpack\lib\NormalModule.js:417:16)
    at handleParseError (D:\Item\springbootVue\springboot\vue\node_modules\webpack\lib\NormalModule.js:471:10)
    at D:\Item\springbootVue\springboot\vue\node_modules\webpack\lib\NormalModule.js:503:5

Solution:
set NODE_OPTIONS=–openssl-legacy-provider

D:\Item\springboot\vue>set NODE_OPTIONS=--openssl-legacy-provider

D:\Item\springboot\vue>npm run serve

> [email protected] serve
> vue-cli-service serve

It can run successfully

The main reason is the incompatibility of versions

[Solved] Error:The above error occurred in one of your React components & A component suspended while respondi

lazyLoad of routing components, lazy loading problem, when using the lazy function of react in conjunction with the import() function to dynamically load routing components.

import React, { Component, lazy } from 'react'
·······

const Login = lazy(()=>import('XXXX'))

The following errors will be reported:

Error analysis: suspended=> When the network speed is slow and the specified routing component page is not loaded, you need to use the fallback in suspend to load the contents of the fallback before the specified page appears.

Solution:

import React, { Component, lazy,Suspense } from 'react'
·····

const Home = lazy(()=> import('./Home'))
const About = lazy(()=> import('./About'))

·······
<Suspense fallback={<h2>Loading..</h2>}>
  <Routes>
     <Route path="/about" element={<About/>}/>
     <Route path="/home" element={<Home/>}/>
   </Routes>
</Suspense>