flow icon indicating copy to clipboard operation
flow copied to clipboard

Frontend compiled twice on startup with Vaadin 23

Open Artur- opened this issue 3 years ago • 3 comments

vaadin init --pre v21-test
cd v21-test
mvn

Output is

...
2021-06-10 16:13:19.832  INFO 9304 --- [nPool-worker-19] c.v.flow.server.frontend.FrontendTools   : using '/usr/local/bin/npx --yes --quiet pnpm@5' for frontend package installation
2021-06-10 16:13:35.624  INFO 9304 --- [nPool-worker-19] c.v.f.s.frontend.TaskUpdatePackages      : Frontend dependencies resolved successfully.
2021-06-10 16:13:35.627  INFO 9304 --- [nPool-worker-19] c.v.f.s.frontend.TaskCopyFrontendFiles   : Copying frontend resources from jar files ...
2021-06-10 16:13:35.698  INFO 9304 --- [nPool-worker-19] c.v.f.s.frontend.TaskCopyFrontendFiles   : Visited 17 resources. Took 70 ms.
2021-06-10 16:13:35.755  INFO 9304 --- [nPool-worker-19] c.v.base.devserver.DevModeHandlerImpl    : Starting webpack-dev-server

------------------ Starting Frontend compilation. ------------------
2021-06-10 16:13:36.966  INFO 9304 --- [nPool-worker-19] c.v.base.devserver.DevModeHandlerImpl    : Running webpack to compile frontend resources. This may take a moment, please stand by...
(node:9350) [DEP0111] DeprecationWarning: Access to process.binding('http_parser') is deprecated.
(Use `node --trace-deprecation ...` to show where the warning was created)
ℹ 「wds」: Project is running at http://localhost:50550/webpack-dev-server/
ℹ 「wds」: webpack output is served from /
ℹ 「wds」: Content not from webpack is served from /Users/artur/tmp/v21-test/target/META-INF/VAADIN/webapp, src/main/webapp
<i> [FlowIdPlugin] Serving the 'stats.json' file dynamically.
ℹ 「wdm」: Hash: 273eccde449d27d203e0
Version: webpack 4.46.0
Time: 9218ms
Built at: 06/10/2021 4:13:50 PM
                                                         Asset       Size        Chunks                                Chunk Names
           VAADIN/build/vaadin-0-ec8a36bd909a6fc3dbe0.cache.js     16 MiB             0  [emitted] [immutable]  [big]  
           VAADIN/build/vaadin-1-4cc757a7b2605639ed77.cache.js    498 KiB             1  [emitted] [immutable]         
           VAADIN/build/vaadin-2-25cd85c3b420560f3de5.cache.js   21.7 KiB             2  [emitted] [immutable]         
           VAADIN/build/vaadin-3-37ae9533f59be621c75c.cache.js    334 KiB             3  [emitted] [immutable]         
      VAADIN/build/vaadin-bundle-2713cb5e5fe782688e9a.cache.js    883 KiB        bundle  [emitted] [immutable]         bundle
VAADIN/build/vaadin-devmodeGizmo-41127554f49b72849b28.cache.js    187 KiB  devmodeGizmo  [emitted] [immutable]         devmodeGizmo
                                                    index.html   1.03 KiB                [emitted]                     
                                                 manifest.json  662 bytes                [emitted]                     
                                                         sw.js    749 KiB                [emitted]                     
