Style not loaded - Githubissues

foxpluto commented 3 years ago

Desktop (please complete the following information):

OS: MacOS Big Sur
JDK version: OpenJDK Runtime Environment (build 13.0.2+8)
Gradle version: 6.8.1
Vaadin Plugin version: 0.17.0.1

Describe the bug I am trying to use Vaadin 18 and styling the app with my css. I have pushed a sample application on my github here: https://github.com/foxpluto/testvaadintheme A very easy app with a Dark Theme and a simple css in the /frontend/style/main.css directory. I have read this documentation page: importing-dependencies and according to the table at the end of the page the place should be correct. Starting the app I have an error:

------------------ Starting Frontend compilation. ------------------
[INFO ] 09:08:33.956 com.vaadin.flow.server.DevModeHandler.doStartWebpack() - Running webpack to compile frontend resources. This may take a moment, please stand by...
ℹ ｢wds｣: Project is running at http://localhost:53993/webpack-dev-server/
ℹ ｢wds｣: webpack output is served from /VAADIN/
ℹ ｢wds｣: Content not from webpack is served from /Users/fox/Documents/workspace/testvaadintheme/build/resources/main/META-INF/VAADIN, src/main/webapp
ℹ ｢atl｣: Using typescript@4.0.3 from typescript
ℹ ｢atl｣: Using tsconfig.json from /Users/fox/Documents/workspace/testvaadintheme/tsconfig.json
ℹ ｢atl｣: Checking started in a separate process...
ℹ ｢atl｣: Time: 735ms
         Serving the 'stats.json' file dynamically.
✖ ｢wdm｣: Hash: 8ae3815c7ae86df6fc1f
Version: webpack 4.42.0
Time: 4195ms
Built at: 02/22/2021 9:08:39 AM
                                                  Asset      Size        Chunks                                Chunk Names
           build/vaadin-0-45990021125286675c10.cache.js  6.58 MiB             0  [emitted] [immutable]  [big]  
           build/vaadin-1-b5ad790009f669c42914.cache.js   352 KiB             1  [emitted] [immutable]         
           build/vaadin-2-25cd85c3b420560f3de5.cache.js  21.7 KiB             2  [emitted] [immutable]         
           build/vaadin-3-9c3f862cc97ee9287c3c.cache.js   344 KiB             3  [emitted] [immutable]         
      build/vaadin-bundle-8c5cbefcce8d7468b1b2.cache.js   286 KiB        bundle  [emitted] [immutable]         bundle
build/vaadin-devmodeGizmo-ab0c65ccc111fa465397.cache.js   451 KiB  devmodeGizmo  [emitted] [immutable]         devmodeGizmo
      build/vaadin-export-d93d695dced5c6cdbd37.cache.js  6.93 MiB        export  [emitted] [immutable]  [big]  export
                                             index.html  1.08 KiB                [emitted]                     
