Category Archives: JavaScript

[Solved] Internal Error: EPERM: operation not permitted, open

When installing yarn on nodejs (my version: 16.17), after executing the command: corepack enable, I got an error: Internal Error: EPERM: operation not permitted, open 'Y:\nodejs-v16.17.0-x64\pnpm, The operation is not allowed, I thought of the previous execution of rm -rf /* with linux normal user will also prompt not allowed to execute the operation, and change to root (administrator) account to have higher privileges to execute the command, so I guess it should be the same problem, so I tried to run the cmd command window as administrator, and execute the command: corepack enable again, it succeeded It worked:

Error in nextTick: “TypeError: Cannot set properties of undefined (setting ‘checked‘)“

Error in nextTick: “TypeError: Cannot set properties of undefined (setting ‘checked‘)“

When you see nextTick, do you think of $nextTick?

This is exactly the kind of error that needs to be solved by using $nextTick

Vue performs asynchronously when updating the DOM. As soon as a data change is heard, Vue will open a queue and buffer all the data changes that occur in the same event loop, which means that a value assigned by vue will not take effect immediately, but will be updated when the next event is triggered. callback)

$nextTick is a delayed callback that is executed after the next DOM update loop. If you use $nextTick after modifying the data, you can get the updated DOM in the callback

[Solved] Error in event handler for “el.form.blur“: “RangeError: Maximum call stack size exceeded“

The following errors were encountered during form verification; This error will be reported when you lose focus or click to verify

If you look at the examples in the ElementUI document, you will find that they implement custom rules, setTimeout is used to limit the number of times the rules are called. In your case, once the field has a value (ergo, if is false), your else block will be executed again and again until it exceeds the maximum call stack size. You can solve this problem by restricting calls to custom rules

From: Javascript – understanding why element UI event handlers are triggering rangeerror: maximum call stack size exceeded- Stack Overflow

npm install error code EINTEGRITY sha1 [How to Solve]

npm install error code EINTEGRITY sha1

when other environment codes are packaged into another environment, the NPM install installation dependency reports an error.

13023 error code EINTEGRITY
13024 error sha1-LgxPksfBBzrHtltHrDbWAuirTr8= integrity checksum failed when using sha1: wanted sha1-LgxPksfBBzrHtltHrDbWAuirTr8= but got sha512-mwqeW5XsA2qAejG46gYdENaxXjx9onRNCfn7L0duuP4hCuTIi/QO7PDK07KJfp1d+izWPrzEJDcSqBa0OZQriA== sha1-stEE/g2Psnz54KHNqCYt04M8bKs=.

Solution:

rm -rf node_modules package-lock.json
npm cache clean --force
npm install --verbose

Error: error:0308010C:digital envelope routines::unsupported [How to Solve]

Error message:

When the front-end project is started (npm run dev) and packaged (npm run build:prod), the following error is reported:

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 
....
 
at FSReqCallback.readFileAfterClose [as oncomplete] (node:internal/fs/read_file_context:68:3) {
  opensslErrorStack: [ 'error:03000086:digital envelope routines::initialization error' ],
  library: 'digital envelope routines',
  reason: 'unsupported',
  code: 'ERR_OSSL_EVP_UNSUPPORTED'
}

Cause of problem:

The reason for this is that nodeJs V17 released OpenSSL3.0 with stricter restrictions on the algorithm and secret key size, which did not affect versions before nodeJs v17, but this error will occur in V17 and later versions.

Solution (windows only):

Add SET NODE_OPTIONS=--openssl-legacy-provider in the scripts of the package.json 
Before:
"scripts": {
    "dev": "vue-cli-service serve",
    "build:prod": "vue-cli-service build"
  },
  
Added:
"scripts": {
    "dev": "SET NODE_OPTIONS=--openssl-legacy-provider && vue-cli-service serve",
    "build:prod": "SET NODE_OPTIONS=--openssl-legacy-provider && vue-cli-service build"
  },


Note: If the node version in the team is not the same, do not submit the package.json.
My v18.8.0 does not add this directive, my colleague is v14.17.3, adding this directive will report an error

[Solved] Node Create Express Project Error: Failed to lookup view “error“ in views directory

Node create new Express project prompt an error: Failed to lookup view "error" in views directory

1. Use the EJS engine mode to report an error prompt FaiLED to lookup View “ERROR” in Views Directory

2. Solution
Add error.ejs to Views

<h1><%= message %></h1>
<h2><%= error.status %></h2>
<pre><%= error.stack %></pre>

3. ejstemplate engine needs to be supplemented

ERROR Error: [@ant-design/icons-angular]:the icon XXX does not exist or is not registered.

Error Message:

ERROR Error: [@ant-design/icons-angular]:the icon XXX does not exist or is not registered.

 

Solution:

