Webpack error when building an add-on with multiple typescript files

[jcgueriaud1]

Description of the bug / feature

I want to use typescript in an addon.
When I'm importing one typescript file it's working. If I want to use a static function from a different file. I have a error during the Frontend compilation.

Minimal reproducible example

Use the zipped project and run mvn jetty:run.

I build this based on https://github.com/vaadin/component-starter-flow/tree/v14

I've added:

• my-test-component.ts
• my-test-component-class.ts
• my-test-component-interface.ts

without errors.

• my-test-static-class.ts

Then I have this error.

Expected behavior

The bundle is built without any errors.

Currently the add-on is delivering typescript. This means a Vaadin project should compile typescript files into node-modules/

I'm not sure how it should be handled:

• Should the add-on produce javascript or typescript?

Actual behavior

------------------ Starting Frontend compilation. ------------------
[ForkJoinPool.commonPool-worker-5] INFO dev-webpack - Running webpack to compile frontend resources. This may take a moment, please stand by...
[qtp1814697479-35] INFO com.vaadin.flow.server.DefaultDeploymentConfiguration - 
Vaadin is running in DEBUG MODE.
When deploying application for production, remember to disable debug features. See more from https://vaadin.com/docs/
[webpack] ERROR dev-webpack - ERROR in ../node_modules/@vaadin/flow-frontend/my-test-static-class.ts
[webpack] ERROR dev-webpack - Module build failed (from ../node_modules/ts-loader/index.js):
[webpack] ERROR dev-webpack - Error: TypeScript emitted no output for /Users/jean-christophe/Documents/vaadin-demos/component-starter-flow/node_modules/@vaadin/flow-frontend/my-test-static-class.ts. By default, ts-loader will not compile .ts files in node_modules.
[webpack] ERROR dev-webpack - You should not need to recompile .ts files there, but if you really want to, use the allowTsInNodeModules option.
[webpack] ERROR dev-webpack - See: https://github.com/Microsoft/TypeScript/issues/12358
[webpack] ERROR dev-webpack -     at makeSourceMapAndFinish (/Users/jean-christophe/Documents/vaadin-demos/component-starter-flow/node_modules/ts-loader/dist/index.js:53:18)
[webpack] ERROR dev-webpack -     at successLoader (/Users/jean-christophe/Documents/vaadin-demos/component-starter-flow/node_modules/ts-loader/dist/index.js:40:5)
[webpack] ERROR dev-webpack -     at Object.loader (/Users/jean-christophe/Documents/vaadin-demos/component-starter-flow/node_modules/ts-loader/dist/index.js:23:5)
[webpack] ERROR dev-webpack -  @ ../node_modules/@vaadin/flow-frontend/my-test-component.ts 8:0-59 26:8-25
[webpack] ERROR dev-webpack -  @ ../target/frontend/generated-flow-imports.js
[webpack] ERROR dev-webpack - ℹ ｢wdm｣: Failed to compile.
[webpack] ERROR dev-webpack - 
------------------ Frontend compilation failed. -----------------

Versions:

- Vaadin / Flow version: Vaadin 14.7.1
- Java version: Java 11 (or 8)
- OS version: Mac or Windows

component-starter-flow.zip

Workaround

As a workaround, it's possible to merge all the typescript files in one file.

Related conversation can be here (Internal link): https://vaadin.slack.com/archives/C6X43FE8M/p1632314210308700

[denis-anisimov]

Thank you for the exact steps to reproduce.

I can reproduce the same behavior with the provided project.
It looks like this is a TS compiler issue microsoft/TypeScript#12358
I don't know what solution should be uses here but that's up for the developer who will work on the ticket.