Using Addon that references to a template file from npm package doesn't work in production mode #8493

haijian-vaadin · 2020-06-03T06:51:31Z

To reproduce:

Download the attached project
Run mvn clean jetty:run -Pproduction
Go to localhost:8080
You see an exception from the log
java.lang.IllegalStateException: Couldn't find the definition of the element with tag 'color-picker-field' in any template file declared using '@JsModule' annotations. Check the availability of the template files in your WAR file or provide alternative implementation of the method getTemplateContent() which should return an element representing the content of the template file

Observations:

The example uses the color picker field addon, which references the template file through npm package @JsModule("@appreciated/color-picker-field/src/color-picker-field.js")
The addon works in V14.1 and V14.2
The addon works in development mode in V15 and V16
The addon does not work in production mode in V15 and V16

The text was updated successfully, but these errors were encountered:

manolo · 2020-06-04T09:22:49Z

This is another corner case of the problem described in #8053
The issue was introduced in the 9e03713 change which optimizes the size of the stats file stored in final war file.
In consequence stats file in production differs from the one used during devmode.

It can be checked by running the attached project using V15.0.0.beta1 that does not fail, and V15.0.0.rc1 that fails

I did a quick research and comparing the files there is a block in dev-mode that includes sources for the addon sources in devmode different to the one in production

DevMode

