Tag Archives: javascript

How to Solve Converting circular structure to JSON‘ Error

‘Converting circular structure to JSON‘ error

Problem Description: the project needs to transfer strings to the background, so the object needs to be converted,
but JSON is used There is a bug of circular reference in the object during stringify (data) conversion, and we can’t find out where the copy is wrong.

The plug-in CircularJSON is used here to ignore circular references and force conversion

// install
npm install -S circular-json    
// import
import CircularJSON from 'circular-json'
// conversion
let data= CircularJSON.stringify(data)
let data= CircularJSON.parse(data)

[Solved] Element form method resetfields() error: vue.runtime.esm.js?2b0e:1888 TypeError: Cannot read properties of undefined (reading ‘indexOf’)

Element form method resetfields() error

Codes:

// Form Reset
export function resetForm(refName) {
    // The purpose of adding the if condition is to solve the problem of non-existent objects in the console
    if (this.$refs[refName] ) {
        this.$refs[refName].resetFields();
    }
}

 

Error Messages:

vue.runtime.esm.js?2b0e:1888 TypeError: Cannot read properties of undefined (reading 'indexOf')
    at VueComponent.resetField (element-ui.common.js?5c96:23528)
    at eval (element-ui.common.js?5c96:22945)
    at Array.forEach (<anonymous>)
    at VueComponent.resetFields (element-ui.common.js?5c96:22944)
    at VueComponent.resetForm (ruoyi.js?c38a:51)
    at VueComponent.reset (index.vue?6ced:2165)
    at VueComponent.handleCopy (index.vue?6ced:2504)
    at click (index.vue?e6ab:1003)
    at invokeWithErrorHandling (vue.runtime.esm.js?2b0e:1854)
    at VueComponent.invoker (vue.runtime.esm.js?2b0e:2179)

 

Solution:

// Form reset
export function resetForm(refName) {
// The purpose of adding the if condition is to solve the problem of non-existent objects in the console
    if (this.$refs[refName] !== undefined) {
        this.$refs[refName].resetFields();
    }
}

 

Another possibility for this type of problem is that the prop is not assigned a value, and a similar problem can occur:

 <el-form-item label="Self-pickup offer">
              <el-input
                v-model="form.selfOffer"
                :clearable="true"
                :disabled="disabled"
                placeholder="Please enter a discount price"
                @input="inputCityFloat"
              >
                <template slot="append">Yuan</template>
              </el-input>
            </el-form-item>

 

[Solved] Router Pinia error: getActivePinia was called with no active Pinia. Did you forget to install pinia

Router Pinia error: getActivePinia was called with no active Pinia. Did you forget to install pinia
Solution:1. First create the store TS file

import { createPinia } from "pinia";
const pinia = createpinia();
export default pinia;
Instead of the kind of form created in main.ts.

2. Import in Mian.ts

// Alternative to the traditional direct import in main.ts
import { createApp } from "vue"
import App from './App.vue'
import pinia from "./store/store"

const app = createApp(App)
app.use(pinia)

3. Using Pinia in router.ts

import { createRouter, createWebHistory } from 'vue-router'
import pinia from '../store/store' 
import { useUser} from "../store/useUser"
const store = useUser(pinia)  // Make sure to pass in pinia here
console.log(store) 
After that, you can use the methods and properties of the store as you like

[Solved] React Click the Event to Modify the State Value Error

React Click the Event to Modify the State Value Error

Make a mistake.

Cannot read properties of undefined (reading ‘setstate’) when updating the state value

import React from "react";
class MyComponent extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      text: "Hello",
    };
    //Modify the codes behind this line
    
    //Modify the codes before this line
  }
  handleClick() {
    this.setState({
      text: "You clicked!",
    });
  }

  render() {
    return (
      <div>
        {/* Modify the codes behind this line */}
        <button onClick={this.handleClick}>Click Me</button>
        {/* Modify the codes before this line */}
        <h1>{this.state.text}</h1>
      </div>
    );
  }
}
export default MyComponent;

An error is reported when updating the state value,

Cannot read properties of undefined (reading ‘setState’)

It seems that the direction of this needs to be changed. I don’t quite understand it.

    // Modify the codes behind this line
    this.handleClick = this.handleClick.bind(this);
    // Modify the codes before this line

Value update after clicking

Another method is to modify it into an arrow function

  handleClick = () => {
    this.setState({
      text: "You clicked!",
    });
  };

The modified value can still be realized

React: How to Solve Web3 import error

How to Solve Web3 import error

Error Messages:
Solution:
Web3 and Create-react-app
If you are using create-react-app version >=5 you may run into issues building. This is because NodeJS polyfills are not included in the latest version of create-react-app.
Solution:
Install react-app-rewired and the missing modules
1. Down the Dependency below
yarn：
If you are using yarn:

yarn add --dev react-app-rewired process crypto-browserify stream-browserify assert stream-http https-browserify os-browserify url buffer

npm：
If you are using npm:

npm install --save-dev react-app-rewired crypto-browserify stream-browserify assert stream-http https-browserify os-browserify url buffer process

Create config-overrides.js in the root of your project folder with the content
2. Create config-overrides.js file in the main directory:

const webpack = require('webpack');

module.exports = function override(config) {
    const fallback = config.resolve.fallback || {};
    Object.assign(fallback, {
        "crypto": require.resolve("crypto-browserify"),
        "stream": require.resolve("stream-browserify"),
        "assert": require.resolve("assert"),
        "http": require.resolve("stream-http"),
        "https": require.resolve("https-browserify"),
        "os": require.resolve("os-browserify"),
        "url": require.resolve("url")
    })
    config.resolve.fallback = fallback;
    config.plugins = (config.plugins || []).concat([
        new webpack.ProvidePlugin({
            process: 'process/browser',
            Buffer: ['buffer', 'Buffer']
        })
    ])
    return config;
}