Entrypoint bundle = build/vaadin-bundle-8c5cbefcce8d7468b1b2.cache.js
Entrypoint export [big] = build/vaadin-export-d93d695dced5c6cdbd37.cache.js
Entrypoint devmodeGizmo = build/vaadin-devmodeGizmo-ab0c65ccc111fa465397.cache.js
[../node_modules/.pnpm/registry.npmjs.org/@polymer/iron-icon/3.0.1/node_modules/@polymer/iron-icon/iron-icon.js] 5.5 KiB {export} {0} [built]
[../node_modules/.pnpm/registry.npmjs.org/@polymer/iron-list/3.1.0/node_modules/@polymer/iron-list/iron-list.js] 59.3 KiB {export} {0} [built]
[../node_modules/.pnpm/registry.npmjs.org/@vaadin/router/1.7.4/node_modules/@vaadin/router/dist/vaadin-router.js] 90.9 KiB {bundle} [built]
[../node_modules/.pnpm/registry.npmjs.org/@vaadin/vaadin-accordion/1.2.0/node_modules/@vaadin/vaadin-accordion/theme/lumo/vaadin-accordion.js] 78 bytes {export} {0} [built]
[../node_modules/.pnpm/registry.npmjs.org/@vaadin/vaadin-app-layout/2.2.0/node_modules/@vaadin/vaadin-app-layout/theme/lumo/vaadin-app-layout.js] 81 bytes {export} {0} [built]
[../node_modules/.pnpm/registry.npmjs.org/@vaadin/vaadin-app-layout/2.2.0/node_modules/@vaadin/vaadin-app-layout/theme/lumo/vaadin-drawer-toggle.js] 87 bytes {export} {0} [built]
[../node_modules/.pnpm/registry.npmjs.org/@vaadin/vaadin-avatar/1.0.3/node_modules/@vaadin/vaadin-avatar/theme/lumo/vaadin-avatar-group.js] 234 bytes {export} {0} [built]
[../node_modules/.pnpm/registry.npmjs.org/@vaadin/vaadin-avatar/1.0.3/node_modules/@vaadin/vaadin-avatar/theme/lumo/vaadin-avatar.js] 73 bytes {export} {0} [built]
[../node_modules/.pnpm/registry.npmjs.org/@vaadin/vaadin-button/2.4.0/node_modules/@vaadin/vaadin-button/theme/lumo/vaadin-button.js] 73 bytes {export} {0} [built]
[../node_modules/.pnpm/registry.npmjs.org/@vaadin/vaadin-checkbox/2.5.0/node_modules/@vaadin/vaadin-checkbox/theme/lumo/vaadin-checkbox-group.js] 127 bytes {export} {0} [built]
[../node_modules/.pnpm/registry.npmjs.org/@vaadin/vaadin-checkbox/2.5.0/node_modules/@vaadin/vaadin-checkbox/theme/lumo/vaadin-checkbox.js] 77 bytes {export} {0} [built]
[../node_modules/.pnpm/registry.npmjs.org/@vaadin/vaadin-combo-box/5.4.7/node_modules/@vaadin/vaadin-combo-box/theme/lumo/vaadin-combo-box.js] 171 bytes {export} {0} [built]
[../target/flow-frontend/VaadinDevmodeGizmo.js] 36.8 KiB {devmodeGizmo} [built]
[../target/frontend/generated-flow-imports.js] 4.9 KiB {export} {1} [built]
[../target/index.ts] 1.43 KiB {bundle} [built]
    + 345 hidden modules

ERROR in ../target/frontend/generated-flow-imports.js
Module not found: Error: Can't resolve 'raw-loader' in '/Users/fox/Documents/workspace/testvaadintheme/frontend'
 @ ../target/frontend/generated-flow-imports.js 10:0-46 11:36-42
Child html-webpack-plugin for "index.html":
     1 asset
    Entrypoint undefined = index.html
    [../node_modules/.pnpm/registry.npmjs.org/html-webpack-plugin/3.2.0_webpack@4.42.0/node_modules/html-webpack-plugin/lib/loader.js!../target/index.html] 1.13 KiB {0} [built]
    [../node_modules/.pnpm/registry.npmjs.org/lodash/4.17.21/node_modules/lodash/lodash.js] 531 KiB {0} [built]
    [../node_modules/.pnpm/registry.npmjs.org/webpack/4.42.0_webpack@4.42.0/node_modules/webpack/buildin/global.js] 472 bytes {0} [built]
    [../node_modules/.pnpm/registry.npmjs.org/webpack/4.42.0_webpack@4.42.0/node_modules/webpack/buildin/module.js] 497 bytes {0} [built]
ℹ ｢wdm｣: Failed to compile.

------------------ Frontend compilation failed. ------------------

[INFO ] 09:08:39.340 com.vaadin.flow.server.DevModeHandler.doStartWebpack() - Started webpack-dev-server. Time: 5929ms

I can't really figure out where I have to put the main.css to be found by @CssImport("./styles/main.css") The main.css shouldn't be automatically be inserted in the bundle stuff? Where is the right place?

Thanks for your help. Stefano Bossi

Additional context I am using Visual Studio Code

