Thiết kế website giá rẻ

Question

I am trying out the Vaadin Flow React integration and my goal is to add a simple button from next-ui to a view.

I create the java component. After the applications is built I see in the package.jsonthat the @nextui-org/react dependeny was added.

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 = "@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);
    }
}

I also create the corresponding .tsx file:

import {type ReactElement} from 'react';
import {type RgbaColor, RgbaColorPicker} from "react-colorful";
import {ReactAdapterElement, type RenderHooks} from "Frontend/generated/flow/ReactAdapter";

class RgbaColorPickerElement extends ReactAdapterElement {
  protected override render(hooks: RenderHooks): ReactElement | null { 
    const [color, setColor] =
      hooks.useState<RgbaColor>("color"); 

    return <RgbaColorPicker
      color={color}
      onChange={setColor}
    />; 
  }
}

customElements.define(
  "rgba-color-picker",
  RgbaColorPickerElement
);

Finally I am adding the button to a view:

package de.philipp.views.test;

import com.vaadin.flow.component.html.H1;
import com.vaadin.flow.component.orderedlayout.VerticalLayout;
import com.vaadin.flow.router.Route;
import com.vaadin.flow.server.auth.AnonymousAllowed;

import de.philipp.views.MainLayout;

@Route(value = "test", layout = MainLayout.class)
@AnonymousAllowed
public class TestView extends VerticalLayout {

    public TestView() {
        H1 h1 = new H1("Test");
        
        NextUiButton button = new NextUiButton();
        add(h1, button);
    }
}

But I get the following error:

com.vaadin.flow.server.ExecutionFailedException: Npm install has exited with non zero status. Some dependencies are not installed. Check npm command output
    at com.vaadin.flow.server.frontend.TaskRunNpmInstall.runNpmInstall(TaskRunNpmInstall.java:334) ~[flow-server-24.4.2.jar:24.4.2]
    at com.vaadin.flow.server.frontend.TaskRunNpmInstall.execute(TaskRunNpmInstall.java:115) ~[flow-server-24.4.2.jar:24.4.2]
    at com.vaadin.flow.server.frontend.NodeTasks.execute(NodeTasks.java:348) ~[flow-server-24.4.2.jar:24.4.2]
    at com.vaadin.base.devserver.startup.DevModeInitializer.runNodeTasks(DevModeInitializer.java:356) ~[vaadin-dev-server-24.4.2.jar:na]
    at com.vaadin.base.devserver.startup.DevModeInitializer.lambda$initDevModeHandler$0(DevModeInitializer.java:297) ~[vaadin-dev-server-24.4.2.jar:na]
    at java.base/java.util.concurrent.CompletableFuture$AsyncRun.run(CompletableFuture.java:1804) ~[na:na]
    at java.base/java.util.concurrent.CompletableFuture$AsyncRun.exec(CompletableFuture.java:1796) ~[na:na]
    at java.base/java.util.concurrent.ForkJoinTask.doExec(ForkJoinTask.java:387) ~[na:na]
    at java.base/java.util.concurrent.ForkJoinPool$WorkQueue.topLevelExec(ForkJoinPool.java:1312) ~[na:na]
    at java.base/java.util.concurrent.ForkJoinPool.scan(ForkJoinPool.java:1843) ~[na:na]
    at java.base/java.util.concurrent.ForkJoinPool.runWorker(ForkJoinPool.java:1808) ~[na:na]
    at java.base/java.util.concurrent.ForkJoinWorkerThread.run(ForkJoinWorkerThread.java:188) ~[na:na]

and the npm debug log shows:

