Category Archives: Javasript

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.

 

Syntax error reported by JavaScript function: expected expression, got ‘;’

Story background: when writing a Java Web project and running under Firefox, firebug reports an error syntax error: expected expression, got ‘;’ Or syntaxerror: expected expression, got ‘if’, etc

Click the detailed code of error reporting on the firebug console and find that the code looks like this:

$(document).ready(function(){  
            var s = ;  
            if(s==null||s==""){  
                alert("Please Login");  
                location.href="/SSM0413/jsp/login.jsp";  
            }  
        });

But the code I wrote under eclipse is as follows:

    $(document).ready(function(){  
                var s = ${sessionScope.user.userName};  
                if(s==null||s==""){  
                    alert("Please Login");  
                    location.href="/SSM0413/jsp/login.jsp";  
                }  
            });

It is obvious that the variable assignment part ${sessionscope. User. Username} is gone. Can I use El expressions directly in JavaScript?The answer is: no

So how can we assign the value in the session to the variable in the JavaScript function?After searching the data, we get the following idea:

 

Write a span tag in the body and use the El expression in the span tag. However, in order not to create an additional span influence interface out of thin air, set the hidden attribute to hide it, such as:

    <span id="uu" hidden="hidden">${sessionScope.user.userName}</span>

Then use getelementbyid in JS to get the content in the span tag, and you can assign a value to the variable

    var s = document.getElementById("uu").innerHTML;

Summary: 1. El expressions cannot be used directly in JavaScript

2. In case of this problem, you can check the JS code first. In addition to the format problem, write more or less “;” Also, check whether some functions, libraries, or El expressions of the application can be used in JS code

3. Making good use of firebug can solve many problems

 

[Solved] NPM installation Vue scaffold error: npm ERR! Unexpected end of JSON input while parsing near…

NPM installation Vue scaffold error report

error reporting details

npm ERR! Unexpected end of JSON input while parsing near '...TuHxXJaknDulF3AdSBoul'

npm ERR! A complete log of this run can be found in:
npm ERR!     C:\Users\xxx\AppData\Roaming\npm-cache\_logs\2019-12-22T03_12_06_342Z-debug.log

final solution

npm cache clean --force
npm i -g npm

No, try these again

npm ls --depth 0 -g // See what's not working
npm prune -g // prune the global package
npm rebuild -g // rebuild the global package
npm update -g // update the version of the global package
npm cache clear --force -g // remove the cache of the global package (be careful)

by the way, it’s no use reloading (I tried)

Install again

C:\Users\xxx>npm install vue-cli -g
npm WARN deprecated [email protected]: This package has been deprecated in favour of @vue/cli
npm WARN deprecated [email protected]: CoffeeScript on NPM has moved to "coffeescript" (no hyphen)
C:\Users\xxx\AppData\Roaming\npm\vue -> C:\Users\xxx\AppData\Roaming\npm\node_modules\vue-cli\bin\vue
C:\Users\xxx\AppData\Roaming\npm\vue-init -> C:\Users\xxx\AppData\Roaming\npm\node_modules\vue-cli\bin\vue-init
C:\Users\xxx\AppData\Roaming\npm\vue-list -> C:\Users\xxx\AppData\Roaming\npm\node_modules\vue-cli\bin\vue-list
+ [email protected]
added 241 packages from 206 contributors in 170.007s

C:\Users\xxx>vue -V
2.9.6

C:\Users\xxx>