Tag Archives: front end

npm ERR Error: EPERM:operation not permitted, rename

npm ERR! Error: EPERM: operation not permitted, rename

Problem background: Recently, there was a problem with the packaging of the project. I thought it was caused by the node version problem, so I tossed and switched several versions, which led to the problem of NPM

    when NPM is installed, the following error is reported (the picture refers to someone else’s, infringed or deleted). There are many reasons for this error. The specific reason is that the node version and windows version are intertwined, which makes it impossible to find out exactly (I hope some big guys can find it)
    in addition, the time when this problem occurs is also different, some are during installation, Some are during run dev, and some are during packaging.
    after encountering problems, the first is a variety of search solutions. The commonly used solutions are probably the following:

    Run CMD as administrator

    Because the system prompts that the permission is not enough, I am now an ordinary user. Then I run as an administrator. The idea is feasible
    see: https://blog.csdn.net/Running_ Fe/article/details/81629330

    Delete the. Npmrc file in the user directory

    This scheme can solve some problems to a certain extent

    Clear cache + reinstall: NPM clear cache — force, NPM install

    see: https://www.cnblogs.com/maycpou/p/12080814.html

    Delete the file mentioned in the error message

    Some people say that this solution can solve the problem, but I can’t find the file
    see: https://blog.csdn.net/LJJONESEED/article/details/119926728

    Close all editors that reference the current project

    Because his error message says “the current file may be open in another editor”, close the editor, clear the cache, and then reload

    Finally, a post in stack overflow is attached. The discussion below this post is very intense. There are many schemes. If you are interested, you can look

    see: https://stackoverflow.com/questions/39293636/npm-err-error-eperm-operation-not-permitted-rename#

    Please note that
    I hope some big guys can give the real reason for this problem and hold their fists

Syntax Error: Error: Node Sass version 6.0.1 is incompatible with ^4.0.0.

Problem: version correspondence
solution:

    uninstall node sass 

    npm uninstall node-sass
      install version 4.14.1 

      npm install [email protected]
        network problems may occur during installation. Taobao image can be used. It is recommended to use the following methods. It is not recommended to permanently use Taobao image
        single use 

        npm install --registry=https://registry.npm.taobao.org
          if you still cannot install, you can find the corresponding version number in the package.json file and modify it directly. The version number I use here is
          node sass: 4.14.1
          sass loader: 7.1.3
          generally, the idea will remind the update dependency in the lower right corner, otherwise the node will be deleted directly_ Download the modules folder again

          Reference link 1
          reference link 2

[Solved] Vue item packaging error: Failed to load resource: the server responded with a status of 404 (Not Found)

After NPM run build is executed, a dist folder will be generated, index.html will be opened, and an error will be reported on the console

As shown in the figure below:

This is because the correct path cannot be found, resulting in an error.

Solution:

1. In the root directory, create a new vue.config.js file. Of course, if any, ignore this item;

2. In vue.config.js, change publicpath: “/” to   Publicpath: “. /”, then repackage and NPM run build.

publicPath: “/”          =====>>>>>>>>       publicPath: “./”

For the location of writing, you can refer to the following code:

module.exports = {
  devServer: {
    port: 8080,
    open: true
  },
  lintOnSave: false,
  publicPath: "./",
  outputDir: "dist",
  assetsDir: "static",//Set the directory where the static resources (js, css, img, fonts) generated by the package will be placed.
  indexPath: 'index.html'//Used to set the storage location of the index.html file generated by the package
}

How to Solve Tabbarview error in Column 2021

reason

The tabbarviewcomponent occupies as much space as the parent component. Generally, the outer layer of this layout is scrollable, similar to singlechildscrollview, but there is no clear height constraint in the column, that is, infinite height, so an error is reported.

Solution:

1. Fixed height

It directly solves the problem locally, but there is a big disadvantage. The components loaded by tabbarview may have different heights, so the predetermined height should be their maximum height, and the layout is not good-looking.

SingleChildScrollView(
  child: Column(
    children: [
      MyTabBar(),
     SizedBox(
     	height: 500,
    	child: TabBarView(
    		children:[
  				MyTabView1(),
  				MyTabView2(),
    		],
    	),
     ),
    ],
  ),
)

2. Do not use the tabbarview component

It is recommended to use the indexedstack component instead. The disadvantage is that it lacks the sliding animation of the original tabbarview component, but it can be customized with the animatedswitcher component. Click to learn more

SingleChildScrollView(
  child: Column(
    children: [
      MyTabBar(),
      IndexedStack(
      	index: currentIndex, //currentIndex is the value of my example, in reality it may come from TabController, or Provider, etc.
      	children:[
      		MyTabView1(),
  			MyTabView2(),
      	],
      ),
     ),
    ],
  ),
)

3. To be continued

[Solved] Vuepress Package Error: document is not defined

Write a description document for the component library, but an error is reported when packaging and deployment: the document is not defined. You can only find out the reason after checking the data, because vuepress is rendered through the node.js server when packaging, and an error is reported because there is no document object in node.js. The final solution is as follows:. Vuepress/enhanceapp.js folder

import ElementUI from 'element-ui'
import 'element-ui/lib/theme-chalk/index.css'
//The way it was introduced before - will cause an error to be reported
// import CommonUI from 'vue-common-ui'
import 'vue-common-ui/lib/vue-common-ui.css'
export default async ({ Vue }) => {
  if (typeof process === 'undefined') {
    Vue.use(ElementUI) 
    // Solve the problem of introducing your own components with the error document not found
    Vue.mixin({
      mounted() {
        import('vue-common-ui').then(function(m) {
          Vue.use(m.default)
        })
      }
    })
  }
}

