Vaadin Flow集成React遇npm安装错误：无法解析$react-dom

问题背景 #

尝试在Vaadin Flow视图中集成NextUI的React按钮，执行了以下步骤：

1. 创建Java组件NextUiButton，通过@NpmPackage引入@nextui-org/react依赖
2. 创建对应TSX文件（实际实现的是颜色选择器组件，与Java组件不匹配）
3. 将按钮添加到TestView视图

运行时触发npm安装失败，日志核心错误为Unable to resolve reference $react-dom，已尝试mvn clean install、删除node_modules和package-lock.json重新生成，但问题未解决。

解决方案 #

1. 修正React组件TSX文件 #

当前TSX文件实现的是颜色选择器，与Java端NextUiButton完全不匹配，会导致组件定义错误并干扰依赖解析。替换为对应NextUI按钮的TSX代码：

import { type ReactElement } from 'react';
import { Button } from '@nextui-org/react';
import { ReactAdapterElement, type RenderHooks } from "Frontend/generated/flow/ReactAdapter";

class NextUiButtonElement extends ReactAdapterElement {
  protected override render(hooks: RenderHooks): ReactElement | null {
    // 从Vaadin组件状态获取label值
    const [label] = hooks.useState<string>("label");

    return <Button variant="solid">{label}</Button>;
  }
}

// 自定义元素名称必须与Java组件的@Tag注解值一致
customElements.define("next-ui-button", NextUiButtonElement);

2. 显式添加React和ReactDOM依赖 #

NextUI v2依赖React 18，Vaadin的ReactAdapter需要明确声明React/ReactDOM依赖。在Java组件类上补充对应的@NpmPackage注解：

package de.philipp.views.test;

import com.vaadin.flow.component.Tag;
import com.vaadin.flow.component.dependency.JsModule;
import com.vaadin.flow.component.dependency.NpmPackage;
import com.vaadin.flow.component.react.ReactAdapterComponent;

@NpmPackage(value = "react", version = "18.2.0")
@NpmPackage(value = "react-dom", version = "18.2.0")
@NpmPackage(value = "@nextui-org/react", version = "2.4.6")
@JsModule("./react/next-ui-button.tsx")
@Tag("next-ui-button")
public class NextUiButton extends ReactAdapterComponent {

    public NextUiButton() {
        setLabel("Click me");
    }

    public String getLabel() {
        return getState("label", String.class);
    }

    public void setLabel(String label) {
        setState("label", label);
    }
}

3. 彻底清理并重建项目 #

执行以下命令，强制Vaadin清理所有前端缓存和依赖，重新安装：

mvn clean install -Dvaadin.clean.frontend=true

错误原因说明 #

• TSX组件与Java组件不匹配，导致自定义元素注册错误，干扰了Vaadin的前端构建流程。
• $react-dom解析失败是因为NextUI依赖ReactDOM，但Vaadin自动依赖管理未正确识别该依赖，需要显式通过@NpmPackage声明兼容版本的React和ReactDOM。

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