foxpluto commented 3 years ago

An another little information. In the vaadinBuildFrontend the gradle plugin write the flow-build-info.json with the main.css file in there:

{
  "productionMode": false,
  "useDeprecatedV14Bootstrapping": false,
  "eagerServerLoad": false,
  "enableDevServer": false,
  "chunks": {
    "fallback": {
      "jsModules": [
        "@vaadin/vaadin-split-layout/src/vaadin-split-layout.js",
        "@vaadin/vaadin-radio-button/src/vaadin-radio-group.js",
        "@vaadin/vaadin-text-field/src/vaadin-number-field.js",
        "./menubarConnector.js",
        "@vaadin/vaadin-menu-bar/src/vaadin-menu-bar.js",
        "@vaadin/vaadin-login/src/vaadin-login-overlay.js",
        "@vaadin/vaadin-form-layout/src/vaadin-form-item.js",
        "@vaadin/vaadin-item/src/vaadin-item.js",
        "@vaadin/vaadin-notification/src/vaadin-notification.js",
        "@vaadin/vaadin-list-box/src/vaadin-list-box.js",
        "@vaadin/vaadin-upload/src/vaadin-upload.js",
        "@vaadin/vaadin-dialog/src/vaadin-dialog.js",
        "@vaadin/vaadin-form-layout/src/vaadin-form-layout.js",
        "./com/github/appreciated/grid-layout/grid-layout.js",
        "@polymer/iron-list/iron-list.js",
        "./ironListConnector.js",
        "./ironListStyles.js",
        "@vaadin/vaadin-radio-button/src/vaadin-radio-button.js",
        "./client-media-query.js",
        "@vaadin/vaadin-checkbox/src/vaadin-checkbox-group.js",
        "@vaadin/vaadin-custom-field/src/vaadin-custom-field.js",
        "@vaadin/vaadin-progress-bar/src/vaadin-progress-bar.js",
        "@vaadin/vaadin-upload/src/vaadin-upload-file.js",
        "@vaadin/vaadin-details/src/vaadin-details.js",
        "@vaadin/vaadin-text-field/src/vaadin-text-area.js",
        "./vaadin-big-decimal-field.js",
        "@polymer/iron-icon/iron-icon.js",
        "@vaadin/vaadin-ordered-layout/vaadin-scroller.js",
        "@vaadin/vaadin-avatar/src/vaadin-avatar-group.js",
        "@vaadin/vaadin-text-field/src/vaadin-password-field.js",
        "@vaadin/vaadin-select/src/vaadin-select.js",
        "@vaadin/vaadin-login/src/vaadin-login-form.js",
        "./element-media-query.js",
        "./selectConnector.js",
        "@vaadin/vaadin-text-field/src/vaadin-integer-field.js",
        "@vaadin/vaadin-accordion/src/vaadin-accordion.js",
        "@vaadin/vaadin-combo-box/src/vaadin-combo-box.js",
        "./custom-media-query.js",
        "@vaadin/vaadin-grid/src/vaadin-grid-tree-toggle.js",
        "./comboBoxConnector.js",
        "@vaadin/vaadin-text-field/src/vaadin-email-field.js",
        "@vaadin/vaadin-avatar/src/vaadin-avatar.js"
      ],
      "cssImports": [
        {
          "value": "./styles/main.css"
        }
      ]
    }
  }
}

This should be correct...

Regards, S.

foxpluto commented 3 years ago

An another info....

According to the error message:

ERROR in ../target/frontend/generated-flow-imports.js
Module not found: Error: Can't resolve 'raw-loader' in '/Users/fox/Documents/workspace/testvaadintheme/frontend'
 @ ../target/frontend/generated-flow-imports.js 10:0-46 11:36-42
