Hello everyone,
our vaadin 14 application throws the following error when locally deployed as a war file in the tomcat on a windows machine:
[ERROR]
[webpack]
[dev-webpack]
ERROR in ./styles/vaadin/vaadin-context-menu-list-box.scss
[ERROR]
[webpack]
[dev-webpack]
Module not found: Error: Encountered unexpected blind targeting request for C:\Users\efranke\Projekte\Java\Tracy\tracy-web\node_modules\babel-loader\lib\index.js??ref--4-0!C:\Users\efranke\Projekte\Java\Tracy\tracy-web\node_modules\babel-loader\lib\index.js??ref--6!C:\Users\efranke\Projekte\Java\Tracy\tracy-web\node_modules\css-loader\dist\runtime\api.js.Please see http://github.com/DanielSchaffer/webpack-babel-multi-target-plugin#blind-targeting for more information.
[ERROR]
[webpack]
[dev-webpack]
@ ./styles/vaadin/vaadin-context-menu-list-box.scss 1:27-90
[ERROR]
[webpack]
[dev-webpack]
@ ../target/frontend/generated-flow-imports.js
[ERROR]
[webpack]
[dev-webpack]
i ?wdm?: Failed to compile.
[ERROR]
[webpack]
[dev-webpack]
------------------ Frontend compilation failed. -----------------
Because it works perfectly fine on mac and linux machines, I have a hard time troubleshooting the problem. Our webpack.config looks as follows:
const merge = require('webpack-merge');
const flowDefaults = require('./webpack.generated.js');
module.exports = merge(flowDefaults, {
module: {
rules: [
{
test: /\.js$/,
use: {
loader: 'babel-loader',
options: {
plugins: [
'@babel/plugin-proposal-class-properties',
'@babel/plugin-syntax-dynamic-import',
['@babel/plugin-proposal-decorators',
{decoratorsBeforeExport: true}],
]
}
}
},
{
test: /\.lcss$/, //match any lit css files (.lcss)
use: [{
loader: 'lit-scss-loader',
options: {
minify: true, // defaults to false
},
}, 'extract-loader', 'css-loader', 'sass-loader'],
},
{
test: /\.s[ac]
ss$/i,
use: [
'css-loader',
'sass-loader',
],
}
]
}
});
While our package.json has this content:
{
"name": "no-name",
"description": "Inhouse reporting as a service tool",
"version": "14.0.5",
"license": "UNLICENSED",
"repository": {
"type": "git",
"url": "https://gitlab.bonprix.work/vt-ec-cp-mdp/tracy.git"
},
"dependencies": {
"@polymer/iron-icons": "^3.0.1",
"@polymer/polymer": "3.2.0",
"@vaadin/flow-deps": "./target/frontend",
"@webcomponents/webcomponentsjs": "^2.2.10",
"bootstrap-webcomponents": "^4.3.0",
"bower": "^1.8.8",
"file-loader": "^4.2.0",
"lit-element": "^2.2.1",
"mini-css-extract-plugin": "^0.8.0",
"polymer-modulizer": "^0.4.3",
"style-loader": "^1.0.0"
},
"devDependencies": {
"@babel/plugin-proposal-class-properties": "^7.5.5",
"@babel/plugin-proposal-decorators": "^7.4.4",
"@webcomponents/webcomponentsjs": "^2.2.10",
"awesome-typescript-loader": "5.2.1",
"compression-webpack-plugin": "3.0.0",
"copy-webpack-plugin": "5.0.3",
"css-loader": "^3.2.0",
"extract-loader": "^3.1.0",
"html-webpack-plugin": "3.2.0",
"lit-scss-loader": "^1.0.0",
"node-sass": "^4.12.0",
"raw-loader": "3.0.0",
"sass-loader": "^7.3.1",
"script-ext-html-webpack-plugin": "2.1.4",
"typescript": "3.5.3",
"webpack": "4.30.0",
"webpack-babel-multi-target-plugin": "2.1.0",
"webpack-cli": "3.3.0",
"webpack-dev-server": "3.3.0",
"webpack-merge": "4.2.1"
},
"vaadinAppPackageHash": "8c2fd8a52a1f047cb3d5fe048da8b8fc57e3c5626c86edad9032171f7a75a2c1",
"vaadin": {
"disableUsageStatistics": true
}
}
One thing I am currently trying is to remove the babel-loader from our webpack.config, since the webpack.generated.js from vaadin uses the [webpack-babel-multi-target-plugin]
(https://www.npmjs.com/package/webpack-babel-multi-target-plugin#options-reference), which includes the babel-loader implicitly. But this still does not explain, why it works on mac and linux machines.
Thanks in advance and kind regards,
Eric