vue2 项目使用ol openlayers报错

vue2项目中安装最新版本的openlayers ol:9.0.0报错了，将版本降为7.2.2后，重新运行就可以了。
 Failed to compile with 5 errors                                                                                                      10:45:36 AM

 error  in ./node_modules/color-parse/index.js

Module parse failed: Unexpected token (146:34)
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
|               })
| 
>               space = cstr.match(/([a-z])/ig)?.join('')?.toLowerCase() || 'rgb'
|       }
| 

 @ ./node_modules/color-rgba/index.js 2:0-31 14:14-19
 @ ./node_modules/ol/color.js
 @ ./node_modules/ol/renderer/canvas/Layer.js
 @ ./node_modules/ol/renderer/canvas/TileLayer.js
 @ ./node_modules/ol/layer/Tile.js
 @ ./node_modules/cache-loader/dist/cjs.js??ref--13-0!./node_modules/babel-loader/lib!./node_modules/cache-loader/dist/cjs.js??ref--1-0!./node_modules/vue-loader/lib??vue-loader-options!./src/components/tMap/index.vue?vue&type=script&lang=js
 @ ./src/components/tMap/index.vue?vue&type=script&lang=js
 @ ./src/components/tMap/index.vue
 @ ./node_modules/cache-loader/dist/cjs.js??ref--13-0!./node_modules/babel-loader/lib!./node_modules/cache-loader/dist/cjs.js??ref--1-0!./node_modules/vue-loader/lib??vue-loader-options!./src/views/dangan/index.vue?vue&type=script&lang=js
 @ ./src/views/dangan/index.vue?vue&type=script&lang=js
 @ ./src/views/dangan/index.vue
 @ ./src/router/index.js
 @ ./src/main.js
 @ multi (webpack)-dev-server/client?http://192.168.1.8:8081&sockPath=/sockjs-node (webpack)/hot/dev-server.js ./src/main.js

 error  in ./node_modules/ol/structs/LRUCache.js

Module parse failed: Unexpected token (229:30)
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
|    */
|   peek(key) {
>     return this.entries_[key]?.value_;
|   }
| 

 @ ./node_modules/ol/TileCache.js 4:0-45 7:24-32
 @ ./node_modules/ol/source/TileImage.js
 @ ./node_modules/ol/source/XYZ.js
 @ ./node_modules/cache-loader/dist/cjs.js??ref--13-0!./node_modules/babel-loader/lib!./node_modules/cache-loader/dist/cjs.js??ref--1-0!./node_modules/vue-loader/lib??vue-loader-options!./src/components/tMap/index.vue?vue&type=script&lang=js
 @ ./src/components/tMap/index.vue?vue&type=script&lang=js
 @ ./src/components/tMap/index.vue
 @ ./node_modules/cache-loader/dist/cjs.js??ref--13-0!./node_modules/babel-loader/lib!./node_modules/cache-loader/dist/cjs.js??ref--1-0!./node_modules/vue-loader/lib??vue-loader-options!./src/views/dangan/index.vue?vue&type=script&lang=js
 @ ./src/views/dangan/index.vue?vue&type=script&lang=js
 @ ./src/views/dangan/index.vue
 @ ./src/router/index.js
 @ ./src/main.js
 @ multi (webpack)-dev-server/client?http://192.168.1.8:8081&sockPath=/sockjs-node (webpack)/hot/dev-server.js ./src/main.js

 error  in ./node_modules/ol/style/Style.js

