使用 vaadin 14 构建时遇到 webpack 错误

Question

我的问题如下。 我正在尝试将 javascript 库集成到 vaadin 14 项目 (gridstackjs) 中。

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

这是我的java类，负责将js库导入到节点模块中。
这是我的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

这基本上告诉我，我需要 Webpack 中的特定加载器，它可以处理这个可选参数
（opts.columnOpts？.brakepoints）

是否可以通过某种方式向 Webpack 添加加载器来解决此问题？
目前我正在使用 vaadin 版本 - 14.11.5 (vaadin flow)

P.s.我尝试使用 vaadin 24.3.3，问题似乎消失了，但是 vaadin 24 使用的是 Vite 而不是 Webpack，我现在还不能真正使用 24

Answer 1

Vaadin 14 使用 webpack 4.x，不支持可选链接 (

?.

)。

您最好的选择是升级到 Vaadin 23，它主要与 Vaadin 14 兼容，但支持处理所有最新前端功能的 Vite。

否则你也许可以使用不使用可选链接的旧版本的 gridstack