Adding startup services
nz-icon-register.service.ts

import { APP_INITIALIZER, Injectable } from '@angular/core';
import { NzIconService } from 'ng-zorro-antd/icon';

export const SvgIcons = [
    // nzType='plus'
    {
        namespace: 'nz:plus',
        literal: '<svg viewBox="64 64 896 896" focusable="false" fill="currentColor" width="1em" height="1em" data-icon="plus" aria-hidden="true"><defs><style></style></defs><path d="M482 152h60q8 0 8 8v704q0 8-8 8h-60q-8 0-8-8V160q0-8 8-8z"></path><path d="M176 474h672q8 0 8 8v60q0 8-8 8H176q-8 0-8-8v-60q0-8 8-8z"></path></svg>',
    },
];

@Injectable({
    providedIn: 'root'
})
export class NzIconRegisterService {

    constructor(
        private nzIconService: NzIconService,
    ) { }

    registeIcons(): void {
        SvgIcons.forEach(icons => {
            this.nzIconService.addIconLiteral(icons.namespace, icons.literal);
        })
    }
}

function factory(service: NzIconRegisterService ) {
    return () => service.registeIcons(); 
}

export const ICON_REGISTER_PROVIDES = [
    NzIconRegisterService ,
    {
        provide: APP_INITIALIZER,
        useFactory: factory,
        deps: [ NzIconRegisterService ],
        multi: true,
    }
];

Add the startup service to the startup item
app.module.ts

import { BrowserModule } from '@angular/platform-browser';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
import { NgModule } from '@angular/core';
import { ICON_REGISTER_PROVIDES } from '@core/services/nz-icon-register.service';

@NgModule({
  declarations: [AppComponent],

  imports: [
    AppRoutingModule,
    BrowserModule,
    HttpClientModule,
    // ...other modules
  ],
  providers: [
    ICON_REGISTER_PROVIDES,
  ],
  bootstrap: [AppComponent],
})
export class AppModule {}

[Solved] error:chunkgroup.addoptions:no option merge strategy for name

“webpack”: “^ 5.72.0” error:

/Users/guojianbo/Documents/xxx/node_modules/webpack/lib/ChunkGroup.js:119
					throw new Error(
					      ^
Error: ChunkGroup.addOptions: No option merge strategy for name
    at Entrypoint.addOptions (/Users/guojianbo/Documents/xxx/node_modules/webpack/lib/ChunkGroup.js:119:12)

Solution:

webpack.config.js
before modification:

module.exports = {
	entry: {
	    'abc-def': "./src/js/abc-def.js",
	    'qwe-rty': "./src/js/qwe-rty.js",
	}
}

After modification

module.exports = {
	entry: {
	    'my-abc-def': "./src/js/abc-def.js",
	    'my-qwe-rty': "./src/js/qwe-rty.js",
	}
}

That is, add a prefix to the entry name to prevent conflicts with the internal chunk names of webpack packages

[Solved] Vue Import swiper.css Error: Module not found…

The error information is as follows: 

Module not found: Error: Package path ./swiper.css is not exported from package C:\Users\yoyang\Desktop\vue\test2022\node_modules\swiper (see exports field in C:\Users\yoyang\Desktop\vue\test2022\node_modules\swiper\package.json)

 

The reason for the problem is that vue2 has poor compatibility with the latest version of swipe. You only need to reinstall the old version of swipe, such as [email protected]

Solution:

1. Download the old version of swiper

npm i [email protected] --save

2. Restart project

npm run serve

3. Import swiper

import Swiper from 'swiper/bundle'
import 'swiper/swiper-bundle.css'

In this way, the wiper component can be used normally

<template>
  <div class="swiper-container yang">
    <div class="swiper-wrapper">
      <slot></slot>
    </div>
    <div class="swiper-pagination"></div>
  </div>
</template>

<script>
import Swiper from 'swiper'
import 'swiper/swiper.min.css'

export default {
  mounted () {
    new Swiper('.yang', {
      pagination: {
        el: '.swiper-pagination'
      },
      loop: this.loop,
      autoplay: {
        delay: 2500,
        disableOnInteraction: false
      }
    })
  }
}
</script>

[Solved] el-date-picker Error: Avoid mutating a prop directly since the value will be overwritten whenever the parent component re-renders.

Error Messages:
[Vue warn]: Avoid mutating a prop directly since the value will be overwritten whenever the parent component re-renders. Instead, use a data or computed property based on the prop’s value. Prop being mutated: “placement”
Reason: Version issue
Solution:
1. Downgrade the version.
2. Add align=”center” in el-date-picker.

<el-date-picker
          :v-model="time"
          type="daterange"
          range-separator="to"
          start-placeholder="Start Date"
          end-placeholder="End date"
        >
</el-date-picker>