Entrypoint bundle = VAADIN/build/vaadin-bundle-2713cb5e5fe782688e9a.cache.js
Entrypoint devmodeGizmo = VAADIN/build/vaadin-devmodeGizmo-41127554f49b72849b28.cache.js
[../node_modules/.pnpm/@lit/[email protected]/node_modules/@lit/reactive-element/decorators/custom-element.js] 364 bytes {bundle} {devmodeGizmo} [built]
[../node_modules/.pnpm/@lit/[email protected]/node_modules/@lit/reactive-element/decorators/event-options.js] 280 bytes {bundle} {devmodeGizmo} [built]
[../node_modules/.pnpm/@lit/[email protected]/node_modules/@lit/reactive-element/decorators/property.js] 572 bytes {bundle} {devmodeGizmo} [built]
[../node_modules/.pnpm/@lit/[email protected]/node_modules/@lit/reactive-element/decorators/query-all.js] 358 bytes {bundle} {devmodeGizmo} [built]
[../node_modules/.pnpm/@lit/[email protected]/node_modules/@lit/reactive-element/decorators/query-assigned-nodes.js] 674 bytes {bundle} {devmodeGizmo} [built]
[../node_modules/.pnpm/@lit/[email protected]/node_modules/@lit/reactive-element/decorators/query-async.js] 392 bytes {bundle} {devmodeGizmo} [built]
[../node_modules/.pnpm/@lit/[email protected]/node_modules/@lit/reactive-element/decorators/query.js] 548 bytes {bundle} {devmodeGizmo} [built]
[../node_modules/.pnpm/@lit/[email protected]/node_modules/@lit/reactive-element/decorators/state.js] 238 bytes {bundle} {devmodeGizmo} [built]
[../node_modules/.pnpm/@lit/[email protected]/node_modules/@lit/reactive-element/reactive-element.js] 5.91 KiB {bundle} {devmodeGizmo} [built]
[../node_modules/.pnpm/[email protected]/node_modules/lit/decorators.js] 525 bytes {bundle} {devmodeGizmo} [built]
[../node_modules/.pnpm/[email protected]/node_modules/lit/index.js] 122 bytes {bundle} {devmodeGizmo} [built]
[../target/flow-frontend/VaadinDevmodeGizmo.js] 36.6 KiB {devmodeGizmo} [built]
[../target/index.ts] 1.43 KiB {bundle} [built]
[./generated/theme.js] 112 bytes {bundle} [built]
[./generated/vaadin.ts] 89 bytes {bundle} [built]
    + 610 hidden modules

LOG from InjectManifest
<i> The service worker at sw.js will precache
<i>         7 URLs, totaling 18.8 MB.
Child HtmlWebpackCompiler:
     1 asset
    Entrypoint HtmlWebpackPlugin_0 = __child-HtmlWebpackPlugin_0
    [../node_modules/.pnpm/[email protected][email protected]/node_modules/html-webpack-plugin/lib/loader.js!../target/index.html] 1.14 KiB {HtmlWebpackPlugin_0} [built]
Child InjectManifest:
     1 asset
    Entrypoint InjectManifest = sw.js
    [../node_modules/.pnpm/[email protected]/node_modules/workbox-core/_private.js] 1.54 KiB {InjectManifest} [built]
    [../node_modules/.pnpm/[email protected]/node_modules/workbox-core/_version.js] 89 bytes {InjectManifest} [built]
    [../node_modules/.pnpm/[email protected]/node_modules/workbox-core/cacheNames.js] 1.25 KiB {InjectManifest} [built]
    [../node_modules/.pnpm/[email protected]/node_modules/workbox-core/clientsClaim.js] 513 bytes {InjectManifest} [built]
    [../node_modules/.pnpm/[email protected]/node_modules/workbox-core/copyResponse.js] 2.4 KiB {InjectManifest} [built]
    [../node_modules/.pnpm/[email protected]/node_modules/workbox-core/index.js] 935 bytes {InjectManifest} [built]
    [../node_modules/.pnpm/[email protected]/node_modules/workbox-core/index.mjs] 27 bytes {InjectManifest} [built]
    [../node_modules/.pnpm/[email protected]/node_modules/workbox-core/registerQuotaErrorCallback.js] 1.01 KiB {InjectManifest} [built]
    [../node_modules/.pnpm/[email protected]/node_modules/workbox-precaching/index.js] 1.51 KiB {InjectManifest} [built]
    [../node_modules/.pnpm/[email protected]/node_modules/workbox-precaching/index.mjs] 27 bytes {InjectManifest} [built]
    [../node_modules/.pnpm/[email protected]/node_modules/workbox-routing/index.js] 695 bytes {InjectManifest} [built]
    [../node_modules/.pnpm/[email protected]/node_modules/workbox-routing/index.mjs] 27 bytes {InjectManifest} [built]
    [../node_modules/.pnpm/[email protected]/node_modules/workbox-strategies/index.js] 862 bytes {InjectManifest} [built]
    [../node_modules/.pnpm/[email protected]/node_modules/workbox-strategies/index.mjs] 27 bytes {InjectManifest} [built]
    [../target/sw.ts] 3.03 KiB {InjectManifest} [built]
        + 78 hidden modules