Child html-webpack-plugin for "index.html":
     1 asset
    Entrypoint undefined = index.html
    [../node_modules/.pnpm/registry.npmjs.org/html-webpack-plugin/3.2.0_webpack@4.42.0/node_modules/html-webpack-plugin/lib/loader.js!../target/index.html] 1.13 KiB {0} [built]
    [../node_modules/.pnpm/registry.npmjs.org/lodash/4.17.21/node_modules/lodash/lodash.js] 531 KiB {0} [built]
    [../node_modules/.pnpm/registry.npmjs.org/webpack/4.42.0_webpack@4.42.0/node_modules/webpack/buildin/global.js] 472 bytes {0} [built]
    [../node_modules/.pnpm/registry.npmjs.org/webpack/4.42.0_webpack@4.42.0/node_modules/webpack/buildin/module.js] 497 bytes {0} [built]

the problem should be in ../target/frontend/generated-flow-imports.js where I read:

addCssBlock('<custom-style><style include="lumo-color lumo-typography"></style></custom-style>', true);
document.documentElement.setAttribute('theme', 'dark');

import $css_0 from 'Frontend/styles/main.css';
addCssBlock(`<custom-style><style>${$css_0}</style></custom-style>`);

Sorry but I am not a javascript guy and I can't understand what Frontend is and why is incorrect or not found...

Thanks, Stefano

foxpluto commented 3 years ago

I think I found something really interesting.... When I prepare the frontend with: gradle vaadinBuildFrontend I have these dependencies in package.json:

  "devDependencies": {
    "compression-webpack-plugin": "4.0.1",
    "webpack-cli": "3.3.11",
    "script-ext-html-webpack-plugin": "2.1.4",
    "validator": "12.0.0",
    "awesome-typescript-loader": "5.2.1",
    "lit-html": "1.2.1",
    "@types/validator": "10.11.3",
    "lit-element": "2.3.1",
    "webpack": "4.42.0",
    "html-webpack-plugin": "3.2.0",
    "chokidar": "^3.4.0",
    "typescript": "3.8.3",
    "webpack-merge": "4.2.2",
    "webpack-dev-server": "3.10.3",
    "css-loader": "4.2.1",
    "lit-css-loader": "0.0.4",
    "extract-loader": "5.1.0",
    "raw-loader": "4.0.0",
    "copy-webpack-plugin": "5.1.1"
  }

And the raw-loader package causing the error is there !!!!!

but when I start the app for example with gradle run or with Visual Studio Code debug run, the file change !!!!!

  "devDependencies": {
    "compression-webpack-plugin": "4.0.1",
    "webpack-cli": "3.3.11",
    "script-ext-html-webpack-plugin": "2.1.4",
    "validator": "13.1.17",
    "awesome-typescript-loader": "5.2.1",
    "lit-html": "1.2.1",
    "@types/validator": "13.1.0",
    "lit-element": "2.3.1",
    "webpack": "4.42.0",
    "html-webpack-plugin": "3.2.0",
    "chokidar": "^3.5.0",
    "typescript": "4.0.3",
    "webpack-merge": "4.2.2",
    "webpack-dev-server": "3.11.0",
    "css-loader": "4.2.1",
    "lit-css-loader": "0.0.4",
    "extract-loader": "5.1.0"
  }

And a lot of packages are different in version and the raw-loader is not there anymore, causing the error !!!!

Why the package.json change? And why the raw-loader is missing?

Sorry to bother you but I am looking to solve this problem by more or less a week !!!

Regards, Stefano

mvysny commented 3 years ago

Hi, apologies but I'm on a vacation right now and will come back at the end of next week. The best way to get help is to ask on Vaadin forums or on vaadin chat.

foxpluto commented 3 years ago

ok, thanks for the reply.

I will try to figure out something by myself. I have already ask for help of Discorg but they pointed me to you :-) I will wait for you, happy holiday !

thanks, Stefano

mvysny commented 3 years ago

Well to be honest I'm not much of a javascript guy myself. I've basically took the Maven plugin code and converted it to Gradle, but I don't have a complete understanding of what's going on behind the scenes.

I think meanwhile the best course of action would be to convert the example app to Maven to see whether the bug can be reproduced.

I'll also take a look after I return, perhaps I Will be able to spot something.

foxpluto commented 3 years ago

