Vaadin 14集成gridstackjs构建时遇Webpack错误求助

我在Vaadin 14.11.5（Vaadin Flow）项目中尝试集成gridstackjs库，通过如下Java类导入依赖：

@NpmPackage(value = "gridstack", version = "10.1.2")
@JsModule("./index.js")
@CssImport("./style.css")
public class GridStack extends Div {
...
}

我的index.js代码如下：

import 'gridstack/dist/gridstack.min.css';
import 'gridstack/dist/gridstack-extra.min.css';
import { GridStack } from 'gridstack';

window.initGridStack = (jsonOpts, element) => {
    const opts = JSON.parse(jsonOpts);
    const grid = GridStack.init({...opts, column: 12}, element);
}

执行Maven构建时出现Webpack错误：

ERROR in ../node_modules/gridstack/dist/gridstack.js?babel-target=es6 184:29
Module parse failed: Unexpected token (184:29)
File was processed with these loaders:
 * ../node_modules/babel-loader/lib/index.js
You may need an additional loader to handle the result of these loaders.
|       opts._alwaysShowResizeHandle = opts.alwaysShowResizeHandle;
|     }
>     var bk = opts.columnOpts?.breakpoints;
|     // LEGACY: oneColumnMode stuff changed in v10.x - check if user explicitly set something to convert over
|     var oldOpts = opts;
 @ ../node_modules/@vaadin/flow-frontend?babel-target=es6 3:0-38 6:13-22

错误提示需要能处理可选链运算符（opts.columnOpts?.breakpoints）的Webpack Loader。我曾尝试Vaadin 24.3.3，该版本使用Vite无此问题，但目前无法升级到Vaadin24，请问能否通过添加Webpack Loader解决该问题？

可以通过添加Babel插件处理可选链运算符来解决问题，具体步骤如下：

• 安装Babel可选链插件
  在项目根目录执行以下npm命令，安装对应的开发依赖：

  npm install @babel/plugin-proposal-optional-chaining --save-dev
  

• 配置Webpack扩展规则
  在项目根目录创建webpack.config.js文件，添加针对gridstack模块的Babel处理规则：

  module.exports = {
    module: {
      rules: [
        {
          test: /\.js$/,
          include: /node_modules\/gridstack/,
          use: {
            loader: 'babel-loader',
            options: {
              plugins: ['@babel/plugin-proposal-optional-chaining']
            }
          }
        }
      ]
    }
  };
  

• 重新执行构建
  运行Maven构建命令验证修复效果：

  mvn clean install
  

说明：Vaadin 14默认的Webpack和Babel版本未支持ES2020的可选链语法，而gridstack v10+版本使用了这类新特性。通过上述配置，让Babel专门处理gridstack的代码，补上可选链语法的支持，无需升级整个Vaadin版本。

内容的提问来源于stack exchange，提问作者tobarata