3.Modify package.json
Within package.json change the scripts field for start, build and test. Instead of react-scripts replace it with react-app-rewired
before:
Before:

"scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test",
    "eject": "react-scripts eject"
},

After change:

"scripts": {
    "start": "react-app-rewired start",
    "build": "react-app-rewired build",
    "test": "react-app-rewired test",
    "eject": "react-scripts eject"
},

4.Close the warning in the terminal
The missing Nodejs polyfills should be included now and your app should be functional with web3.
If you want to hide the warnings created by the console:
In config-overrides.js within the override function, add:
Add the following code in override method of config-overrides.js

config.ignoreWarnings = [/Failed to parse source map/];

The above contents are the processing methods on Web3 GIT

[Solved] VUE3 Error: Error: ENOSPC: System limit for number of file watchers reached 

(env) [root@VM-20-16-centos vue_test2]# npm run serve

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

 INFO  Starting development server...
[10%] building (0/0 modules)
node:internal/errors:464
    ErrorCaptureStackTrace(err);
    ^

Error: ENOSPC: System limit for number of file watchers reached, watch '/root/work/vue3/vue_test2/public'
    at FSWatcher.<computed> (node:internal/fs/watchers:244:19)
    at Object.watch (node:fs:2251:34)
    at createFsWatchInstance (/root/work/vue3/vue_test2/node_modules/chokidar/lib/nodefs-handler.js:119:15)
    at setFsWatchListener (/root/work/vue3/vue_test2/node_modules/chokidar/lib/nodefs-handler.js:166:15)
    at NodeFsHandler._watchWithNodeFs (/root/work/vue3/vue_test2/node_modules/chokidar/lib/nodefs-handler.js:331:14)
    at NodeFsHandler._handleDir (/root/work/vue3/vue_test2/node_modules/chokidar/lib/nodefs-handler.js:567:19)
    at processTicksAndRejections (node:internal/process/task_queues:96:5)
    at async NodeFsHandler._addToNodeFs (/root/work/vue3/vue_test2/node_modules/chokidar/lib/nodefs-handler.js:617:16)
    at async /root/work/vue3/vue_test2/node_modules/chokidar/index.js:451:21
    at async Promise.all (index 0)
Emitted 'error' event on FSWatcher instance at:
    at FSWatcher._handleError (/root/work/vue3/vue_test2/node_modules/chokidar/index.js:647:10)
    at NodeFsHandler._addToNodeFs (/root/work/vue3/vue_test2/node_modules/chokidar/lib/nodefs-handler.js:645:18)
    at processTicksAndRejections (node:internal/process/task_queues:96:5)
    at async /root/work/vue3/vue_test2/node_modules/chokidar/index.js:451:21
    at async Promise.all (index 0) {
  errno: -28,
  syscall: 'watch',
  code: 'ENOSPC',
  path: '/root/work/vue3/vue_test2/public',
  filename: '/root/work/vue3/vue_test2/public'
}

Solution:

Execute the following command

echo fs.inotify.max_user_watches=524288 | sudo tee -a /etc/sysctl.conf && sudo sysctl -p

[Solved] SyntaxError: E:\IdeaProject\src\main.js: Identifier ‘ElementPlus‘ has already been declared

Problems encountered

 

Module build failed (from .de_modules/babel-loaderb/index.js):
SyntaxError: E:\IdeaProjects\![Please add image description](https://img-blog.csdnimg.cn/c9d36e8ab6984fc390345ad4d7129c70.png)
springboot_vue\src\main.js: Identifier 'ElementPlus' has already been declared. (8:7)

Solution:
by checking the project source code, it is found that the reason for this error is that elementplus has been imported twice. The solution is to delete one!

The effects after the solution are as follows:

Summary

As a back-end R & D personnel, I think it is necessary to have a little understanding of the front-end. Although I may not take the road of R & D in the future, I feel that with the existence of the epidemic, the reduction of Posts and the improvement of academic qualifications, the internal volume may become more and more serious, and the iron still needs to be hard! Choose a road and stick to it. At least the result won’t be too bad. Come on~

[Solved] ESLint: Parsing error: Unexpected token(prettier/prettier)

eslint HTML file error after introducing prettier: parsing error: unexpected token (prettier/prettier)

Cause of problem

The parser of prettier is not configured correctly. (I don’t know why it needs to be configured separately. It should have default configuration for all corresponding file types)

Solution

Modify .prettierrc.json , add overides , and configure the parser of HTML. Configurable item: Reference

{
  "printWidth": 120,
  "singleQuote": true,
  "bracketSpacing": true,
  "jsxBracketSameLine": true,
  "htmlWhitespaceSensitivity": "ignore",
  "overrides": [
    {
      "files": "*.html",
      "options": {
        "parser": "html"
      }
    }
  ]
}

[Solved] Errors: 1 http://eslint.org/docs/rules/quotes…elementUI Import Error

Introduction of elementui

Add the following in main.js of src:

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

Introduce error reporting

Errors:
  1  http://eslint.org/docs/rules/quotes

You may use special comments to disable some warnings.
Use // eslint-disable-next-line to ignore the next line.
Use /* eslint-disable */ to ignore all warnings in a file.

Solution:

In the build/webpack.base.conf.js file, comment out or remove the rule about eslint in: module->rules

Then re-execute the command: npm run dev

It’s normal