Category Archives: Javasript

[Solved] Vue Error: Property or method “changeLoginType” is not defined on the instance but referenced during render

reason

I’m here because the method in my code doesn’t exist. I missed it and added it later

Solution

Add the following code in methods:

// Modify Login Status
changeLoginType(bool){
   this.loginType = bool
}

Failed to parse source for import analysis because the content contains invalid JS syntax

Vue3 compiles with an error when using compositionAPI:
[vite] Internal server error: Failed to parse source for import analysis because the content contains invalid JS syntax. If you are using JSX, make sure to name the file with the .jsx or .tsx extension.
The reason I encountered the error reported was because

async setup(props) { // Async asynchronous keyword in front of setup needs to be aware of the risk of blocking
    
 
    await XXXX; // After await, asynchronous blocking causes an error to be reported
}

It’s best to write directly with vue3 script setup syntax   Vue3 script setup syntax

Vue Request Error: Uncaught (in promise) [How to Solve]

This error will be reported if the reject error in the promise is not caught

getImage: function (url) {
        return new Promise((resolve, reject) => {
          wx.getImageInfo({
            src: url,
            success: function (res) {
              resolve(res)
            },
            fail: function () {
              reject("")
            }
          })
        }).catch((e) => {

console.log(e)
});
      },
getImage: function (url) {
        return new Promise((resolve, reject) => {
          wx.getImageInfo({
            src: url,
            success: function (res) {
              resolve(res)
            },
            fail: function () {
              reject("")
            }
          })
        }).catch((e) => {

console.log(e)
});
      },

As long as you add .catch((e) => {}) at the end, no error will be reported.

[vue/no-parsing-error] Parsing error: invalid-first-character-of-tag-name.eslint-plugin-vue Parsing error: invalid-first-character-of-tag-name.eslint(vue/no-parsing-error)

Problem Description:

Interpolation syntax and ternary expression are used in Vue page. The above error is reported, but it can run normally;

Error code, such as:

<p>{{num<0?"Hello":"hello"}}</>

Error message

[vue/no-parsing-error]
Parsing error: invalid-first-character-of-tag-name.eslint-plugin-vue
Parsing error: invalid-first-character-of-tag-name.eslint(vue/no-parsing-error)

Problem resolution:

The above code can run normally, but eslint will report an error because a separate & lt; will be verified in the HTML code; It will be considered by eslint as a part of HTML code rather than a template language, but Vue will parse this part of the expression and then output it, so it can run normally

Solve the error reported by eslint:

Method 1: we can use the escape character < to < or > Number replacement

<p>{{ (num < 1) ?"Hello":"hello" }}</p>

Method 2: use the v-text instruction

<p v-text="(num < 1) ?'Hello':'hello'"></p>

Proxy error: Could not proxy request [How to Solve]

After the Vue project is started, the login reports the following error:

There is a problem with the proxy server. It may be that the currently configured proxy server is closed or incorrectly configured. In vue.config.js file, change the target to the correct opened server address (you can ask the back-end developer to start the server)

proxy: {
  // Proxy server settings
  '/my_test_proxy': {
    target: 'xxx:xxx', // Need to proxy the current address to target
    changeOrigin: true,
    pathRewrite: {
      ['^' + '/my_test_proxy']: '' // rewrite '/my_test_proxy' to ''
    }
  }
}

Error: jest not implemented window.open() [How to Solve]

Problem description

Window.open is used in the code to open a new window, and an error is reported in jest unit test

 window.open(url, name, config)

jest not implemented window.open()

Solution:

Directly define the window. Open method in the test file, which should be suitable for all window methods.

window.open = jest.fn()

Note that the mockclear() method is always called in the test file, because window.Open is a global object and will always exist during the test.

it('test', () => {
  window.open.mockClear()
  wrapper.vm.handleOpen()
})

Stylesheet not loaded because of MIME-type [How to Solve]

Stylesheet not loaded because of MIME-type
The referenced path is wrong, the target path does not have a corresponding css file. Because the server returns a 404 error, it is in html format and does not match the css
In most cases, this could be simply the CSS file path is wrong. So the web server returns status: 404 with some Not Found content payload of html type.
The browser follows this (wrong) path from <link rel="stylesheet" ...> tag with the intention of applying CSS styles. But the returned content type contradicts so that it logs an error.

[Solved] Vue Template Error: You may have an infinite update loop in a component render function,vue

The reason for my error report is:

I used sort to sort the values defined in data. Data detected changes and re rendered the template, resulting in repeated circular rendering, which gave me a warning (which also led to abnormal paging rendering)

{{ scope.row.jobs.sort((a,   b)=>   new   Date(a.createdAt)  –  new   Date(b.createdAt))[0].createdAt   }}

Solution:

Sort works on itself, so I made a deep copy in sort.

{{   JSON.parse(JSON.stringify(scope.row.jobs)).sort((a,   b)=>   new   Date(a.createdAt)  –  new   Date(b.createdAt))[0].createdAt   }}

Vue adds route errors dynamically: Uncaught Error… [How to Solve]

Error Message:

Uncaught Error: 
[vue-router] route config "component" for path: /home cannot be a string id.
 Use an actual component instead

No error is reported when running, but the page is blank. Open the console to display the following figure:

[error report analysis]

The [Vue router] route config “component” of the path/home cannot be a string ID. use the actual component instead

Locate in the following code and you can see that it is the wrong component of the component

export default new Router({
  routes: [
    {
      path:'/',
      redirect:'/home'
    },
    {
      path:'/home',
      component:'Home'
    },
    {
      path:'/cart',
      component:'Cart'
    },
    {
      path:'/profile',
      component:'Profile'
    }
  ]
})

Discover    Component: ‘profile’ cannot be quoted

[solution]

After removing the quotation marks (component: profile), the interface can be displayed normally.