Tag Archives: javascript

Antdesignvue autocomplet completes the problem of repeated error reporting

If the data IDs are different, and there are multiple identical name values or multiple identical Title values, an error will be reported
just do it

    <a-auto-complete
      v-model="ruleForm.companyId"
        placeholder="Please Input"
        optionLabelProp="label"
        @select="onSelect"
        @change="onChangeStore"
      >
        <template slot="dataSource">
          <a-select-option
            v-for="item in dataSource"
            :key="item.id"
            :value="item.id + ''"
            :label="item.name"
          >
            {{ item.name }}
          </a-select-option>
        </template>
    </a-auto-complete>

Vue installation @ Vue/cli error: npmerr gyp err

At home on weekends, I want to install Vue on the local computer, but I always report the error of ‘gyp’. All kinds of Baidu attempts always fail until I see an explanation: installing @ Vue/cli reports the error npmerr gyp err
(intrusion and deletion)

Sort out:
1. First delete three Vue related files in the local folder directory C:// user/xxx/appdata/roaming/NPM
2. Switch the NPM image source of Taobao back to the initial image source of NPM:

https://registry.npmjs.org/
npm config set registry https://registry.npmjs.org/

Then run NPM install - G @ Vue/cli and wait.

[Solved] Uni.createintersectionobserver Error: Uncaught TypeError: Cannot read property ‘bottom’ of null

Error content

Uncaught TypeError: Cannot read property 'bottom' of null
    at a (chunk-vendors.js:319)
    at chunk-vendors.js:319
    at Array.forEach (<anonymous>)
    at IntersectionObserver.s.<computed>.IntersectionObserver.root (chunk-vendors.js:319)

Cause
the listening element cannot be found
PS: it seems that it only appears from the H5 platform

Solution
in the hide and unload life cycle of the page, cancel listening to elements

onHide:function(){
	this.observer.disconnect();
},
onUnload: function(){
	this.observer.disconnect();
},

Judge whether the element exists during listening, and clear the last listening

Vue.prototype.$lazyImg = function(fn){
	this.observer.disconnect();//The previous ones must be cleared. Otherwise, elements that have been loaded will still be listened to, or if the listened to elements disappear, an error will be reported
	uni.createSelectorQuery().in(this).selectAll('.lazy').boundingClientRect(data => {
		if(data.length > 0){//If there is no lazy element on the page, it will report an error directly, which is really fucking outrageous!
			this.observer.observe('.lazy', (res) => {
				if(res.intersectionRatio > 0){//sometimes, intersectionRatio is undefined
					fn(res.dataset)
				}
			})
		}
	}).exec();
}

Vue project reports an error on ie11 white screen. Script1002: syntax error

Problem phenomenon

The project is a front-end project built with Vue/cli3 scaffold, and Vue version is 2.6.10.

Ie11 error reporting problems are as follows:

  (there was no screenshot in the error report at that time, but someone else’s picture was used)

 

It’s annoying that there’s no way to check mistakes like this

Baidu a pile, all copy to copy, the key has not been able to solve the problem, shit! Omnipotent Google up

  In fact, this problem is obviously a syntax error, that is, the problem that ie does not support, ie garbage

Since it’s a syntax problem, it’s a compilation problem. Let’s directly compile the corresponding package, but which package is it

Here’s the point: when you click the error message, you will find that the place where the breakpoint is is the place where the error is reported. That must be the problem here, but this is the compiled code. How to check which package is a headache!

When I was having a headache, I found that the comment above was the name of the package???

It’s like discovering a new world

It’s him. This picture is not my error information. My error information is

./node_modules/[email protected]@js-base64.js

Since the package with the problem is found, specify that it be compiled; Using webpack

Directly configure the compiled code in vue.config.js

transpileDependencies: [
    /[/\\]node_modules[/\\][email protected]@js-base64[/\\]/,
 ],

Then directly NPM run serve

be accomplished! It’s done! go off work!

After Vue is packaged, a blank page appears, an error is reported in the resource request, and there is no error handling scheme

1、 A blank page appears and an error is reported

        Scheme I:

                 1: The path of JS and CSS resources is incorrect

                 Solution: add assetspublicpath in config/index.js: ‘/’   Change to assetspublicpath: ‘. /’  

                 2: Error in background image in CSS

                 Solution: add a line of code in build/utils.js   publicPath:’../../’  

        Scheme 2: some people may create Vue basic projects through hbuilder. There are no files in scheme 1 in the directory. Then you can try the scheme at this time. It’s easy to use on my side. I’m not sure everyone is effective.

                Solution: create the vue.config.js file in the project root directory

 

  The contents of the document are as follows:

module.exports = {
    publicPath : './'
}

2、 Blank page, no resource error

        At this time, the problem may be caused by the routing mode

  history :

The new pushstate () and replacestate () methods in HTML5 history interface are utilized. (specific browser support is required) these two methods are applied to the browser’s history stack. On the basis of the existing back, forward and go, they provide the function of modifying the history. Only when they perform modification, although the current URL is changed, the browser will not immediately send a request to the back end.

Solution:

The default route of Vue is hash mode. You can modify it to hash. Or directly comment out mode: ‘history’,

