Tag Archives: javascript

Vue3.0 error: Failed to resolve component el-form-item (el element to be unable to be displayed)

When importing the element ui, you need to introduce the corresponding component in element.js if you choose on-demand import.

import { ElForm } from 'element-plus'
import { ElButton } from 'element-plus'
import { ElFormItem } from 'element-plus'
import { ElInput } from 'element-plus'
import lang from 'element-plus/lib/locale/lang/zh-cn'
import locale from 'element-plus/lib/locale'

export default (app) => {
  locale.use(lang)
  app.use(ElButton)
  app.use(ElForm)
  app.use(ElFormItem)
  app.use(ElInput)
}

The page can be displayed normally

[Solved] vite package Error: globalThis is not defined

Problem:
browser version 65
globalthis requires chrome 71 or above

vite + vue3.0 after the project is packaged, the browser prompts globalthis is not defined.

How to Solve:
Modify vite.config.js
Add plugin @vitejs/plugin-legacy

import legacy from '@vitejs/plugin-legacy'

export default defineConfig({
	plugins: [
		legacy({
			targets: ['Chrome 63'],
			additionalLegacyPolyfills: ['regenerator-runtime/runtime'],
			modernPolyfills: true
		})
	],
	build:{
   		target:'es2015'
	}
})

Just repack it

[Solved] echarts Draw Errror: echarts-d9fd185e.js:31447 Uncaught (in promise) Error: Initialize failed: invalid dom.

When the browser executes document.getElementById(‘chart’), because the dom object with the id of main has not been created, it reports an error Initialize failed: invalid dom.

The solution is to delay the execution of the code for initializing the charts in echarts, which is fast and does not affect the display of the effect and does not feel stuck.

func.echarts() for the initialization of the chart function , code and effects are as follows (a vue3.0 project of a page used)

     echarts: () => {
        let myChart = echarts.init(document.getElementById("chart"));
        let option = {
          title: {
            text: '标题',
            textStyle: {
              fontSize: 13
            },
          },
          toolbox: {
            show: true,
            feature: {
              saveAsImage: {
                show: false
              }
            },
          },
          legend: {
            data: ['人数']
          },
          xAxis: {
            data: ['09-14', '09-15', '09-16', '09-17', '09-18', '09-19', '09-20']
          },
          yAxis: {},
          series: [{
            name: '人数',
            type: 'line',
            data: ['13', '14', '18', '14', '10', '11', '9'],
          }]
        };
        myChart.setOption(option);
      },
    })

[Solved] Uncaught Error: Highcharts error #16

Highcharts error #16 is due to duplicate Highcharts definitions. The reason for this error is that the namespace of Highcharts is duplicated.

The namespace of Highcharts actually exists in the Highcharts.js file that we refer to when we use Highcharts.

Solution
Remove the Highcharts.js from the nested subpages and leave only the reference to the main page, and the error will not be reported.

Conclusion
Referencing Highcharts.js on the main page and referencing Highcharts.js on the sub-page nested in it will cause duplicate Highcharts definitions whenever the sub-page is loaded.

[Solved] Error Rule can only have one resource source (provided resource and test + include + exclude)

Error: Rule can only have one resource source
(provided resource and test + include + exclude)

Error: Rule can only have one resource source (provided resource and test + include + exclude)

