目录

问题

原因

解决方法

1、下载依赖

2、添加配置

3、重启项目即可

---

问题

在使用vue和webpack创建的项目时，ArcGIS API for JavaScript 4.X从较低版本升级为高版本后，构建项目中出现问题：

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.
| */

原因

新版本的ArcGIS API引用新版本的ES2020 optional chaining和nullish coalescing，导致旧版本的Webpack出现解析错误，所以需要安装相应依赖或者升级框架。

解决方法

1、下载依赖

通过命令下载相对应的依赖

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

或者 在 package.json 中添加，再初始化 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、添加配置

找到 webpack.config.js 文件，将以下内容添加进去

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

注意：如果你的项目是使用vue1的框架，即找不到 webpack.config.js 文件，那么需要在vue.config.js 文件的 configureWebpack 配置项进行配置。

在vue.config.js 文件配置

 

3、重启项目即可

相关webpack-dev-server更新的参考文献，有兴趣的可以看一下。