V14.5.x Import Typescript file from a jar module

[jcgueriaud1]

In a multimodule application, I have javascript files in a jar module that can be used.

If I add typescript file in a jar module, I have this error:

  Failed to find the following imports in the `node_modules` tree:
      - @vaadin/flow-frontend/my-test-component.ts

It's ignored in this class TaskCopyFrontendFiles :

 private static final String[] WILDCARD_INCLUSIONS = new String[] {
           "**/*.js", "**/*.css" };

Is it an intended behavior?

In this branch you can build and see the error: https://github.com/jcgueriaud1/multimodule-spring-vaadin-app/tree/v14_5/ts_in_module

Both files (js and ts) are in the same directory but only the javascript file is taken:
https://github.com/jcgueriaud1/multimodule-spring-vaadin-app/tree/v14_5/ts_in_module/ui-module/src/main/resources/META-INF/resources/frontend

[ggecy]

I haven't tested it with Vaadin 19, but it is already added there in that version:

public class TaskCopyFrontendFiles implements FallibleCommand {
    private static final String[] WILDCARD_INCLUSIONS = new String[] {
            "**/*.js", "**/*.css", "**/*.ts" };

so I guess it would work with Vaadin 19

[miguelatvaadin]

Hi @jcgueriaud1 ,

thanks for submitting the issue.

As far as I have seen this was solved at TaskCopyFrontendFiles with #6140. Available since https://github.com/vaadin/flow/releases/tag/3.0.0.alpha1, https://github.com/vaadin/platform/releases/tag/14.1.0.alpha2.

In fact, it has worked for me with the provided project. I was only able to reproduce the issue when manually removing the file from @vaadin/flow-frontend and relying on the maven plugin to build the frontend. There effectively the ts files where not copied.

So, the issue seems to be related to the maven plugin. I will qualify the issue so it can be addressed.

[ggecy]

Hi @jcgueriaud1 ,

thanks for submitting the issue.

As far as I have seen this was solved at TaskCopyFrontendFiles with #6140. Available since https://github.com/vaadin/flow/releases/tag/3.0.0.alpha1, https://github.com/vaadin/platform/releases/tag/14.1.0.alpha2.

In fact, it has worked for me with the provided project. I was only able to reproduce the issue when manually removing the file from @vaadin/flow-frontend and relying on the maven plugin to build the frontend. There effectively the ts files where not copied.

So, the issue seems to be related to the maven plugin. I will qualify the issue so it can be addressed.

When you let it compile and run by IDE, the TaskCopyFrontendFiles.execute() ignores the WILDCARD_INCLUSIONS since the location is a directory on classpath in that case and the whole META-INF/resources is copied to @vaadin/flow-frontend (I guess that's what happened and why you had to delete it from there afterwards).

It doesn't work only if the resource is inside the jar file - e.g. during mvn clean install - in that case it calls the

jarContentsManager.copyIncludedFilesFromJarTrimmingBasePath(
                        location, COMPATIBILITY_RESOURCES_FRONTEND_DEFAULT,
                        targetDirectory, WILDCARD_INCLUSIONS);

in the else branch and ignores all *.ts files.

[mshabarov]

TypeScript pattern has been added to Flow 2.7:

private static final String[] WILDCARD_INCLUSIONS = new String[] {
            "**/*.js", "**/*.css", "**/*.ts" };

It shouldn't be an issue in Flow 2.7.
If you still experience this issue, please add a comment, so we will reopen it.

[jcgueriaud1]

I bumped the Vaadin version to 14.7.1.
Run mvn clean package -PproductionMode

The ts file is copied in the folder:

But I have a webpack error, the tsconfig.json is not generated. And I have this error:

[INFO] Running webpack ...
Hash: f837afc545700ac7547b
Version: webpack 4.42.0
Time: 8373ms
Built at: 10/18/2021 11:15:04 AM
 6 assets
Entrypoint bundle = build/vaadin-bundle-1e0b34800d0e66b88010.cache.js
Entrypoint bundle.es5 = build/vaadin-bundle.es5-738b8da800dd634b848d.cache.js
 [58] ../node_modules/@polymer/polymer/lib/elements/custom-style.js?babel-target=es6 + 1 modules 6.27 KiB {0} [built]
      |    2 modules
 [59] ../node_modules/@polymer/polymer/lib/elements/custom-style.js?babel-target=es5 + 1 modules 8.19 KiB {1} [built]
      |    2 modules
 [68] ./global.css 322 bytes {0} {1} [built]
[120] ../node_modules/@polymer/iron-icon/iron-icon.js?babel-target=es6 + 1 modules 16 KiB {0} [built]
      |    2 modules
[121] ../node_modules/@polymer/iron-icon/iron-icon.js?babel-target=es5 + 1 modules 16.8 KiB {1} [built]
      |    2 modules
[138] ../target/frontend/generated-flow-imports.js?babel-target=es6 + 6 modules 20.6 KiB {0} [built]
      | ../target/frontend/generated-flow-imports.js?babel-target=es6 1.87 KiB [built]
      |     + 6 hidden modules
[139] ../target/frontend/generated-flow-imports.js?babel-target=es5 + 6 modules 24.4 KiB {1} [built]
      | ../target/frontend/generated-flow-imports.js?babel-target=es5 1.89 KiB [built]
      |     + 6 hidden modules
[160] ../node_modules/@vaadin/vaadin-item/theme/lumo/vaadin-item.js?babel-target=es6 + 1 modules 2.22 KiB {3} [built]
      |    2 modules
[161] ../node_modules/@vaadin/vaadin-item/theme/lumo/vaadin-item.js?babel-target=es5 + 1 modules 2.46 KiB {2} [built]
      |    2 modules
[172] ../node_modules/@vaadin/vaadin-list-box/theme/lumo/vaadin-list-box.js?babel-target=es6 + 1 modules 2.84 KiB {3} [built]
      |    2 modules
[173] ../node_modules/@vaadin/vaadin-list-box/theme/lumo/vaadin-list-box.js?babel-target=es5 + 1 modules 3.12 KiB {2} [built]
      |    2 modules
[182] ../node_modules/@vaadin/vaadin-text-field/theme/lumo/vaadin-password-field.js?babel-target=es6 + 1 modules 1.05 KiB {3} [built]
      |    2 modules
[183] ../node_modules/@vaadin/vaadin-text-field/theme/lumo/vaadin-password-field.js?babel-target=es5 + 1 modules 1.26 KiB {2} [built]
      |    2 modules
[403] ../target/frontend/generated-flow-imports-fallback.js 4.25 KiB {5} [built]
[404] ../target/frontend/generated-flow-imports-fallback.js 4.25 KiB {4} [built]
    + 390 hidden modules

ERROR in [tsl] ERROR
      TS18002: The 'files' list in config file 'tsconfig.json' is empty.
 @ ../target/frontend/generated-flow-imports-fallback.js 13:0-52
 @ ../target/frontend/generated-flow-imports.js?babel-target=es5

ERROR in [tsl] ERROR
      TS18002: The 'files' list in config file 'tsconfig.json' is empty.
 @ ../target/frontend/generated-flow-imports-fallback.js 13:0-52
 @ ../target/frontend/generated-flow-imports.js?babel-target=es6

ERROR in ../node_modules/@vaadin/flow-frontend/my-test-component.ts?babel-target=es5
Module build failed (from ../node_modules/ts-loader/index.js):
Error: error while parsing tsconfig.json
    at Object.loader (/Users/jean-christophe/Documents/vaadin-components-factory/multimodule-spring-vaadin-app/ui-bootstrap/node_modules/ts-loader/dist/index.js:18:18)
 @ ../target/frontend/generated-flow-imports-fallback.js 13:0-52
 @ ../target/frontend/generated-flow-imports.js?babel-target=es5

ERROR in ../node_modules/@vaadin/flow-frontend/my-test-component.ts?babel-target=es6
Module build failed (from ../node_modules/ts-loader/index.js):
Error: error while parsing tsconfig.json
    at Object.loader (/Users/jean-christophe/Documents/vaadin-components-factory/multimodule-spring-vaadin-app/ui-bootstrap/node_modules/ts-loader/dist/index.js:18:18)
 @ ../target/frontend/generated-flow-imports-fallback.js 13:0-52
 @ ../target/frontend/generated-flow-imports.js?babel-target=es6

I pushed my latest changes here: https://github.com/jcgueriaud1/multimodule-spring-vaadin-app/tree/v14_5/ts_in_module

It could be related to this issue (if the typescript files are compiled by the add-on, there is no need of a tsconfig in the main module then "no issue"): #11976

[mshabarov]

@jcgueriaud1 those webpack issues you experienced are most likely has a different root cause, so I propose to open an another issue and put there your latest observations.

[jcgueriaud1]

I re-opened the ticket because the project I linked was not working after the fix. I've created a new ticket with the same code.