It's a regression of the 18.0.6 !!!! I have opened a ticket in Flow git repository as suggested me on Discord: https://github.com/vaadin/flow/issues/10113

Basically, with the 18.0.6 version running gradle vaadinBuildFrontend build a package.json with the raw-loader included but with gradle run the package.json is completely rebuild an raw-loader is removed (some other packages are changed too). I think this is not related to the gradle plugin so, probably, this ticket should be closed. I left the ticket open just because I would like to listen your point of view when you'll be able to look at the code. The real question is: why running gradle vaadinBuildFrontend brings a different json than the one running gradle run

Regards, S.

P.S. happy holiday !

foxpluto commented 3 years ago

As indicated here: https://github.com/vaadin/flow/pull/8843/files the raw-loader in 18.0.6 should not used anymore, but it seems that in some way is still requested for loading css. I have opened a ticket in the Flow github you can find here: https://github.com/vaadin/flow/issues/10113

Regards, S.

mvysny commented 3 years ago

Perfect, thank you :) I'll leave this bug open and await the resolution of the upstream

TomaszPadzik commented 3 years ago

Hey, in vaadin 18 custom style sheets for custom theme are not included in generated-flow-imports.js. There are included only style sheets for lumo theme. Cause is that the @Theme annotation was moved from root navigation to class implementing AppShellConfigurator. FrontendClassVisitor cant find annotaiton and sets Lumo theme instead of custom. In eclipse works good, and problem is only in gradle build. Regards

foxpluto commented 3 years ago

OK, I have not really understood all the info you wrote, sorry for that but following your suggestions and others I have found a solution. I have moved the AppShellConfigurator stuff from a separate class to my MainBoard one in this way:

@Viewport("width=device-width, initial-scale=1")
@PageTitle("Web Analysis User Interface")
@BodySize(height = "100vh", width = "100vw")
@Meta(name = "Stefano Bossi", content = "PLC Web Analysis GUI")
@Push(value = PushMode.MANUAL, transport = Transport.WEBSOCKET_XHR)
@Theme(value = Lumo.class, variant = Lumo.DARK)
@CssImport("./styles/main.css")
@CssImport("./styles/main/main-view.css")
public class MainBoard extends AppLayout implements AppShellConfigurator{
...
...
}

Here the Lumo.DARK variant is correctly applied in production too.

So to recap, this doesn't work in Production but ONLY in development:

@Viewport("width=device-width, initial-scale=1")
@PageTitle("Web Analysis GUI")
@BodySize(height = "100vh", width = "100vw")
@Meta(name = "Stefano Bossi", content = "PLC Web Analysis GUI")
@Push(value = PushMode.MANUAL, transport = Transport.WEBSOCKET_XHR)
@Theme(value = Lumo.class, variant = Lumo.DARK)
@CssImport("./styles/main.css")
public class AppShell implements AppShellConfigurator {
...
...
}

This is really strange to me....

Regards, S.

TomaszPadzik commented 3 years ago

Yes, exactly the same in my app. In development mode works ok in production doesn't work.

`@Theme(CustomTheme.class) public class AppShell implements AppShellConfigurator { ...

}` I'll try the same, thanks for the hint Regards

Haprog commented 3 years ago

Perfect, thank you :) I'll leave this bug open and await the resolution of the upstream

I don't think there's an issue upstream. Afaik this issue does not happen with Maven.

To me it looks like the issue is only caused by vaadin-gradle-plugin. raw-loader was only used by the webpack.generated.js (which I think in this case is generated by the gradle plugin?) so I think the issue is that gradle plugin is building frontend with outdated code and dependencies (when trying to use it with Vaadin 18+).

mvysny commented 3 years ago

Unfortunately the Vaadin Gradle plugin doesn't currently support Vaadin 18+ fully. However, we're working on an official support for Vaadin 20+ (and also possibly Vaadin 19) - please follow the progress at #100 . I'll therefore close this issue; once the new plugin is released, please migrate your project to Vaadin 19 and please try again.

vaadin / vaadin-gradle-plugin

Style not loaded #103