Conclusion: the above is the relevant information I know. If any boss knows other questions, you can leave a message and learn together.

 

An error occurs when es logstash is installed and running

Error message:

Expected one of [ \\t\\r\\n], \”#\”, \”input\”, \”filter\”, \”output\” at line 1, column 1 (byte 1)

Logstash run command:./logstash – f config MySQL/

SQL configuration file:/home/ES/logstash/bin/config MySQL/mysql-1.conf

SQL statement file:/home/ES/logstash/bin/config MySQL/tk.sql

JDBC configuration uses the configuration: statement_ filepath => “/home/es/logstash/bin/config-mysql/tk.sql”

terms of settlement:

        Put tk.sql in another file, for example:/home/ES/logstash/config/tk.sql

        As long as it is not in the same directory as the SQL configuration file, it is OK

React error boundary (What You Should Know & How to Solve)

  1. What is the error boundary?

Error boundary is a kind of react component. This component can capture JavaScript errors anywhere in its sub component tree, print these errors, and display the degraded UI , without rendering those sub-component trees that crash. Error boundaries catch errors during rendering, in the lifecycle method, and in the constructor of the entire component tree.

Note: the error boundary cannot capture the errors generated in the following scenarios

    event handling asynchronous code (such as setTimeout or requestanimationframe callback function) the server renders the errors thrown by itself (not its sub components)

If anyone (or both) of the two lifecycle methods static getderivedstatefromerror() or componentdidcatch() is defined in a class component, it becomes an error boundary. When an error is thrown, please use static getderivedstatefromerror() to render the alternate UI and componentdidcatch() to print the error message.

class ErrorBoundary extends React.Component {
  constructor(props) {
    super(props);
    this.state = { hasError: false };
  }

  static getDerivedStateFromError(error) {
    return { hasError: true };
  }

  componentDidCatch(error, errorInfo) {
    logErrorToMyService(error, errorInfo);
  }

  render() {
    if (this.state.hasError) {
      return <h1>Something went wrong.</h1>;
    }

    return this.props.children; 
  }
}

You can then use it as a regular component:

<ErrorBoundary>
  <MyWidget />
</ErrorBoundary>

The working mode of the error boundary is similar to the catch {} of JavaScript, except that the error boundary is only for the react component. Only the class component can be an error boundary component. In most cases, you only need to declare the error boundary component once and use it throughout the application.

Note that the error boundary can only catch the errors of its subcomponents, it cannot catch its own errors. If an error boundary cannot render the error message, the error will bubble to the nearest upper error boundary, which is also similar to the working mechanism of catch {} in JavaScript.

2. React error boundary

https://github.com/bvaughn/react-error-boundary
https://www.npmjs.com/package/react-error-boundary
The above address is the error boundary wheel encapsulated by the boss, which can be used directly. Please check the relevant documents for details

[Solved] Vue unit test syntax error: unexpected token ‘export‘

Paste error information to facilitate search engines to find similar errors

Jest encountered an unexpected token

    This usually means that you are trying to import a file which Jest cannot parse, e.g. it's not plain JavaScript.

    By default, if Jest sees a Babel config, it will use that to transform your files, ignoring "node_modules".

    Here's what you can do:
     • To have some of your "node_modules" files transformed, you can specify a custom "transformIgnorePatterns" in your config.
     • If you need a custom transformation specify a "transform" option in your config.
     • If you simply want to mock your non-JS modules (e.g. binary assets) you can stub them out with the "moduleNameMapper" config option.

    You'll find more details and examples of these config options in the docs:
    https://jestjs.io/docs/en/configuration.html

    Details:

    D:\123\vue3-pro\h5-editor\node_modules\[email protected]@lodash-es\lodash.js:10
    export { default as add } from './add.js';
    ^^^^^^

    SyntaxError: Unexpected token 'export'

Solution

After checking online for a long time, I finally found the only way to solve my problem. If the common methods on the Internet are useless, friends can try

According to the reply to the question, you can configure the following in jest. Config. JS

"transformIgnorePatterns": [
  "<rootDir>/node_modules/(?!lodash-es)"
]

chunk-vendors.7142f8da.js:1 Uncaught SyntaxError: Unexpected token ‘<‘

This is what I Vue found by previewing with serve – s dist after packaging

reason   There is a problem with the parameters configured in vue.config.js

    publicPath: process.env.NODE_ENV === 'production'
    ?'/execl_forward/'
    : '/'

Then use NPM run build to package

  Cause static file error  

So I created EXECL in dist_ Forward folder put CSS and JS folders in it

Then it was solved  

Or use the default packaging method  

Vue.config.js

publicPath: './'

 

Error: PostCSS plugin postcss-pxtorem requires PostCSS 8

Question content:

Syntax Error: Error: PostCSS plugin postcss-pxtorem requires PostCSS 8.
Migration guide for end-users:
https://github.com/postcss/postcss/wiki/PostCSS-8-for-end-users


 @ ./src/styles/index.less 4:14-228 15:3-20:5 16:22-236
 @ ./src/main.js
 @ multi (webpack)-dev-server/client?http://192.168.7.176:8081&sockPath=/sockjs-node (webpack)/hot/dev-server.js ./src/main.js

Problem solving:

npm i [email protected]