Error: Rule can only have one resource source (provided resource and test + include + exclude) in
 "exclude": [
    null
  ],
  "use": [
    {
      "loader": "/Users/juanpablo/front-treatments/node_modules/cache-loader/dist/cjs.js",
      "options": {
        "cacheDirectory": "/Users/juanpablo/front-treatments/node_modules/.cache/babel-loader",
        "cacheIdentifier": "81fef5a6"
      },
      "ident": "clonedRuleSet-38[0].rules[0].use[0]"
    },
    {
      "loader": "/Users/juanpablo/front-treatments/node_modules/babel-loader/lib/index.js",
      "options": "undefined",
      "ident": "undefined"
    }
  ]
} ````
A complete log of this run can be found in:
0 info it worked if it ends with ok
1 verbose cli [
1 verbose cli   '/Users/juanpablo/.nvm/versions/node/v12.19.0/bin/node',
1 verbose cli   '/Users/juanpablo/.nvm/versions/node/v12.19.0/bin/npm',
1 verbose cli   'run',
1 verbose cli   'serve'
1 verbose cli ]
2 info using [email protected]
3 info using [email protected]
4 verbose run-script [ 'preserve', 'serve', 'postserve' ]
5 info lifecycle [email protected]~preserve: [email protected]
6 info lifecycle [email protected]~serve: [email protected]
7 verbose lifecycle [email protected]~serve: unsafe-perm in lifecycle true
8 verbose lifecycle [email protected]~serve: PATH: /Users/juanpablo/.nvm/versions/node/v12.19.0/lib/node_modules/npm/node_modules/npm-lifecycle/node-gyp-bin:/Users/juanpablo/front-treatments/node_modules/.bin:/Users/juanpablo/.nvm/versions/node/v12.19.0/bin:/usr/local/bin:/usr/bin:/bin:/usr/sbin:/sbin:/Users/juanpablo/.rvm/bin
9 verbose lifecycle [email protected]~serve: CWD: /Users/juanpablo/front-treatments
10 silly lifecycle [email protected]~serve: Args: [ '-c', 'vue-cli-service serve' ]
11 silly lifecycle [email protected]~serve: Returned: code: 1  signal: null
12 info lifecycle [email protected]~serve: Failed to exec serve script
13 verbose stack Error: [email protected] serve: `vue-cli-service serve`
13 verbose stack Exit status 1
13 verbose stack     at EventEmitter.<anonymous> (/Users/juanpablo/.nvm/versions/node/v12.19.0/lib/node_modules/npm/node_modules/npm-lifecycle/index.js:332:16)
13 verbose stack     at EventEmitter.emit (events.js:314:20)
13 verbose stack     at ChildProcess.<anonymous> (/Users/juanpablo/.nvm/versions/node/v12.19.0/lib/node_modules/npm/node_modules/npm-lifecycle/lib/spawn.js:55:14)
13 verbose stack     at ChildProcess.emit (events.js:314:20)
13 verbose stack     at maybeClose (internal/child_process.js:1021:16)
13 verbose stack     at Process.ChildProcess._handle.onexit (internal/child_process.js:286:5)
14 verbose pkgid [email protected]
15 verbose cwd /Users/juanpablo/front-treatments
16 verbose Darwin 19.6.0
17 verbose argv "/Users/juanpablo/.nvm/versions/node/v12.19.0/bin/node" "/Users/juanpablo/.nvm/versions/node/v12.19.0/bin/npm" "run" "serve"
18 verbose node v12.19.0
19 verbose npm  v6.14.8
20 error code ELIFECYCLE
21 error errno 1
22 error [email protected] serve: `vue-cli-service serve`
22 error Exit status 1
23 error Failed at the [email protected] serve script.
23 error This is probably not a problem with npm. There is likely additional logging output above.
24 verbose exit [ 1, true ]

Cause analysis:

Webpack version conflict issue in package.json.

Solution:

Delete the webpack and reinstall the previous version
npm uninstall webpack
npm install webpack@^4.0.0 –save-dev

How to Solve Chrome Error: “ERR_HTTP2_PROTOCOL_ERROR”

Practical application items: http://github.crmeb.net/u/long

Solution:

  • open chrome://flags/ page
  • find Block insecure private network requests. and Enable Trust Tokenstwo
  • Change its value from Default to Enable
  • Click the ReLaunch button restart the browser
  • Reopen the website that reported the error
  • If it doesn’t open, enter chrome://restart/ it in the address bar and restart the browser.

[Vue warn]Error in mounted hook: “Error: please transfer a valid prop path to form item“

This article mainly explains the error reporting and solution of nested El table in El form

report errors

[Vue warn]: Error in mounted hook: "Error: please transfer a valid prop path to form item!"

Error reporting reason

The reason for the error is that the prop definition does not use the array name tabledata bound by table

Solution:

Prop uses the array name tabledata bound by table

[Solved] Echarts Error: Uncaught (in promise) Error: Initialize failed: invalid dom.

Problem screenshot: the reason for

Cause: After entering the chart page and calling the Get Chart Data interface, the interface jumps away from the chart page before returning the data, and then the data is returned and the chart is created, but after jumping away from the chart page, the container element is not available, so an error is reported and the chart creation fails.

Solution:
1. Instead of using the native js method to get the container element (e.g. document.getElementById()), use this.$refs instead.
2. If the chart page is a cached page and you want the chart to load after jumping back to the chart page, you need to write the width and height of the container (in px) in the in-line style of the chart container. (For cached pages there is also another solution: execute the create chart method in the activated life cycle of the component)

<div ref="chinaMapChart" style="width: 770px; height: 560px" />

------

const myChart = echarts.init(this.$refs.chinaMapChart)

[Solved] error ‘xxx‘ is never reassigned. Use ‘const‘ instead prefer-const

If let or var variables are used to declare in TS, an error will appear:

Slint: identifier ‘errmsg’ will never be reassigned; Use ‘const’ instead of ‘let’. (prefer const)

code snippet:

Solution:

1. Use const to declare
2. Open tslint.json file under the project, set prefer-const to false.