606 verbose stack Error: Unable to resolve reference $react-dom
606 verbose stack     at get spec [as spec] (/home/philipp/Documents/java-projects/openbsp2/node/node_modules/npm/node_modules/@npmcli/arborist/lib/edge.js:202:15)
606 verbose stack     at #nodeFromEdge (/home/philipp/Documents/java-projects/openbsp2/node/node_modules/npm/node_modules/@npmcli/arborist/lib/arborist/build-ideal-tree.js:1054:46)
606 verbose stack     at #loadPeerSet (/home/philipp/Documents/java-projects/openbsp2/node/node_modules/npm/node_modules/@npmcli/arborist/lib/arborist/build-ideal-tree.js:1320:35)
606 verbose stack     at async #buildDepStep (/home/philipp/Documents/java-projects/openbsp2/node/node_modules/npm/node_modules/@npmcli/arborist/lib/arborist/build-ideal-tree.js:923:11)
606 verbose stack     at async Arborist.buildIdealTree (/home/philipp/Documents/java-projects/openbsp2/node/node_modules/npm/node_modules/@npmcli/arborist/lib/arborist/build-ideal-tree.js:203:7)
606 verbose stack     at async Promise.all (index 1)
606 verbose stack     at async Arborist.reify (/home/philipp/Documents/java-projects/openbsp2/node/node_modules/npm/node_modules/@npmcli/arborist/lib/arborist/reify.js:131:5)
606 verbose stack     at async Install.exec (/home/philipp/Documents/java-projects/openbsp2/node/node_modules/npm/lib/commands/install.js:150:5)
606 verbose stack     at async module.exports (/home/philipp/Documents/java-projects/openbsp2/node/node_modules/npm/lib/cli/entry.js:74:5)
607 verbose cwd /home/philipp/Documents/java-projects/openbsp2
608 verbose Linux 6.8.0-39-generic
609 verbose node v20.14.0
610 verbose npm  v10.7.0
611 error Unable to resolve reference $react-dom
612 verbose exit 1
613 verbose code 1
614 silly unfinished npm timer reify 1722091492412
615 silly unfinished npm timer reify:loadTrees 1722091492417
616 silly unfinished npm timer idealTree:buildDeps 1722091493590
617 silly unfinished npm timer idealTree:node_modules/@nextui-org/use-aria-accordion 1722091505384
618 error A complete log of this run can be found in: /home/philipp/.npm/_logs/2024-07-27T14_44_51_799Z-debug-0.log

My pom.xml