After modifying the introduction method of Vue common UI components, the online address of the component library is normally packaged

[Solved] Console error: syntax error: illegal return statement

Problem Description:

When you run the code containing the return statement directly in the script tag or in the browser console, an error is reported:

SyntaxError: Illegal return statement

if (!NaN) {
	console.log('went into the conditional statement')
	return "Ollie gives!"
}

reason:

In JavaScript, the return statement can only be placed in the function, otherwise the following error will pop up.

SyntaxError: Illegal return statement

Solution:
package the modified code block in function.

(function () {
	if (!NaN) {
		console.log('went into the conditional statement')
	return "Ollie gives!"
	}
})()

// Run results 
It goes into the conditional statement
"Ollie gives!"

[Solved] Uncaught (in promise) Error: Avoided redundant navigation to current location:

Add the following code to the routing file   router/index.js

//Solve the problem that vue-router in the navigation bar of ElementUI reports an error when repeatedly clicking the menu in version 3.0 or above
const originalPush = Router.prototype.push
Router.prototype.push = function push (location) {
  return originalPush.call(this, location).catch(err => err)
}

Good position!!!!!

Type

[Solved] AES encryption in ie11 results in an error (missing ‘)‘

Ie11 error reporting details

Analysis

Through finding the problem, it is found that the problem occurs in the crypto JS package. Because this error is reported only in ie, the page cannot be loaded. It is thought that the syntax in this package is ie incompatible

Solution:

Let this package be Babel translated

chainWebpack(config) {
    // For IE compatibility, the js under crypto-js and some node_modules have to be babel-translated
    config.module
      .rule('js')
      .exclude.clear().end()
      .include
      .add(resolve('src'))
      .add(resolve('node_modules/@quanzhiFE/qz-frontend-biz/src'))
      .add(resolve('node_modules/element-ui/lib'))
      .add(resolve('node_modules/crypto-js'))
      .end()

  }

[Solved] Vue Error: Uncaught TypeError: Vue.createApp is not a function

Project scenario:

Today, in the process of reviewing the basis of Vue, I tried to introduce and use Vue with traditional HTML and native memory, and then found that I really pulled it. The memory is not only vague, but also confused. Vue2 mixed with vue3 is there! Next, let’s see how to report the error.

Problem Description:

The HTML structure is as follows:

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <script src="https://cdn.jsdelivr.net/npm/[email protected]"></script>
  </head>
  <body>
    <div id="app"></div>
  </body>
  <script>
    const app = Vue.createApp({
        data() {
            return {
                message: '666'
            }
        },
        template: "<h2>{{message}}</h2>"
    })
    app.mount("#app")
  </script>
</html>

Good guy, 666 didn’t render. Just click and report me the error
Uncaught TypeError: Vue.createApp is not a function。
I’m still wondering. I think it’s ok if createapp creates a Vue application and mount it to the node?Why, vue.createapp is not available yet

Cause analysis:

Later, I read the document and found that I had mixed up vue.createapp and mount, which are the writing methods of vue3, but I introduced vue2
it is clearly written on the official website. Vue2 uses new and is an EL mount node
vue2 is written as follows:

 var app = new Vue({
   el: '#app',
   data: {
     message: '666',
   },
   template: '<h2>{{message}}</h2>',
});

The following is the way vue3 is written

 const app = Vue.createApp({
     data() {
         return {
             message: '666'
         }
     },
     template: "<h2>{{message}}</h2>"
 })
 app.mount("#app")

Taro Error: chunk common [mini-css-extract-plugin] Conflicting order between: ……

Error Messages:

chunk common [mini-css-extract-plugin]
Conflicting order between:
css ./node_modules/css-loader/dist/cjs.js??ref–2-oneOf-0-1!./node_modules/vue-loader/lib/loaders/stylePostLoader.js!./node_modules/@tarojs/mini-runner/node_modules/postcss-loader/dist/cjs.js??ref–2-oneOf-0-2!./node_modules/@tarojs/mini-runner/node_modules/less-loader/dist/cjs.js??ref–2-oneOf-0-3!./node_modules/vue-loader/lib??vue-loader-options!./src/components/place-holder/index.vue?vue&type=style&index=0&lang=less&css ./node_modules/css-loader/dist/cjs.js??ref–2-oneOf-0-1!./node_modules/vue-loader/lib/loaders/stylePostLoader.js!./node_modules/@tarojs/mini-runner/node_modules/postcss-loader/dist/cjs.js??ref–2-oneOf-0-2!./node_modules/@tarojs/mini-runner/node_modules/less-loader/dist/cjs.js??ref–2-oneOf-0-3!./node_modules/vue-loader/lib??vue-loader-options!./src/components/popup-scroll/index.vue?vue&type=style&index=0&lang=less&

 

Solution: It took a long time to find out that it was caused by the wrong order of introduction of components in a file, the pit.
Error example

<template>
	<view>
			<B/>
			<A/>
	</view>
</template>
<script>
		import A from "./components/a";
		import B from "../components/b";
</script>

Correct example

<template>
	<view>
			<B/>
			<A/>
	</view>
</template>

<script>
		import B from "../components/b";
		import A from "./components/a";
</script>