diff --git a/flow-lit-template/src/main/java/com/vaadin/flow/component/littemplate/BundleLitParser.java b/flow-lit-template/src/main/java/com/vaadin/flow/component/littemplate/BundleLitParser.java
index 2c706c28c7c..5866ab8608e 100644
--- a/flow-lit-template/src/main/java/com/vaadin/flow/component/littemplate/BundleLitParser.java
+++ b/flow-lit-template/src/main/java/com/vaadin/flow/component/littemplate/BundleLitParser.java
@@ -182,6 +182,13 @@ private static String getSourceFromObject(JsonObject module,
&& validKey(module, SOURCE, STRING)) {
String name = module.getString(NAME);
+ // If the found module is es5 target (e.g. ?babel-target=es6)
+ // then return the null source so that we continue the
+ // recursive search through the modules/chunks
+ if (name.endsWith("es5")) {
+ return source;
+ }
+
String alternativeFileName = fileName
// Replace frontend part since webpack entry-point is
// already in the frontend folder
diff --git a/flow-lit-template/src/test/java/com/vaadin/flow/component/littemplate/internal/LitTemplateParserImplTest.java b/flow-lit-template/src/test/java/com/vaadin/flow/component/littemplate/internal/LitTemplateParserImplTest.java
index 691de252910..13061a579ac 100644
--- a/flow-lit-template/src/test/java/com/vaadin/flow/component/littemplate/internal/LitTemplateParserImplTest.java
+++ b/flow-lit-template/src/test/java/com/vaadin/flow/component/littemplate/internal/LitTemplateParserImplTest.java
@@ -265,6 +265,26 @@ public void severalJsModuleAnnotations_parserSelectsByName() {
"Tag name doesn't match the JS module name")));
}
+ @Test
+ public void es5Andes6Sources_getsCorrectlyEs6Source() {
+
+ LitTemplateParser instance = LitTemplateParserImpl.getInstance();
+ LitTemplateParser.TemplateData templateContent = instance.getTemplateContent(
+ ImageCard.class, "image-card", service);
+
+ Assert.assertNotNull(
+ "ES5 was selected from which template content can not be parsed",
+ templateContent);
+ Assert.assertEquals("Parent element ID not the expected one.",
+ "image-card",
+ templateContent.getTemplateElement().parent().id());
+ }
+
+ @Tag("image-card")
+ @JsModule("./image-card.ts")
+ public class ImageCard extends LitTemplate {
+ }
+
@Tag("my-element")
@JsModule("./frontend/MyLitElement.js")
public class MyLitElement extends LitTemplate {
diff --git a/flow-lit-template/src/test/resources/META-INF/VAADIN/config/stats.json b/flow-lit-template/src/test/resources/META-INF/VAADIN/config/stats.json
index f230f658b30..532181ad07d 100644
--- a/flow-lit-template/src/test/resources/META-INF/VAADIN/config/stats.json
+++ b/flow-lit-template/src/test/resources/META-INF/VAADIN/config/stats.json
@@ -21,6 +21,14 @@
"id": "./frontend/my-form.ts",
"name": "./frontend/my-form.ts",
"source": "import { html, LitElement } from 'lit-element';\r\n// @customElement(\"my-form\")\r\nexport class MyFormElement extends LitElement {\r\n render() {\r\n return html `\n
Hello
\n \n `;\r\n }\r\n}\r\ncustomElements.define(\"my-form\", MyFormElement);\r\n"
+ },
+ {
+ "name": "./image-card.ts?babel-target=es5",
+ "source": "import _taggedTemplateLiteral from \"@babel/runtime/helpers/taggedTemplateLiteral\";\nimport _classCallCheck from \"@babel/runtime/helpers/classCallCheck\";\nimport _createClass from \"@babel/runtime/helpers/createClass\";\nimport _inherits from \"@babel/runtime/helpers/inherits\";\nimport _possibleConstructorReturn from \"@babel/runtime/helpers/possibleConstructorReturn\";\nimport _getPrototypeOf from \"@babel/runtime/helpers/getPrototypeOf\";\nimport _typeof from \"@babel/runtime/helpers/typeof\";\n\nvar _templateObject;\n\nfunction _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct(); return function _createSuperInternal() { var Super = _getPrototypeOf(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = _getPrototypeOf(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return _possibleConstructorReturn(this, result); }; }\n\nfunction _isNativeReflectConstruct() { if (typeof Reflect === \"undefined\" || !Reflect.construct) return false; if (Reflect.construct.sham) return false; if (typeof Proxy === \"function\") return true; try { Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); return true; } catch (e) { return false; } }\n\nvar __decorate = this && this.__decorate || function (decorators, target, key, desc) {\n var c = arguments.length,\n r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc,\n d;\n if ((typeof Reflect === \"undefined\" ? \"undefined\" : _typeof(Reflect)) === \"object\" && typeof Reflect.decorate === \"function\") r = Reflect.decorate(decorators, target, key, desc);else for (var i = decorators.length - 1; i >= 0; i--) {\n if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;\n }\n return c > 3 && r && Object.defineProperty(target, key, r), r;\n};\n\nimport { html, LitElement, customElement } from 'lit-element';\nimport '@vaadin/vaadin-ordered-layout/vaadin-horizontal-layout';\nimport '@vaadin/vaadin-ordered-layout/vaadin-vertical-layout';\nimport '@vaadin/vaadin-select';\n\nvar ImageCard = /*#__PURE__*/function (_LitElement) {\n _inherits(ImageCard, _LitElement);\n\n var _super = _createSuper(ImageCard);\n\n function ImageCard() {\n _classCallCheck(this, ImageCard);\n\n return _super.apply(this, arguments);\n }\n\n _createClass(ImageCard, [{\n key: \"createRenderRoot\",\n value: function createRenderRoot() {\n // Do not use a shadow root\n return this;\n }\n }, {\n key: \"render\",\n value: function render() {\n return html(_templateObject || (_templateObject = _taggedTemplateLiteral([\"\\n \\n
\\n
\\n \\n \\n \\n \\n \"])));\n }\n }]);\n\n return ImageCard;\n}(LitElement);\n\nImageCard = __decorate([customElement('image-card')], ImageCard);\nexport { ImageCard };"
+ },
+ {
+ "name": "./image-card.ts?babel-target=es6",
+ "source": "var __decorate = this && this.__decorate || function (decorators, target, key, desc) {\n var c = arguments.length,\n r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc,\n d;\n if (typeof Reflect === \"object\" && typeof Reflect.decorate === \"function\") r = Reflect.decorate(decorators, target, key, desc);else for (var i = decorators.length - 1; i >= 0; i--) {\n if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;\n }\n return c > 3 && r && Object.defineProperty(target, key, r), r;\n};\n\nimport { html, LitElement, customElement } from 'lit-element';\nimport '@vaadin/vaadin-ordered-layout/vaadin-horizontal-layout';\nimport '@vaadin/vaadin-ordered-layout/vaadin-vertical-layout';\nimport '@vaadin/vaadin-select';\nvar ImageCard = class ImageCard extends LitElement {\n createRenderRoot() {\n // Do not use a shadow root\n return this;\n }\n\n render() {\n return html`\n \n
\n
\n \n \n \n \n `;\n }\n\n};\nImageCard = __decorate([customElement('image-card')], ImageCard);\nexport { ImageCard };"
}
]
,
diff --git a/flow-server/src/main/java/com/vaadin/flow/server/frontend/NodeUpdater.java b/flow-server/src/main/java/com/vaadin/flow/server/frontend/NodeUpdater.java
index a13f5aa1d7a..12908ed12dd 100644
--- a/flow-server/src/main/java/com/vaadin/flow/server/frontend/NodeUpdater.java
+++ b/flow-server/src/main/java/com/vaadin/flow/server/frontend/NodeUpdater.java
@@ -308,10 +308,12 @@ static Map getDefaultDevDependencies() {
defaults.put("webpack", "4.42.0");
defaults.put("webpack-cli", "3.3.11");
defaults.put("webpack-dev-server", "3.11.0");
- defaults.put("webpack-babel-multi-target-plugin", "2.3.3");
+ defaults.put("webpack-babel-multi-target-plugin", "2.5.0");
// Defining loader until a resolution exists to issue
// https://github.com/DanielSchaffer/webpack-babel-multi-target-plugin/issues/94
defaults.put("babel-loader", "8.2.2");
+ // Defining html-webpack-plugin due to same issue as babel-loader
+ defaults.put("html-webpack-plugin", "4.5.2");
defaults.put("copy-webpack-plugin", "5.1.2");
defaults.put("compression-webpack-plugin", "4.0.1");
defaults.put("extra-watch-webpack-plugin", "1.0.3");
diff --git a/flow-server/src/main/resources/webpack.generated.js b/flow-server/src/main/resources/webpack.generated.js
index ae52db09be2..7da3497e778 100644
--- a/flow-server/src/main/resources/webpack.generated.js
+++ b/flow-server/src/main/resources/webpack.generated.js
@@ -181,10 +181,15 @@ module.exports = {
module: {
rules: [
- {
+ ...(transpile ? [
+ {
+ test: /\.tsx?$/,
+ use: [ BabelMultiTargetPlugin.loader(), 'ts-loader' ],
+ }
+ ] : [{
test: /\.tsx?$/,
use: ['ts-loader']
- },
+ }]),
...(transpile ? [{ // Files that Babel has to transpile
test: /\.js$/,
use: [BabelMultiTargetPlugin.loader()]