ℹ 「wdm」: Compiled successfully.

----------------- Frontend compiled successfully. -----------------

2021-06-10 16:13:51.410  INFO 9304 --- [nPool-worker-19] c.v.base.devserver.DevModeHandlerImpl    : Started webpack-dev-server. Time: 15654ms
No issues found.
ℹ 「wdm」: Compiling...
ℹ 「wdm」: wait until bundle finished: /manifest.json
<i> [FlowIdPlugin] Serving the 'stats.json' file dynamically.
⚠ 「wdm」: Hash: 273eccde449d27d203e0
Version: webpack 4.46.0
Time: 396ms
Built at: 06/10/2021 4:13:51 PM
        Asset       Size  Chunks             Chunk Names
   index.html   1.03 KiB          [emitted]  
manifest.json  662 bytes          [emitted]  
        sw.js    749 KiB          [emitted]  
 + 6 hidden assets
Entrypoint bundle = VAADIN/build/vaadin-bundle-2713cb5e5fe782688e9a.cache.js
Entrypoint devmodeGizmo = VAADIN/build/vaadin-devmodeGizmo-41127554f49b72849b28.cache.js
[./generated/theme-v21-test.generated.js] 3.57 KiB {bundle} [built]
    + 619 hidden modules

LOG from InjectManifest
<i> The service worker at sw.js will precache
<i>         7 URLs, totaling 18.8 MB.

WARNING in InjectManifest has been called multiple times, perhaps due to running webpack in --watch mode. The precache manifest generated after the first call may be inaccurate! Please see https://github.com/GoogleChrome/workbox/issues/1790 for more information.
Child HtmlWebpackCompiler:
     1 asset
    Entrypoint HtmlWebpackPlugin_0 = __child-HtmlWebpackPlugin_0
       1 module
Child InjectManifest:
     1 asset
    Entrypoint InjectManifest = sw.js
       93 modules
ℹ 「wdm」: Compiled with warnings.

----------------- Frontend compiled successfully. -----------------

No issues found.
2021-06-10 16:13:54.640  INFO 9304 --- [nio-8080-exec-1] o.a.c.c.C.[Tomcat].[localhost].[/]       : Initializing Spring DispatcherServlet 'dispatcherServlet'
2021-06-10 16:13:54.640  INFO 9304 --- [nio-8080-exec-1] o.s.web.servlet.DispatcherServlet        : Initializing Servlet 'dispatcherServlet'
2021-06-10 16:13:54.642  INFO 9304 --- [nio-8080-exec-1] o.s.web.servlet.DispatcherServlet        : Completed initialization in 2 ms
2021-06-10 16:13:54.768  INFO 9304 --- [nio-8080-exec-1] c.vaadin.flow.spring.SpringInstantiator  : The number of beans implementing 'I18NProvider' is 0. Cannot use Spring beans for I18N, falling back to the default behavior

Expected: One ----------------- Frontend compiled successfully. -----------------

Actual: Two ----------------- Frontend compiled successfully. -----------------

Vaadin 21 alpha 4

Artur- avatar Jun 10 '21 13:06 Artur-

I've seen this behavior in V19 and V20 apps as well. (haven't tested V18 and below)

Edit: found your old ticket with the same error in V19 https://github.com/vaadin/flow/issues/10083

knoobie avatar Jun 11 '21 09:06 knoobie

I can reproduce this.

denis-anisimov avatar Jun 21 '21 07:06 denis-anisimov

This is a theming issue. The second compilation is caused by the regenerated file ./generated/theme-v21-test.generated.js. The code is inside theme-handle.js, application-theme-plugin for webpack. Every time when some frontend file is changed or the webpack dev server is initially started the theme file theme-v21-test.generated.js is regenerated which causes webpack additional compilation round.

I don't know any details of theming impl, so put this ticket back.

denis-anisimov avatar Jun 21 '21 11:06 denis-anisimov

No longer happens in 23.3

Artur- avatar Jan 18 '23 12:01 Artur-