Tag Archives: &View

ArcGIS API for JavaScript version 4. X updated and the project startup error: Module parse failed: Unexpected token(… …

 

Question:

When using the project created by vue and webpack, after the ArcGIS API for JavaScript 4. X is upgraded from a lower version to a higher version, problems occur in building the project:

Module parse failed: Unexpected token. You may need an appropriate loader to handle this file type…

error  in ./node_modules/@arcgis/core/views/3d/layers/SceneLayerWorker.js
Module parse failed: Unexpected token (5:673)
You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file. See https://webpack.js.org/concepts#loaders
| See https://js.arcgis.com/4.24/esri/copyright.txt for details.
| */

Reason:

The new version of the ArcGIS API references the new version of ES2020 optional chaining and nullish coalescing, resulting in parsing errors in the old version of Webpack, so you need to install the appropriate dependencies or upgrade the framework.

Solution:

1. Download Dependencies

Download the corresponding dependencies through the command

npm install -D @babel/core @babel/plugin-proposal-nullish-coalescing-operator @babel/plugin-proposal-optional-chaining babel-loader

Or add the following codes in package.json, and then initialize npm install

 "@babel/core": "^7.18.9",
 "@babel/plugin-proposal-nullish-coalescing-operator": "^7.18.6",
 "@babel/plugin-proposal-optional-chaining": "^7.18.9",
 "babel-loader": "^8.2.5",

2. Add Configuration

Find the webpack.config.js file and add the following codes below

   module: {
     rules: [
       {
         test: /\.m?js$/,
         exclude: {
           and: [/node_modules/],
           not: [/@arcgis[\\/]core/]
         },
         use: {
           loader: "babel-loader",
           options: {
             plugins: [
               ["@babel/plugin-proposal-nullish-coalescing-operator", { loose: true }],
               ["@babel/plugin-proposal-optional-chaining", { loose: true }]
             ]
           }
         }
       }
     ]
   }

Note: If your project is using the vue1 framework, i.e. you can’t find the webpack.config.js file, then you need to configure the configureWebpack configuration item in the vue.config.js file.

3. Restart the project

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

[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
})