2.16.0Incompatible updates exist

[xiyuvi]

When I use "@ geoman io/leaflet geoman free": "2.15.0" in package.json, everything is normal for the project. However, when I change the version number to 2.16.0, the following error message appears

 ERROR  Failed to compile with 1 error                                                                          15:51:49

 error  in ./node_modules/.store/@geoman-io+leaflet-geoman-free@2.16.0/node_modules/@geoman-io/leaflet-geoman-free/dist/leaflet-geoman.js

Module parse failed: Unexpected token (1:4153)
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
> (()=>{var ql=Object.create;var Kr=Object.defineProperty;var zl=Object.getOwnPropertyDescriptor;var Nl=Object.getOwnPropertyNames;var Fl=Object.getPrototypeOf,Vl=Object.prototype.hasOwnProperty;var k=(t,e)=>()=>(e||t((e={exports:{}}).exports,e),e.exports);var Ul=(t,e,r,i)=>{if(e&&typeof e=="object"||typeof e=="function")for(let n of Nl(e))!Vl.call(t,n)&&n!==r&&Kr(t,n,{get:()=>e[n],enumerable:!(i=zl(e,n))||i.enumerable});return t};var _t=(t,e,r)=>(r=t!=null?ql(Fl(t)):{},Ul(e||!t||!t.__esModule?Kr(r,"default",{value:t,enumerable:!0}):r,t));var Xr=k((__,Hr)=>{function jl(){this.__data__=[],this.size=0}Hr.exports=jl});var he=k((y_,Yr)=>{function Hl(t,e){return t===e||t!==t&&e!==e}Yr.exports=Hl});var ue=k((v_,Jr)=>{var Xl=he();function Yl(t,e){for(var r=t.length;r--;)if(Xl(t[r][0],e))return r;return-1}Jr.exports=Yl});var $r=k((L_,Zr)=>{var Jl=ue(),Zl=Array.prototype,$l=Zl.splice;function Wl(t){var e=this.__data__,r=Jl(e,t);if(r<0)return!1;var i=e.length-1;return r==i?e.pop():$l.call(e,r,1),--this.size,!0}Zr.exports=Wl});var Qr=k((b_,Wr)=>{var Ql=ue();function th(t){var e=this.__data__,r=Ql(e,t);return r<0?void 0:e[r][1]}Wr.exports=th});var ei=k((k_,ti)=>{var eh=ue();function rh(t){return eh(this.__data__,t)>-1}ti.exports=rh});var ii
......
=new L.PM.Edit.ImageOverlay(t)))}};L.version==="1.7.1"&&L.Canvas.include({_onClick(t){let e=this._map.mouseEventToLayerPoint(t),r,i;for(let n=this._drawFirst;n;n=n.next)r=n.layer,r.options.interactive&&r._containsPoint(e)&&(!(t.type==="click"||t.type==="preclick")||!this._map._draggableMoved(r))&&(i=r);i&&(L.DomEvent.fakeStop(t),this._fireEvent([i],t))}});L.PM.initialize();})();
| /*! Bundled license information:

 @ ./src/main.js 45:0-41
 @ multi ./node_modules/.store/webpack-dev-server@3.11.3/node_modules/webpack-dev-server/client?http://192.168.124.102:80&sockPath=/sockjs-node (webpack)/hot/dev-server.js ./src/main.js

I think when there are incompatible updates in the version, a larger version number should be used for updates to avoid sudden errors in versions like "^ 2.10.0"

[Falke-Design]

Can you please try to import the minified version import "@geoman-io/leaflet-geoman-free/dist/leaflet-geoman.min.js"

[xiyuvi]

Can you please try to import the minified version import "@geoman-io/leaflet-geoman-free/dist/leaflet-geoman.min.js" Thank you for your help. After making the necessary changes, I still reported an error

// import "@geoman-io/leaflet-geoman-free";
import "@geoman-io/leaflet-geoman-free/dist/leaflet-geoman.min.js"

Error content

ERROR Failed to compile with 1 error 17:55:13 error in ./node_modules/.store/@geoman-io+leaflet-geoman-free@2.16.0/node_modules/@geoman-io/leaflet-geoman-free/dist/leaflet-geoman.min.js

Module parse failed: Unexpected token (1:4153) 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

(()=>{var ql=Object.create;var Kr=Object

My package.json file is as follows

{
  "name": "test",
  "scripts": {
    "dev": "vue-cli-service serve",
    "build:prod": "vue-cli-service build",
    "preview": "node build/index.js --preview",
    "lint": "eslint --ext .js,.vue src"
  },
  "husky": {
    "hooks": {
      "pre-commit": "lint-staged"
    }
  },
  "lint-staged": {
    "src/**/*.{js,vue}": [
      "eslint --fix",
      "git add"
    ]
  },
  "keywords": [
    "vue",
  ],
  "dependencies": {
    "@geoman-io/leaflet-geoman-free": "2.16.0",
    "@jiaminghi/data-view": "^2.10.0",
    "@riophae/vue-treeselect": "0.4.0",
    "@turf/turf": "^6.5.0",
    "axios": "0.21.0",
    "clipboard": "2.0.6",
    "core-js": "^3.22.5",
    "docx-preview": "0.1.20",
    "echarts": "^5.3.3",
    "echarts-gl": "^2.0.9",
    "element-resize-detector": "^1.2.2",
    "element-ui": "2.15.13",
    "file-saver": "2.0.4",
    "flv.js": "^1.6.2",
    "fuse.js": "6.4.3",
    "highlight.js": "9.18.5",
    "jquery": "^3.6.0",
    "js-beautify": "1.13.0",
    "js-cookie": "2.2.1",
    "jsencrypt": "3.0.0-rc.1",
    "leaflet": "^1.9.4",
    "leaflet-polylinedecorator": "^1.6.0",
    "leaflet.markercluster": "^1.5.3",
    "leaflet.pm": "^2.2.0",
    "nprogress": "0.2.0",
    "qs": "^6.11.2",
    "quill": "1.3.7",
    "screenfull": "5.0.2",
    "sortablejs": "1.10.2",
    "terraformer-wkt-parser": "^1.2.1",
    "v-viewer": "^1.6.4",
    "vue": "^2.7.14",
    "vue-amap": "^0.5.10",
    "vue-count-to": "1.0.13",
    "vue-cropper": "0.5.5",
    "vue-json-excel": "^0.3.0",
    "vue-router": "3.4.9",
    "vue2-teleport": "^1.0.1",
    "vuedraggable": "2.24.3",
    "vuex": "3.6.0"
  },
  "devDependencies": {
    "@vue/cli-plugin-babel": "4.4.6",
    "@vue/cli-plugin-eslint": "4.4.6",
    "@vue/cli-service": "4.4.6",
    "babel-eslint": "10.1.0",
    "chalk": "4.1.0",
    "connect": "3.6.6",
    "eslint": "7.15.0",
    "eslint-plugin-vue": "7.2.0",
    "lint-staged": "10.5.3",
    "runjs": "4.4.2",
    "sass": "~1.52.3",
    "sass-loader": "10.1.0",
    "script-ext-html-webpack-plugin": "2.1.5",
    "svg-sprite-loader": "5.1.1",
    "vue-template-compiler": "2.6.12"
  },
  "engines": {
    "node": ">=8.9",
    "npm": ">= 3.0.0"
  },
  "browserslist": [
    "> 1%",
    "last 2 versions"
  ]
}

