Category Archives: JavaScript

[Solved] devTools failed to load sourcemap: Could not parse content for map

devTools failed to load sourcemap: Could not parse content for map

Error
Console report an error: devTools failed to load sourcemap: Could not parse content for map

Solution:
Console settings, just uncheck the source map
Enable JavaScript source maps
Enable CSS source maps

error in ./node_modules/@lit/reactive-element/decorators/state.jsModule parse failed: Unexpected

Recently developed an old project, I found that the project that was good before is now running an error, Various switching of npm sources and node versions does not work, Google did not find relevant information, The error is as follows:

 error  in ./node_modules/@lit/reactive-element/decorators/state.js

Module parse failed: Unexpected token (6:27)
You may need an appropriate loader to handle this file type.
|  * Copyright 2017 Google LLC
|  * SPDX-License-Identifier: BSD-3-Clause
|  */function t(t){return r({...t,state:!0})}export{t as state};
| //# sourceMappingURL=state.js.map

It says that the current file cannot be processed.

 error in ./node_modules/@lit/reactive-element/decorators/state.js

Module parse failed: Unexpected token (6:27)
You may need an appropriate loader to handle this file type.
| * Copyright 2017 Google LLC
| * SPDX-License-Identifier: BSD-3-Clause
| */function t(t){return r({...t,state:!0})}export{t as state};
| //# sourceMappingURL=state.js.map
| 

It is found that the file under the @lit module reports an error, click on the details and find that the source file here, is not es5 syntax.

Look at the version number in package.json, the ^ is used, which means that this module can be automatically minor version upgrade. Guess it should be that the module is automatically upgraded, causing some incompatibility so an error is reported,

Finally, I found that the project is configured with, babel parsing, this plugin outputs es6 code, needs to be compiled with bable.

 {
        test: /\.js$/,
        loader: 'babel-loader',
        include: [
          [resolve('src'), resolve('/node_modules/_@lit')]
        ],
      }

See the error message is ./node_modules/@lit/reactive-element , the original path of the new version was changed to @lit,The old version is _@lit So there is no bable parsing, resulting in an error. After the following modification, a new parsing path has been added, The problem has been solved.

 {
        test: /\.js$/,
        loader: 'babel-loader',
        include: [
          [resolve('src'), resolve('/node_modules/_@lit'), resolve('/node_modules/@lit') ]
        ],
      }

[Solved] EurekaServerApplication: Failed to retrieve application JMX service URL

EurekaServerApplication: Failed to retrieve application JMX service URL

Import a spring cloud project, and report the following error at startup:

EurekaServerApplication: Failed to retrieve application JMX service URL

insert picture description here

Error message

EureKaServerApplication:Failed to retrieve application JMX service URL

Solution:

Select the project ——>Then select the spring boot plugin, Find to the startup project, There is a spring boot option,
Cancel the Enable JMX agent option

insert picture description here

Click on Edit configuration templates >>spring boot >>modify options

insert picture description here

Click Disable JMX agent

insert picture description here

Click Apply >> OK
agent
insert here Image description

Click Apply >> OK
to rerun main entry

[Solved] Module build failed: Error: Vue packages version mismatch

1. Error message when running the project

Module build failed: Error:

Vue packages version mismatch:

- [email protected] (G:\workspace\BookShopManageVue\node_modules\vue\dist\vue.runtime.common.js)
- [email protected] (G:\workspace\BookShopManageVue\node_modules\[email protected]&#64 ;vue-template-compiler\package.json)

This may cause things to work incorrectly. Make sure to use the same version for both.
If you are using vue-loader@>=10.0, simply update vue-template- compiler.
If you are using vue-loader@<10.0 or vueify, re-installing vue-loader/vueify should bump vue-template-compiler to the latest.

2. Reason for the error

version problems,

The currently installed VUE dependency node_modules is version 2.6.14,  but the imported project uses version 2.7.10.

Just unify the two versions.

Hint: how to unify versions. Is to download and install version 2.6.14. Still version 2.7.10?

If you are using vue-loader@>=10.0, simply update vue-template-compiler.

Check the version of vue loader in package-lock.json. My vue loader version is higher than 10. So I’m going to unity 1.6.14 version. (I didn’t see vue loader directly download and install version 2.7.10 before. The result is the same error)
insert image description here

3. Solutions

  • 1. Delete node_modules
  • 2. Install npm install [email protected] --save (Need to check the version)

4. Successful operation

insert image description here

Can’t resolve ‘ansi-html-community’ & Cannot find module ‘is-docker (vuex-persistedstate Installed)

When the following error occurs in the console,it means that the plug-in is installed incorrectly

Can’t resolve ‘ansi-html-community’

Cannot find module ‘is-docker

Don’t use npm install

npm i vuex-persistedstate

But the environment you use is yarn, so you need to use yarn to install the plugin

yarn add vuex-persistedstate

Then the problem can be solved smoothly

[Solved] Error: error:0308010C:digital envelope routines::unsupported

Error: error:0308010C:digital envelope routines::unsupported

After installing npm on the new computer, and then installing yarn through npm, using npm run serve and yarn run serve both report exceptions (complete as shown in the figure)

Error: error:0308010C:digital envelope routines::unsupported

Solution:

Press and hold ctrl to end the current node process and execute in the corresponding directory

set NODE_OPTIONS=--openssl-legacy-provider

[Solved] React Invariant Violation: Minified React error #130

React Invariant Violation: Minified React error #130

The local operation of react is OK. After being packaged, an error is reported as follows:

When you encounter such a problem, usually there is a problem with import, either the name is written wrong, or case, or the imported component does not exist can not be found! Check the import of the problem area carefully and you will usually find the reason.

I encountered the reason is: in the same ts file exported more than one, and then imported elsewhere, the local operation are normal no problem, but after packaging may be due to sub-packaging or what, resulting in other places import place can not be found.

Solution: I wrote a separate file for the exported component, and after the other import references were modified, it was all good.

[Solved] Vue-cli Create Project Error: ERROR command failed: yarn

Create a project through vue-cli, and the error ERROR command failed: yarn is reported

reason:

Installed yarn package manager When creating a vue project, you choose to use yarn package manager, but when creating a project through vue-cli, you use npm, causing a conflict

Solution:

The path to open the document is:C:\Users\Administrator\.vuerc

Note: If you don’t see it, check the hidden items at the top in Explorer
Open the folder and replace yarn with npm
Solve the problem and recreate the item

[Solved] 1:1 error Component name “Header“ should always be multi-word vue/multi-word

An error occurred while starting the vue project:

1:1 error Component name “Header” should always be multi-word vue/multi-word

The reason is that the nonstandard code (that is, nonstandard naming) is regarded as an error during the syntax check

Solution:

Add the configuration: lintOnSave: false in the vue.config.js file, as follows:

const { defineConfig } = require('@vue/cli-service')
module.exports = defineConfig({
  transpileDependencies: true,
  lintOnSave: false
})

Uncaught URIError: URI malformed [How to Solve]

Uncaught URIError: URI malformed

  • url, pass the value, if the key has Chinese characters inside, the browser will be encoded off by default, so this page needs to be decoded first when calling the query interface), the above error occurs.
  • Because the url contains the “%” character, the browser will give an error when it executes decodeURIComponent on “%”.

Repeat the problem

The browser url on the splice on (?q=%好的);

https://www.baidu.com/?q=%好的

Enter the code;

location.search
'?q=%%E5%A5%BD%E7%9A%84'
decodeURIComponent('%%E5%A5%BD%E7%9A%84');

Solution

urlStr.replace(/%/g, '%25');

Fundamentally solve the problem: encode the URL before uploading the value

encodeURIComponent('%好的');
'%25%E5%A5%BD%E7%9A%84'
https://www.baidu.com/?q=%25%E5%A5%BD%E7%9A%84