Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Vaadin 19: Why ts-loader is used only with useClientSideIndexFileForBootstrapping? #10414

Closed
xdenser opened this issue Mar 25, 2021 · 4 comments · Fixed by #10656
Closed

Vaadin 19: Why ts-loader is used only with useClientSideIndexFileForBootstrapping? #10414

xdenser opened this issue Mar 25, 2021 · 4 comments · Fixed by #10656

Comments

@xdenser
Copy link
Contributor

xdenser commented Mar 25, 2021

I am migrating Vaadin 18.0.1 project to Vaadin 19.0.2 and and we do not use useClientSideIndexFileForBootstrapping,
Typescript compilation worked in 18.0.1 and now it stopped in 19.0.2.
OK I can add it back in my wbpack.config.js, but condition loks strange to me.
See lines 210, 241 in
https://github.com/vaadin/flow/blob/master/flow-server/src/main/resources/webpack.generated.js
61df7f7

@haijian-vaadin
Copy link
Contributor

Thank you @xdenser for the feedback, this is a bug, we will fix it.
The bug can be reproduced by having a project with a (Java + HTML) view:

  1. Download a v20(19) hybrid project from start.vaadin.com, set UI as Flow (JAVA + HTML)
  2. Run the application with mvn -Dspring-boot.jvmArguments="-Dvaadin.useDeprecatedV14Bootstrapping" -Dvaadin.useDeprecatedV14Bootstrapping spring-boot:run
    See the error
ERROR in ./views/helloworld/hello-world-view.ts 5:0
Module parse failed: Unexpected character '@' (5:0)
You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file. See https://webpack.js.org/concepts#loaders
| import { customElement, html, LitElement } from 'lit-element';
| 
> @customElement('hello-world-view')
| export class HelloWorldView extends LitElement {
|   createRenderRoot() {
 @ ../target/frontend/generated-flow-imports.js 103:0-55

@platosha
Copy link
Contributor

As far as I remember, I had to disable it this way because ts-loader errors (TS18002) when no TypeScript files are used in the project, which is common among Java-only apps. TypeStrong/ts-loader#405

@haijian-vaadin
Copy link
Contributor

haijian-vaadin commented Apr 6, 2021

Use fork-ts-checker-webpack-plugin https://github.com/TypeStrong/fork-ts-checker-webpack-plugin in addition to ts-loader might solve this issue.
If this doesn't work, a fallback option would be to use a wrapper for ts-loader and catch and handle the error there.

@platosha platosha self-assigned this Apr 14, 2021
haijian-vaadin pushed a commit that referenced this issue Apr 19, 2021
* fix: allow TypeScript in V14 server bootstrapping mode

Fixes #10414

* Fix fork-ts-checker-plugin options

* fix: disable resolving TypeScript when no tsconfig.json
vaadin-bot pushed a commit that referenced this issue Apr 19, 2021
* fix: allow TypeScript in V14 server bootstrapping mode

Fixes #10414

* Fix fork-ts-checker-plugin options

* fix: disable resolving TypeScript when no tsconfig.json
vaadin-bot pushed a commit that referenced this issue Apr 19, 2021
* fix: allow TypeScript in V14 server bootstrapping mode

Fixes #10414

* Fix fork-ts-checker-plugin options

* fix: disable resolving TypeScript when no tsconfig.json
@vaadin-bot
Copy link
Collaborator

This ticket/PR has been released with platform 19.0.6. For prerelease versions, it will be included in its final version.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
Development

Successfully merging a pull request may close this issue.

4 participants