babel.config.js
 module.exports = {
  presets: [
    // https://github.com/vuejs/vue-cli/tree/master/packages/@vue/babel-preset-app
    '@vue/cli-plugin-babel/preset'
  ],
  'env': {
    'development': {
      // babel-plugin-dynamic-import-node plugin only does one thing by converting all import() to require().
      // This plugin can significantly increase the speed of hot updates, when you have a large number of pages.
      'plugins': ['dynamic-import-node']
    }
  }
}

I want to know why this old project is not compatible with the new version, and how I can find a way to be compatible with the new version. God bless you

[Falke-Design]

Your problem is, that you ECMAScript Version doesn't understand the optional chaining ?. syntax. This has changed with the latest release, but we are not able to change this for you.

I suggest you to update your bundler and libraries, then you should be able to compile again.

Not releated to this issue, but you should remove leaflet.pm from your package.json. "leaflet.pm": "^2.2.0",

[xiyuvi]

Thank you, does my compiler support it Grammar, I have also extensively used this grammar in the project, and I am not sure what other grammars do not support

[xiyuvi]

Thank you, my compiler supports the "?." syntax, which I have also extensively used in projects. I am not sure what other syntax does not support

[Falke-Design]

Module parse failed: Unexpected token (1:4153)

When you look at the position of 1:4153 you will see that it points to ?.. Maybe your compiler supports ?. but not your loader

[xiyuvi]

Vue/cli5 can use the latest version, but Vue/cli4 will report an error. My skills are very poor and I don't know where I upgraded separately. "@ vue/cli plugin label": "~5.0.0", and

"@ vue/cli plugin slip": "~5.0.0", but the error still appears.

What I can confirm is that using Vue/cli5 directly can support the latest version. If others encounter compatibility issues, they can consider upgrading the Vue/cli scaffold directly

[giky]

I have the same problem

[tnnevol]

如果是 vue-cli 项目，请将 @geoman-io/leaflet-geoman-free 这个包加入babel-loader编译中，配置如下

# vue.config.js
module.exports = {
  transpileDependencies: ["@geoman-io/leaflet-geoman-free"]
}

[Fate-ui]

如果是 vue-cli 项目，请将 @geoman-io/leaflet-geoman-free 这个包加入babel-loader编译中，配置如下

# vue.config.js
module.exports = {
  transpileDependencies: ["@geoman-io/leaflet-geoman-free"]
}

感谢大佬提供的方案，解决了我的问题！

[lijiahao8898]

如果是 vue-cli 项目，请将 @geoman-io/leaflet-geoman-free 这个包加入babel-loader编译中，配置如下

# vue.config.js
module.exports = {
  transpileDependencies: ["@geoman-io/leaflet-geoman-free"]
}

谢谢大佬！

[xiyuvi]

transpileDependencies: ["@geoman-io/leaflet-geoman-free"]

谢谢大佬！解决了问题