Module parse failed: Unexpected token (244:26)
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
|     }
|     return new Style({
>       geometry: geometry ?? undefined,
|       fill: this.getFill() ? this.getFill().clone() : undefined,
|       image: this.getImage() ? this.getImage().clone() : undefined,

 @ ./node_modules/ol/layer/BaseVector.js 6:0-9:27 270:35-50 284:11-29 292:23-28 305:23-28 312:33-38
 @ ./node_modules/ol/renderer/Composite.js
 @ ./node_modules/ol/Map.js
 @ ./node_modules/cache-loader/dist/cjs.js??ref--13-0!./node_modules/babel-loader/lib!./node_modules/cache-loader/dist/cjs.js??ref--1-0!./node_modules/vue-loader/lib??vue-loader-options!./src/components/tMap/index.vue?vue&type=script&lang=js
 @ ./src/components/tMap/index.vue?vue&type=script&lang=js
 @ ./src/components/tMap/index.vue
 @ ./node_modules/cache-loader/dist/cjs.js??ref--13-0!./node_modules/babel-loader/lib!./node_modules/cache-loader/dist/cjs.js??ref--1-0!./node_modules/vue-loader/lib??vue-loader-options!./src/views/dangan/index.vue?vue&type=script&lang=js
 @ ./src/views/dangan/index.vue?vue&type=script&lang=js
 @ ./src/views/dangan/index.vue
 @ ./src/router/index.js
 @ ./src/main.js
 @ multi (webpack)-dev-server/client?http://192.168.1.8:8081&sockPath=/sockjs-node (webpack)/hot/dev-server.js ./src/main.js

 error  in ./node_modules/ol/style/RegularShape.js

Module parse failed: Unexpected token (459:57)
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
| 
|     if (this.stroke_) {
>       strokeStyle = asColorLike(this.stroke_.getColor() ?? defaultStrokeStyle);
|       strokeWidth = this.stroke_.getWidth() ?? defaultLineWidth;
|       lineDash = this.stroke_.getLineDash();

 @ ./node_modules/ol/render/canvas/style.js 8:0-55 840:20-32
 @ ./node_modules/ol/layer/BaseVector.js
 @ ./node_modules/ol/renderer/Composite.js
 @ ./node_modules/ol/Map.js
 @ ./node_modules/cache-loader/dist/cjs.js??ref--13-0!./node_modules/babel-loader/lib!./node_modules/cache-loader/dist/cjs.js??ref--1-0!./node_modules/vue-loader/lib??vue-loader-options!./src/components/tMap/index.vue?vue&type=script&lang=js
 @ ./src/components/tMap/index.vue?vue&type=script&lang=js
 @ ./src/components/tMap/index.vue
 @ ./node_modules/cache-loader/dist/cjs.js??ref--13-0!./node_modules/babel-loader/lib!./node_modules/cache-loader/dist/cjs.js??ref--1-0!./node_modules/vue-loader/lib??vue-loader-options!./src/views/dangan/index.vue?vue&type=script&lang=js
 @ ./src/views/dangan/index.vue?vue&type=script&lang=js
 @ ./src/views/dangan/index.vue
 @ ./src/router/index.js
 @ ./src/main.js
 @ multi (webpack)-dev-server/client?http://192.168.1.8:8081&sockPath=/sockjs-node (webpack)/hot/dev-server.js ./src/main.js

 error  in ./node_modules/ol/render/canvas/ZIndexContext.js

Module parse failed: Unexpected token (64:18)
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
|    * @return {ZIndexContext} This.
|    */
>   pushMethodArgs_ = (...args) => {
|     this.instructions_[this.zIndex + this.offset_].push(args);
|     return this;

 @ ./node_modules/ol/renderer/canvas/Layer.js 7:0-65 303:34-47
 @ ./node_modules/ol/renderer/canvas/TileLayer.js
 @ ./node_modules/ol/layer/Tile.js
 @ ./node_modules/cache-loader/dist/cjs.js??ref--13-0!./node_modules/babel-loader/lib!./node_modules/cache-loader/dist/cjs.js??ref--1-0!./node_modules/vue-loader/lib??vue-loader-options!./src/components/tMap/index.vue?vue&type=script&lang=js
 @ ./src/components/tMap/index.vue?vue&type=script&lang=js
 @ ./src/components/tMap/index.vue
 @ ./node_modules/cache-loader/dist/cjs.js??ref--13-0!./node_modules/babel-loader/lib!./node_modules/cache-loader/dist/cjs.js??ref--1-0!./node_modules/vue-loader/lib??vue-loader-options!./src/views/dangan/index.vue?vue&type=script&lang=js
 @ ./src/views/dangan/index.vue?vue&type=script&lang=js
 @ ./src/views/dangan/index.vue
 @ ./src/router/index.js
 @ ./src/main.js
 @ multi (webpack)-dev-server/client?http://192.168.1.8:8081&sockPath=/sockjs-node (webpack)/hot/dev-server.js ./src/main.js