Category Archives: JavaScript

How to use HPQC on Chrome browser

Leave a reply

1.Install IE Tab from the Chrome Web Store (https://chrome.google.com/webstore/detail/ie-tab/hehijbfgiekmjfkfjpbkbammjbdenadd?hl=en-US)

Once it’s installed, you should see the IE Tab icon to the right of the Chrome address bar.

Now navigate to any page and click on the IE Tab icon to open the page with the IE rendering engine. That’s it!

2.Right-click on the IE Tab icon and select “Options” to see all of the options, including the Auto URLs.

Guide:  https://www.ietab.net/ie-tab-documentation?fr=v1

 

Trigger http request when tab page is closed in angular2+ project

Leave a reply

There is a function to trigger the script when a screen opens and ends in the requirement

　　It is easier to open the screen, just ngOnInit directly, after obtaining the script configuration of the screen, you can directly call the script to execute it.

　　I thought about the trigger of the screen exit, and it is divided into 2 situations:

　　1. Exit the preview screen: This is based on the preview screen in the editor. The main project is still there when you exit, so you can hear it directly with ngOnDestroy

 

　　2. Directly close the browser tab page: This is a bit troublesome, angular can’t monitor directly, you need to monitor the window.onbeforeunload method, which I wrote here in ngAfterViewInit

 

　　The result is obvious, the tab page is closed without even sending the request.

　　At present, I think of delaying to make a request to execute script data (the result is not important), just make a request

 

　　At this time, you can see that after the delay is over, the request has been sent

 

[Solved] Custom components with click events do not work

Leave a reply

Question
Why we add a click event to a div and it works, but when we add a click event to a custom component and click on the area where the bigProductCard is located, it does not trigger the click method?

The reason
It’s simple, the div adds a click event to the native html tag, the browser listens to the user’s mouse click, and then through vue’s processing, the start click callback function;

For custom components, we know from the vue source code that v-on actually ties a this.$on(‘click’, func) event to the child component instance, which is a fake listener that the browser won’t help us handle because it’s essentially just a this.$on(‘click’) event tied to the child component instance; when the child $emit(‘click’) will call the func in this.$on(‘click’,func) when the subcomponent departs from this.$emit(‘click’) at some point;

That’s all;

 

 

Solution:
Find a div in the subcomponent’s template, add a @click event, which the browser will help us listen to, and then listen to the callback function when this.$emit(click) is called, so that this.$on(‘click’,func) of the placeholder vnode can be called;

ArcGIS API for JavaScript version 4. X updated and the project startup error: Module parse failed: Unexpected token(… …

 

Question:

When using the project created by vue and webpack, after the ArcGIS API for JavaScript 4. X is upgraded from a lower version to a higher version, problems occur in building the project:

Module parse failed: Unexpected token. You may need an appropriate loader to handle this file type…

error  in ./node_modules/@arcgis/core/views/3d/layers/SceneLayerWorker.js
Module parse failed: Unexpected token (5:673)
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
| See https://js.arcgis.com/4.24/esri/copyright.txt for details.
| */

Reason:

The new version of the ArcGIS API references the new version of ES2020 optional chaining and nullish coalescing, resulting in parsing errors in the old version of Webpack, so you need to install the appropriate dependencies or upgrade the framework.

Solution:

1. Download Dependencies

Download the corresponding dependencies through the command

npm install -D @babel/core @babel/plugin-proposal-nullish-coalescing-operator @babel/plugin-proposal-optional-chaining babel-loader

Or add the following codes in package.json, and then initialize npm install

 "@babel/core": "^7.18.9",
 "@babel/plugin-proposal-nullish-coalescing-operator": "^7.18.6",
 "@babel/plugin-proposal-optional-chaining": "^7.18.9",
 "babel-loader": "^8.2.5",

2. Add Configuration

Find the webpack.config.js file and add the following codes below

   module: {
     rules: [
       {
         test: /\.m?js$/,
         exclude: {
           and: [/node_modules/],
           not: [/@arcgis[\\/]core/]
         },
         use: {
           loader: "babel-loader",
           options: {
             plugins: [
               ["@babel/plugin-proposal-nullish-coalescing-operator", { loose: true }],
               ["@babel/plugin-proposal-optional-chaining", { loose: true }]
             ]
           }
         }
       }
     ]
   }

Note: If your project is using the vue1 framework, i.e. you can’t find the webpack.config.js file, then you need to configure the configureWebpack configuration item in the vue.config.js file.

3. Restart the project

[Chrome]: DevTools failed to load source map… (How to Solve)

In the vue project, it is clear that the prompt information output on the console has been turned off through the following configuration, but it will still be printed?

Vue.config.productionTip = false

Vue.config.devtools= false

Vue.config.debug= false

1. Problem Analysis:

This is because after a vue project is packaged, the Javascript source code is usually merged and shrunk to optimize the site to load faster and reduce bandwidth usage. The compressed script is a file mapped from the transformed source to the original source, which allows the browser to reconstruct the original source and display the reconstructed original source to the debugger. In turn, to enable the debugger to use the source mapping, a source mapping file is generated and included in the converted file as a comment pointing to the source mapping file, as follows:

//# sourceMappingURL=http://example.com/path/to/your/sourcemap.map

And when our vue project index.html or other entry interfaces to load some scripts into the project and packaged, these scripts will not produce the corresponding source mapping, but the mapping file (sourceMappingURL) is declared in the script, at this time the browser naturally throws an exception, so the console prints not the output of the project itself, but Chrome’s prompt!

2. Solution:

We just need to remove the above mentioned //# sourceMappingURL= xxxxxxx line from the corresponding statically introduced script, or download the corresponding source mapping file and place it in the directory where the corresponding script is located, depending on the boot version.

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

Vue error: 0308010C: digital envelope routes:: unsupported

This error is due to the recent release of OpenSSL 3.0 in node.js V17, which adds strict restrictions on allowed algorithms and key sizes, which may have some impact on the ecosystem.

Solution:

Method 1:

Open the terminal (press Jian win+R to pop up a window, enter cmd on the keyboard, and then press Enter) and paste these according to the instructions: (Not necessarily, I tried but it failed)

Linux & Mac OS (windows git bash)

export NODE_OPTIONS=--openssl-legacy-provider

Windows command prompt:

set NODE_OPTIONS=--openssl-legacy-provider

Method 2:

Try to uninstall Node.js 17+ and reinstall Node.js 16+, then restart
1. Install nvm management tools (first turn off 360 and other software, or a warning will pop up!)
1. Download the installation package from the official website: https://github.com/coreybutler/nvm-windows/releases, download: nvm-setup.exe
2. Start the nvm installation.
(1) double-click the nvm-setup.exe file, select “I accept …” that line, click next

(2) you can customize the path disk according to their own situation, the path does not appear spaces or no-English symbols (the path is best in the root directory of the path disk, such as C disk, D disk under the root directory), click next after the selection

(3) Select the installation location of node.js, you can customize the path disk according to your own situation, the path does not appear spaces or Chinese symbols (the path is best to create a new folder in the root directory of the path disk, such as the root directory under the C disk, D disk), select it and click next. (If node.js is already installed in the system, then cmd open the terminal, type where node, check the location of node, and select this file directory)

(4) The last step, click install to complete the installation

3. Verify if the installation is successful
Enter the command and control line window (win+R, type cmd).
Type nvm -v, the version number appears that is successful.

4. Install node js

(1) Enter the command line nvm ls available to view the available nodes.js version.


(2) Enter the command line nvm install node version number (for example: nvm install 16.17.0)

(3) After the installation is successful, enter the command line nvm use node version number (nvm use 16.17.0)
If an errorexit status 1: Ȩ �� ִ � д˲ ; Enter cmd -> Run as administrator (command prompt) -> Re enter nvm use

(4) Verify whether the command line node – v and npm – v are successful Whether the installation of js and the corresponding npm is successful. If the version number can be displayed, the installation is successful.

Tip:
1. Enter the command line nvm ls to view all the Node.js version numbers you installed and the currently selected the running version of node.js

(2) If you want to delete a node For the js version, enter the command line nvm uninstall node version number (for example: nvm uninstall 18.10.0) to delete the corresponding version

2. Restart the application, no error is reported at 0308010C

npm run dev

error: Vue Project lang=“less“ Error [How to Solve]

Error reason:

The version of the less-loader is too high. Uninstall and reinstall version 7.0

1. Install the less-loader command: npm install — save dev less loader less

Solution:

1. Uninstall command: npm uninstall — save less loader

2 The command to install version 7.0: npm install – D [email protected]

After executing the above command, continue to check the less-loader and less versions in the package.json file, the less-loader version has been reduced to 7.X. Just re-run the project without errors. If the version has not changed after installation, you need to manually change the less-loader and less versions in the package.json file to version 7.0

[Solved] React Error: ReactDOM.render is no longer supported in React 18.

Error message:

ReactDOM.render is no longer supported in React 18. Use createRoot instead. Until you switch to the new API, your app will behave as if it’s running React

 

ReactDOM.React 18 no longer supports rendering. Use createRoot instead. Before you switch to the new API, your application will behave as if it is running React 17

Reason:
React team has launched the latest version of 18.0, in which React 18 no longer supports ReactDOM.render

Console error:

Solution:
Use createRoot in the index.js file

import React from 'react'
import ReactDOM from 'react-dom'
import TopList from './TopList'

// Use createRoot
import { createRoot } from 'react-dom/client';
const container = document.getElementById('root')
const root = createRoot(container)
root.render(<TopList/>)

// report error
// ReactDOM.render( < TopList /> , document.getElementById('root'))

 

vue-cli: Syntax Error: Thread Loader [How to Solve]

vue-cli: Syntax Error: Thread Loader

Syntax Error: Thread Loader(Worker 1)

Cannot read properties of undefined (reading 'options')

framework: @vue/cli@5 + [email protected] + ts

vue-cli uses wokrer-loader to load a web woker, using npm run build has a high chance of failing to package it with the error reported above.

There is a conflict between thread-loader and worker-loader.

Solution:

vue.config.js configure parallel: false . Build the official environment with thread-loader turned off.

node.js yarn Error: SyntaxError: Unexpected string [How to Solve]

Error log:

exec "/home/latte-with-ice/.nvm/versions/node/v16.17.0/bin/node" "/home/latte-with-ice/.nvm/versions/node/v16.17.0/bin/yarn" "$@"
     ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^

SyntaxError: Unexpected string
    at Object.compileFunction (node:vm:360:18)
    at wrapSafe (node:internal/modules/cjs/loader:1055:15)
    at Module._compile (node:internal/modules/cjs/loader:1090:27)
    at Object.Module._extensions..js (node:internal/modules/cjs/loader:1180:10)
    at Module.load (node:internal/modules/cjs/loader:1004:32)
    at Function.Module._load (node:internal/modules/cjs/loader:839:12)

Error Cause.
There are two types of yarn installed by system apt install yarn and npm install yarn

Solution:

  1. Uninstall system yarn first: sudo apt-get remove yarn && sudo apt-get
  2. [can not do] uninstall yarn from node: npm uninstall -g yarn
  3. Reinstall yarn: npm install -g yarn
  4. Re-execute the program and it will work again

[Solved] Failed to Create Vue Scaffold Error: spawn yarn ENOENT

Today, when I use yarn, it reports the error as the title.

Error reason:

The default package management is set to yarn, but yarn is not installed

Therefore, after uninstalling, you should:

1. Open the C drive, in the C drive, open the users folder, then search for the file named .vuerc on the right side.

2. Open the file, find the packageManager property, you can see that the default value you configured is yarn, change its value to npm.

If you need to install yarn, you can:

In the command line window, directly enter the commandnpm install yarnto installyarn.