<?xml version="1.0" encoding="UTF-8"?>
<project xmlns="http://maven.apache.org/POM/4.0.0"
    xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
    xsi:schemaLocation="http://maven.apache.org/POM/4.0.0 http://maven.apache.org/xsd/maven-4.0.0.xsd">
    <modelVersion>4.0.0</modelVersion>
    <!-- Project from
    https://start.vaadin.com/project/f3a5be16-7eee-4ba4-a216-38d2fcb9c1f2 -->
    <groupId>de.philipp</groupId>
    <artifactId>open-bsp</artifactId>
    <name>open-bsp</name>
    <version>1.0-SNAPSHOT</version>
    <packaging>jar</packaging>

    <properties>
        <java.version>21</java.version>
        <vaadin.version>24.4.4</vaadin.version>
    </properties>

    <parent>
        <groupId>org.springframework.boot</groupId>
        <artifactId>spring-boot-starter-parent</artifactId>
        <version>3.2.8</version>
    </parent>

    <repositories>
        <repository>
            <id>Vaadin Directory</id>
            <url>https://maven.vaadin.com/vaadin-addons</url>
            <snapshots>
                <enabled>false</enabled>
            </snapshots>
        </repository>
    </repositories>

    <dependencyManagement>
        <dependencies>
            <dependency>
                <groupId>com.vaadin</groupId>
                <artifactId>vaadin-bom</artifactId>
                <version>${vaadin.version}</version>
                <type>pom</type>
                <scope>import</scope>
            </dependency>
        </dependencies>
    </dependencyManagement>

    <dependencies>
        <dependency>
            <groupId>com.vaadin</groupId>
            <!-- Replace artifactId with vaadin-core to use only free components -->
            <artifactId>vaadin</artifactId>
        </dependency>
        <dependency>
            <groupId>com.vaadin</groupId>
            <artifactId>vaadin-spring-boot-starter</artifactId>
        </dependency>
        <dependency>
            <groupId>org.parttio</groupId>
            <artifactId>line-awesome</artifactId>
            <version>2.0.0</version>
        </dependency>

        <dependency>
            <groupId>org.postgresql</groupId>
            <artifactId>postgresql</artifactId>
            <scope>runtime</scope>
        </dependency>

        <dependency>
            <groupId>org.springframework.boot</groupId>
            <artifactId>spring-boot-starter-data-jpa</artifactId>
        </dependency>

        <dependency>
            <groupId>org.springframework.boot</groupId>
            <artifactId>spring-boot-starter-validation</artifactId>
        </dependency>
        <dependency>
            <groupId>org.springframework.boot</groupId>
            <artifactId>spring-boot-devtools</artifactId>
            <optional>true</optional>
        </dependency>
        <dependency>
            <groupId>org.springframework.boot</groupId>
            <artifactId>spring-boot-starter-test</artifactId>
            <scope>test</scope>
        </dependency>
        <dependency>
            <groupId>com.vaadin</groupId>
            <artifactId>vaadin-testbench-junit5</artifactId>
            <scope>test</scope>
        </dependency>
        <dependency>
            <groupId>org.springframework.boot</groupId>
            <artifactId>spring-boot-starter-security</artifactId>
        </dependency>
        <dependency>
            <groupId>org.mindrot</groupId>
            <artifactId>jbcrypt</artifactId>
            <version>0.4</version>
        </dependency>
    </dependencies>

    <build>
        <defaultGoal>spring-boot:run</defaultGoal>
        <plugins>
            <plugin>
                <groupId>org.springframework.boot</groupId>
                <artifactId>spring-boot-maven-plugin</artifactId>
            </plugin>

            <plugin>
                <groupId>com.vaadin</groupId>
                <artifactId>vaadin-maven-plugin</artifactId>
                <version>${vaadin.version}</version>
                <executions>
                    <execution>
                        <goals>
                            <goal>prepare-frontend</goal>
                        </goals>
                    </execution>
                </executions>
                <configuration>
                    <nodeAutoUpdate>true</nodeAutoUpdate>
                </configuration>
            </plugin>
        </plugins>
    </build>

    <profiles>
        <profile>
            <!-- Production mode is activated using -Pproduction -->
            <id>production</id>
            <dependencies>
                <!-- Exclude development dependencies from production -->
                <dependency>
                    <groupId>com.vaadin</groupId>
                    <artifactId>vaadin-core</artifactId>
                    <exclusions>
                        <exclusion>
                            <groupId>com.vaadin</groupId>
                            <artifactId>vaadin-dev</artifactId>
                        </exclusion>
                    </exclusions>
                </dependency>
            </dependencies>
            <build>
                <plugins>
                    <plugin>
                        <groupId>com.vaadin</groupId>
                        <artifactId>vaadin-maven-plugin</artifactId>
                        <version>${vaadin.version}</version>
                        <executions>
                            <execution>
                                <goals>
                                    <goal>build-frontend</goal>
                                </goals>
                                <phase>compile</phase>
                            </execution>
                        </executions>
                    </plugin>
                </plugins>
            </build>
        </profile>

        <profile>
            <id>it</id>
            <build>
                <plugins>
                    <plugin>
                        <groupId>org.springframework.boot</groupId>
                        <artifactId>spring-boot-maven-plugin</artifactId>
                        <executions>
                            <execution>
                                <id>start-spring-boot</id>
                                <phase>pre-integration-test</phase>
                                <goals>
                                    <goal>start</goal>
                                </goals>
                            </execution>
                            <execution>
                                <id>stop-spring-boot</id>
                                <phase>post-integration-test</phase>
                                <goals>
                                    <goal>stop</goal>
                                </goals>
                            </execution>
                        </executions>
                    </plugin>

                    <!-- Runs the integration tests (*IT) after the server is
                    started -->
                    <plugin>
                        <groupId>org.apache.maven.plugins</groupId>
                        <artifactId>maven-failsafe-plugin</artifactId>
                        <executions>
                            <execution>
                                <goals>
                                    <goal>integration-test</goal>
                                    <goal>verify</goal>
                                </goals>
                            </execution>
                        </executions>
                        <configuration>
                            <trimStackTrace>false</trimStackTrace>
                            <enableAssertions>true</enableAssertions>
                        </configuration>
                    </plugin>
                </plugins>
            </build>
        </profile>

    </profiles>
</project>

I used npm list to verfiy that react-dom next ui etc. is installed and it is. I also tried a maven clean install. Lastly I deleted the node_modules folder and the package-lock.json and genereated them again.

Thiết kế website giá rẻ

Danh mục

Vaadin Flow React Integration – ExecutionFailedException: Npm install has exited with non zero status. Some dependencies are not installed