Can't build and run after upgrade from Vaadin 17.0.11 to 18.0.1

Description of the bug / feature

Problems after updating from Vaadin 17.0.11 to 18.0.1

When starting in developement mode I get the following error:

2020-12-02 12:57:31.870 ERROR 22416 --- [nio-8080-exec-1] c.v.flow.server.frontend.FrontendUtils   : Cannot get the 'META-INF/VAADIN/index.html' from the classpath
2020-12-02 12:57:31.876 ERROR 22416 --- [nio-8080-exec-1] c.v.flow.server.DefaultErrorHandler      : 

java.io.UncheckedIOException: java.io.IOException: Failed to load content of './frontend/\/index.html'. It is required to have './frontend/\/index.html' file when using client side bootstrapping.

When building production image webpack throws the following error (starting Vaadin 18.0.x)

ERROR in ./styles/globalVariables.css
Module build failed (from ../node_modules/.pnpm/registry.npmjs.org/css-loader/4.2.1_webpack@4.42.0/node_modules/css-loader/dist/cjs.js):
Error: Can't resolve 'frontend/images/logo.svg' in 'D:\Workspace\webapp\frontend\styles'

Minimal reproducible example

My frontend folder looks like this:

frontent
- src
- styles
- index.html

In globalVariables.css I have the following line:

--logoImage: url("frontend/images/logo.svg");

The logo is located in: webapp\src\main\resources\static\images\logo.svg

Expected behavior

No problem when running/building image

Actual behavior

Error when running/building image

Versions:

- Vaadin / Flow version: 18.0.1
- Java version: 11
- OS version: Windows 10
- Spring Boot: 2.4.0

[pleku]

Thanks for the report - the untested workaround would be to add the following inside webpack.config.js before the line module.exports = merge(flowDefaults,:

const cssLoaders = flowDefaults.module.rules.find(r => r.test && r.test.toString() == '/\\.css$/i');
const index = cssLoaders.use.indexOf('css-loader');
if (index !== -1) {
  const cssLoaderConfig = {
    loader: 'css-loader',
    options: { url: false }
  };
  cssLoaders.use.splice(index, 1, cssLoaderConfig);
}

we’ll land a fix for this soon that makes css-loader touch only node_modules urls.

[pleku]

This has been fixed in 5.0.2 / 18.0.2