{
 "hash": "f9b0b320c1711b3d3fe9",
 "assetsByChunkName": {
  "bundle": "build/vaadin-bundle-37aa0ca9571e68253d47.cache.js",
  "export": "build/vaadin-export-5e943eab1a6a66a2e61e.cache.js"
 },
 "chunks": [
  {
   "id": 0,
   "names": [],
   "files": [
    "build/vaadin-0-b72fc8ece0bf043d4a70.cache.js"
   ],
   "hash": "553ae09764a756374bd6",
   "modules": [
    {
     "id": "../node_modules/.pnpm/registry.npmjs.org/@appreciated/color-picker-field/2.0.0-beta.4/node_modules/@appreciated/color-picker-field/src/color-picker-field.js",
     "name": "../node_modules/.pnpm/registry.npmjs.org/@appreciated/color-picker-field/2.0.0-beta.4/node_modules/@appreciated/color-picker-field/src/color-picker-field.js",
     "source": ...
    },
    {
     "id": "../node_modules/.pnpm/registry.npmjs.org/@appreciated/color-picker-field/2.0.0-beta.4/node_modules/@appreciated/color-picker-field/theme/lumo/color-picker-field-styles.js",
     "name": "../node_modules/.pnpm/registry.npmjs.org/@appreciated/color-picker-field/2.0.0-beta.4/node_modules/@appreciated/color-picker-field/theme/lumo/color-picker-field-styles.js",
     "source": ...
    },
    ...

ProdMode

{
 "hash": "852f4c3375de68cd5c96",
 "assetsByChunkName": {
  "bundle": "build/vaadin-bundle-7939b486526373fdb508.cache.js",
  "export": "build/vaadin-export-c541e68fbbb7e9b8f5dd.cache.js"
 },
 "chunks": [
  {
   "id": 0,
   "names": [
    "bundle"
   ],
   "files": [
    "build/vaadin-bundle-7939b486526373fdb508.cache.js"
   ],
   "hash": "c73d7f02aee62936131d",
   "modules": [
    {
     "id": 104,
     "name": "../target/index.ts + 2 modules"
    }
   ]
  },

manolo · 2020-06-04T09:39:51Z

UPDATE: the project in V14.2.0 does not fail, but it has the commit optimising the stats

For some reason it is added to the modules key instead of to the chunks one as it was above

 "modules": [
  {
   "id": 220,
   "name": "../target/frontend/generated-flow-imports.js?babel-target=es6 + 12 modules",
   "modules": [
    {
     "name": "../target/frontend/generated-flow-imports.js?babel-target=es6",
     "source": 1604
    },
    {
     "name": "../node_modules/@vaadin/vaadin-ordered-layout/theme/lumo/vaadin-vertical-layout.js?babel-target=es6",
     "source": 90
    },
    {
     "name": "../node_modules/@appreciated/color-picker-field/theme/lumo/color-picker-field.js?babel-target=es6",
     "source": 82
    },
    {
     "name": "../node_modules/@vaadin/vaadin-lumo-styles/icons.js?babel-target=es6",
     "source": 87
    },
    {
     "name": "../node_modules/@appreciated/color-picker-field/theme/lumo/color-picker-field-styles.js?babel-target=es6",
     "source": 3446
    },
    {
     "name": "../node_modules/@vaadin/vaadin-ordered-layout/theme/lumo/vaadin-vertical-layout-styles.js?babel-target=es6",
     "source": 1665
    },
    {
     "name": "../node_modules/@vaadin/vaadin-ordered-layout/src/vaadin-vertical-layout.js?babel-target=es6",
     "source": 2299
    },
    {
     "name": "../node_modules/@appreciated/color-picker-field/src/color-picker-field.js?babel-target=es6",
     "source": 15033
    },

manolo · 2020-06-08T06:13:14Z

Just for adding more info, I did some manual adjustments to the stats, and removing all source blocks but those whose name is in target/frontend/generated-flow-imports*.js files, works always. But it needs that webpack visit those files somehow.

Also take into account that chunk modules may have submodules. Fixes #8493

kobazzo · 2020-06-09T10:01:52Z

Thanks. Now what i must do to take the fix?

caalador · 2020-06-09T10:10:37Z

@kobazzo Until the next release 3.1.2 and the 16 version is out you would need to use the 3.1-SNAPSHOT

kobazzo · 2020-06-09T10:17:30Z

@kobazzo Until the next release 3.1.2 and the 16 version is out you would need to use the 3.1-SNAPSHOT

Thanks.

3.1-SNAPSHOT of what? What is the pom import that i need to use?

thank you.

caalador · 2020-06-09T10:28:30Z

you should be able to update the Vaadin version to 16.0-SNAPSHOT

Else you might need to update with the following set:

<repositories>
        <repository>
            <id>vaadin-prereleases</id>
            <url>https://maven.vaadin.com/vaadin-prereleases/</url>
            <snapshots>
                <enabled>true</enabled>
            </snapshots>
        </repository>
</repositories>

<pluginRepositories>
        <pluginRepository>
            <id>vaadin-prereleases</id>
            <url>https://maven.vaadin.com/vaadin-prereleases/</url>
            <snapshots>
                <enabled>true</enabled>
            </snapshots>
        </pluginRepository>
</pluginRepositories>

<dependencies>
    <dependency>
        <groupId>com.vaadin</groupId>
        <artifactId>flow-server</artifactId>
        <version>3.1-SNAPSHOT</version>
    </dependency>
    <dependency>
        <groupId>com.vaadin</groupId>
        <artifactId>flow-client</artifactId>
        <version>3.1-SNAPSHOT</version>
    </dependency>
</dependencies>

<plugins>
    <plugin>
        <groupId>com.vaadin</groupId>
        <artifactId>flow-maven-plugin</artifactId>
        <version>3.1-SNAPSHOT</version>
    </plugin>
</plugins>

Note that you need to switch the vaadin-maven-plugin to flow-maven-plugin when you use this

kobazzo · 2020-06-11T12:10:56Z

you should be able to update the Vaadin version to 16.0-SNAPSHOT

Else you might need to update with the following set:

<repositories>
        <repository>
            <id>vaadin-prereleases</id>
            <url>https://maven.vaadin.com/vaadin-prereleases/</url>
            <snapshots>
                <enabled>true</enabled>
            </snapshots>
        </repository>
</repositories>

<pluginRepositories>
        <pluginRepository>
            <id>vaadin-prereleases</id>
            <url>https://maven.vaadin.com/vaadin-prereleases/</url>
            <snapshots>
                <enabled>true</enabled>
            </snapshots>
        </pluginRepository>
</pluginRepositories>

<dependencies>
    <dependency>
        <groupId>com.vaadin</groupId>
        <artifactId>flow-server</artifactId>
        <version>3.1-SNAPSHOT</version>
    </dependency>
    <dependency>
        <groupId>com.vaadin</groupId>
        <artifactId>flow-client</artifactId>
        <version>3.1-SNAPSHOT</version>
    </dependency>
</dependencies>

<plugins>
    <plugin>
        <groupId>com.vaadin</groupId>
        <artifactId>flow-maven-plugin</artifactId>
        <version>3.1-SNAPSHOT</version>
    </plugin>
</plugins>

Note that you need to switch the vaadin-maven-plugin to flow-maven-plugin when you use this

Thank you.
Trying to use 16.0-SNAPSHOT:

    <properties>
        <project.build.sourceEncoding>UTF-8</project.build.sourceEncoding>
        <project.reporting.outputEncoding>UTF-8
        </project.reporting.outputEncoding>
        <maven.compiler.source>1.8</maven.compiler.source>
        <maven.compiler.target>1.8</maven.compiler.target>
        <failOnMissingWebXml>false</failOnMissingWebXml>

        <vaadin.version>16.0-SNAPSHOT</vaadin.version>
    </properties>
...
        <dependency>
            <groupId>com.vaadin</groupId>
            <artifactId>vaadin-testbench</artifactId>
            <scope>test</scope>
        </dependency>

But i have this error:

Could not download sources or javadoc
Could not read maven project
Some problems were encountered while processing the POMs:
[ERROR] Non-resolvable import POM: Could not find artifact com.vaadin:vaadin-bom:pom:16.0-SNAPSHOT @ line 23, column 25
[ERROR] 'dependencies.dependency.version' for com.vaadin:vaadin-core:jar is missing. @ line 34, column 21
[ERROR] 'dependencies.dependency.version' for com.vaadin:vaadin-testbench:jar is missing. @ line 149, column 21
[ERROR] 'dependencies.dependency.version' for com.vaadin:flow-server-production-mode:jar is missing. @ line 286, column 29

Can you help me please?

Thank you.

caalador · 2020-06-12T04:48:27Z

Do you have vaadin-prereleases as a repository and pluginRepository?

If you have those then it should find the snapshots.

e.g. add the following

<repositories>
        <repository>
            <id>vaadin-prereleases</id>
            <url>https://maven.vaadin.com/vaadin-prereleases/</url>
            <snapshots>
                <enabled>true</enabled>
            </snapshots>
        </repository>
</repositories>

<pluginRepositories>
        <pluginRepository>
            <id>vaadin-prereleases</id>
            <url>https://maven.vaadin.com/vaadin-prereleases/</url>
            <snapshots>
                <enabled>true</enabled>
            </snapshots>
        </pluginRepository>
</pluginRepositories>

Also take into account that chunk modules may have submodules. Fixes #8493

stefanuebe · 2021-06-24T07:01:46Z

This issue seems to still exists somehow, we have that now in a V20 project. I'll try to create a sample project with the reproducable issue.

haijian-vaadin added hilla Issues related to Hilla Impact: High Severity: Major labels Jun 3, 2020

haijian-vaadin mentioned this issue Jun 3, 2020

JsModule Annotation is not resolved if refering to a file inside a dependency #7752

Closed

manolo self-assigned this Jun 3, 2020

pleku added bug and removed hilla Issues related to Hilla labels Jun 8, 2020

caalador assigned caalador and unassigned manolo Jun 8, 2020

caalador added a commit that referenced this issue Jun 8, 2020

Chunk module submodules

aa4cecb

Also take into account that chunk modules may have submodules. Fixes #8493

caalador mentioned this issue Jun 8, 2020

Chunk module submodules #8519

Merged

caalador closed this as completed in #8519 Jun 8, 2020

caalador added a commit that referenced this issue Jun 8, 2020

Chunk module submodules (#8519)

cd508a1

Also take into account that chunk modules may have submodules. Fixes #8493

caalador added a commit that referenced this issue Jun 8, 2020

Chunk module submodules (#8519)

51b8dfd

Also take into account that chunk modules may have submodules. Fixes #8493

Gubancs mentioned this issue Jul 5, 2020

Couldn't find the definition of the element with tag 'leaflet-map' Gubancs/leaflet4vaadin#20

Open

mshabarov pushed a commit that referenced this issue Aug 24, 2020

Chunk module submodules (#8519)

62a3678

Also take into account that chunk modules may have submodules. Fixes #8493

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Using Addon that references to a template file from npm package doesn't work in production mode #8493

Using Addon that references to a template file from npm package doesn't work in production mode #8493

haijian-vaadin commented Jun 3, 2020

manolo commented Jun 4, 2020

manolo commented Jun 4, 2020 •

edited

Loading

manolo commented Jun 8, 2020

kobazzo commented Jun 9, 2020

caalador commented Jun 9, 2020

kobazzo commented Jun 9, 2020

caalador commented Jun 9, 2020

kobazzo commented Jun 11, 2020 •

edited

Loading

caalador commented Jun 12, 2020

stefanuebe commented Jun 24, 2021

Using Addon that references to a template file from npm package doesn't work in production mode #8493

Using Addon that references to a template file from npm package doesn't work in production mode #8493

Comments

haijian-vaadin commented Jun 3, 2020

manolo commented Jun 4, 2020

manolo commented Jun 4, 2020 • edited Loading

manolo commented Jun 8, 2020

kobazzo commented Jun 9, 2020

caalador commented Jun 9, 2020

kobazzo commented Jun 9, 2020

caalador commented Jun 9, 2020

kobazzo commented Jun 11, 2020 • edited Loading

caalador commented Jun 12, 2020

stefanuebe commented Jun 24, 2021

manolo commented Jun 4, 2020 •

edited

Loading

kobazzo commented Jun 11, 2020 •

edited

Loading