Tag Archives: javascript

[Chrome]: DevTools failed to load source map… (How to Solve)

In the vue project, it is clear that the prompt information output on the console has been turned off through the following configuration, but it will still be printed?

Vue.config.productionTip = false

Vue.config.devtools= false

Vue.config.debug= false

1. Problem Analysis:

This is because after a vue project is packaged, the Javascript source code is usually merged and shrunk to optimize the site to load faster and reduce bandwidth usage. The compressed script is a file mapped from the transformed source to the original source, which allows the browser to reconstruct the original source and display the reconstructed original source to the debugger. In turn, to enable the debugger to use the source mapping, a source mapping file is generated and included in the converted file as a comment pointing to the source mapping file, as follows:

//# sourceMappingURL=http://example.com/path/to/your/sourcemap.map

And when our vue project index.html or other entry interfaces to load some scripts into the project and packaged, these scripts will not produce the corresponding source mapping, but the mapping file (sourceMappingURL) is declared in the script, at this time the browser naturally throws an exception, so the console prints not the output of the project itself, but Chrome’s prompt!

2. Solution:

We just need to remove the above mentioned //# sourceMappingURL= xxxxxxx line from the corresponding statically introduced script, or download the corresponding source mapping file and place it in the directory where the corresponding script is located, depending on the boot version.

crypto-js Error: Malformed UTF-8 data [How to Solve]

Crypto js Malformed UTF-8 data

Note: If your application is started by jar package, please refer to solution 1; If your application is started by tomcat, please refer to solution 2.

Solution 1: jar package startup configuration

 java -jar -Dfile.encoding=utf-8 itemapi-1.0.1.jar

Solution 2: tomat configuration

Set up in Tomcat’s catalina.bat.

set "JAVA_OPTS=%JAVA_OPTS% %LOGGING_CONFIG% -Dfile.encoding=UTF-8"

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

Vue error: 0308010C: digital envelope routes:: unsupported

This error is due to the recent release of OpenSSL 3.0 in node.js V17, which adds strict restrictions on allowed algorithms and key sizes, which may have some impact on the ecosystem.

Solution:

Method 1:

Open the terminal (press Jian win+R to pop up a window, enter cmd on the keyboard, and then press Enter) and paste these according to the instructions: (Not necessarily, I tried but it failed)

Linux & Mac OS (windows git bash)

export NODE_OPTIONS=--openssl-legacy-provider

Windows command prompt:

set NODE_OPTIONS=--openssl-legacy-provider

Method 2:

Try to uninstall Node.js 17+ and reinstall Node.js 16+, then restart
1. Install nvm management tools (first turn off 360 and other software, or a warning will pop up!)
1. Download the installation package from the official website: https://github.com/coreybutler/nvm-windows/releases, download: nvm-setup.exe
2. Start the nvm installation.
(1) double-click the nvm-setup.exe file, select “I accept …” that line, click next

(2) you can customize the path disk according to their own situation, the path does not appear spaces or no-English symbols (the path is best in the root directory of the path disk, such as C disk, D disk under the root directory), click next after the selection

(3) Select the installation location of node.js, you can customize the path disk according to your own situation, the path does not appear spaces or Chinese symbols (the path is best to create a new folder in the root directory of the path disk, such as the root directory under the C disk, D disk), select it and click next. (If node.js is already installed in the system, then cmd open the terminal, type where node, check the location of node, and select this file directory)

(4) The last step, click install to complete the installation

3. Verify if the installation is successful
Enter the command and control line window (win+R, type cmd).
Type nvm -v, the version number appears that is successful.

4. Install node js

(1) Enter the command line nvm ls available to view the available nodes.js version.


(2) Enter the command line nvm install node version number (for example: nvm install 16.17.0)

(3) After the installation is successful, enter the command line nvm use node version number (nvm use 16.17.0)
If an errorexit status 1: Ȩ �� ִ � д˲ ; Enter cmd -> Run as administrator (command prompt) -> Re enter nvm use

(4) Verify whether the command line node – v and npm – v are successful Whether the installation of js and the corresponding npm is successful. If the version number can be displayed, the installation is successful.

Tip:
1. Enter the command line nvm ls to view all the Node.js version numbers you installed and the currently selected the running version of node.js

(2) If you want to delete a node For the js version, enter the command line nvm uninstall node version number (for example: nvm uninstall 18.10.0) to delete the corresponding version

2. Restart the application, no error is reported at 0308010C

npm run dev

[Solved] React Error: ReactDOM.render is no longer supported in React 18.

Error message:

ReactDOM.render is no longer supported in React 18. Use createRoot instead. Until you switch to the new API, your app will behave as if it’s running React

 

ReactDOM.React 18 no longer supports rendering. Use createRoot instead. Before you switch to the new API, your application will behave as if it is running React 17

Reason:
React team has launched the latest version of 18.0, in which React 18 no longer supports ReactDOM.render

Console error:

Solution:
Use createRoot in the index.js file

import React from 'react'
import ReactDOM from 'react-dom'
import TopList from './TopList'

// Use createRoot
import { createRoot } from 'react-dom/client';
const container = document.getElementById('root')
const root = createRoot(container)
root.render(<TopList/>)

// report error
// ReactDOM.render( < TopList /> , document.getElementById('root'))

 

vue-cli: Syntax Error: Thread Loader [How to Solve]

vue-cli: Syntax Error: Thread Loader

Syntax Error: Thread Loader(Worker 1)

Cannot read properties of undefined (reading 'options')

framework: @vue/cli@5 + [email protected] + ts

vue-cli uses wokrer-loader to load a web woker, using npm run build has a high chance of failing to package it with the error reported above.

There is a conflict between thread-loader and worker-loader.

Solution:

vue.config.js configure parallel: false . Build the official environment with thread-loader turned off.

node.js yarn Error: SyntaxError: Unexpected string [How to Solve]

Error log:

exec "/home/latte-with-ice/.nvm/versions/node/v16.17.0/bin/node" "/home/latte-with-ice/.nvm/versions/node/v16.17.0/bin/yarn" "$@"
     ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^

SyntaxError: Unexpected string
    at Object.compileFunction (node:vm:360:18)
    at wrapSafe (node:internal/modules/cjs/loader:1055:15)
    at Module._compile (node:internal/modules/cjs/loader:1090:27)
    at Object.Module._extensions..js (node:internal/modules/cjs/loader:1180:10)
    at Module.load (node:internal/modules/cjs/loader:1004:32)
    at Function.Module._load (node:internal/modules/cjs/loader:839:12)

Error Cause.
There are two types of yarn installed by system apt install yarn and npm install yarn

Solution:

  1. Uninstall system yarn first: sudo apt-get remove yarn && sudo apt-get
  2. [can not do] uninstall yarn from node: npm uninstall -g yarn
  3. Reinstall yarn: npm install -g yarn
  4. Re-execute the program and it will work again

[Solved] Failed to Create Vue Scaffold Error: spawn yarn ENOENT

Today, when I use yarn, it reports the error as the title.

Error reason:

The default package management is set to yarn, but yarn is not installed

Therefore, after uninstalling, you should:

1. Open the C drive, in the C drive, open the users folder, then search for the file named .vuerc on the right side.

2. Open the file, find the packageManager property, you can see that the default value you configured is yarn, change its value to npm.

If you need to install yarn, you can:

In the command line window, directly enter the commandnpm install yarnto installyarn.

[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

Leave a reply

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] 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.