Cannot find module '#vaadin/flow-frontend/Flow' - vaadin

Question

Vaadin suddenly stops to build my library with the following error. I already did the Vaadin dance (and a lot of more stuff) but I'm running out of ideas now. I try to build the library for production (but it also fails for dev).
I'm using Vaadin Flow. The issue tracker on Github redirected here for general community help - so I hope anyone has an idea how to solve this problem or what else I can try.
> Task vaadinBuildFrontend FAILED
FAILURE: Build failed with an exception.
* What went wrong:
Execution failed for task 'vaadinBuildFrontend'.
> Webpack process exited with non-zero exit code.
Stderr: 'Hash: e1a6ace26ca6df86c87b
Version: webpack 4.46.0
Time: 6054ms
Built at: 12/22/2021 7:13:38 PM
Asset Size Chunks Chunk Names
VAADIN/build/vaadin-1-8595bda5c7958e210407.cache.js 894 KiB 1 [immutable]
VAADIN/build/vaadin-2-d5ce16eeb5d943cfe059.cache.js 284 KiB 2 [immutable]
VAADIN/build/vaadin-3-7d2fe309de5248ed4c09.cache.js 48.7 KiB 3 [immutable]
VAADIN/build/vaadin-4-2758512dfda3ea8392cc.cache.js 1.05 KiB 4 [immutable]
Entrypoint bundle =
[0] ./generated/vaadin.ts + 2 modules 91.2 KiB {0} [built]
| ./generated/vaadin.ts 18 bytes [built]
| ./generated/index.ts 337 bytes [built]
| ../node_modules/.pnpm/#vaadin/router#1.7.4/node_modules/#vaadin/router/dist/vaadin-router.js 90.9 KiB [built]
[1] ../node_modules/.pnpm/#vaadin/vaadin-themable-mixin#22.0.1/node_modules/#vaadin/vaadin-themable-mixin/vaadin-themable-mixin.js 7.07 KiB {2} [built]
[3] ../node_modules/.pnpm/lit#2.0.0/node_modules/lit/index.js + 3 modules 8.83 KiB {2} [built]
| ../node_modules/.pnpm/lit#2.0.0/node_modules/lit/index.js 122 bytes [built]
| ../node_modules/.pnpm/#lit/reactive-element#1.0.2/node_modules/#lit/reactive-element/reactive-element.js 5.89 KiB [built]
| ../node_modules/.pnpm/lit-element#3.0.2/node_modules/lit-element/lit-element.js 1.35 KiB [built]
| ../node_modules/.pnpm/#lit/reactive-element#1.0.2/node_modules/#lit/reactive-element/css-tag.js 1.46 KiB [built]
[4] ../node_modules/.pnpm/#vaadin/vaadin-lumo-styles#22.0.1/node_modules/#vaadin/vaadin-lumo-styles/spacing.js 1.42 KiB {2} [built]
[5] ../node_modules/.pnpm/#vaadin/vaadin-lumo-styles#22.0.1/node_modules/#vaadin/vaadin-lumo-styles/color.js 6.82 KiB {2} [built]
[6] ../node_modules/.pnpm/#vaadin/vaadin-lumo-styles#22.0.1/node_modules/#vaadin/vaadin-lumo-styles/style.js 1.38 KiB {2} [built]
[8] ../node_modules/.pnpm/#vaadin/vaadin-lumo-styles#22.0.1/node_modules/#vaadin/vaadin-lumo-styles/sizing.js 829 bytes {2} [built]
[9] ../node_modules/.pnpm/#vaadin/vaadin-lumo-styles#22.0.1/node_modules/#vaadin/vaadin-lumo-styles/typography.js 2.99 KiB {2} [built]
[27] ../node_modules/.pnpm/#vaadin/vaadin-lumo-styles#22.0.1/node_modules/#vaadin/vaadin-lumo-styles/version.js 313 bytes {2} [built]
[43] ../node_modules/.pnpm/#vaadin/button#22.0.1/node_modules/#vaadin/button/theme/lumo/vaadin-button.js 73 bytes {1} [built]
[80] ../node_modules/.pnpm/#vaadin/vaadin-lumo-styles#22.0.1/node_modules/#vaadin/vaadin-lumo-styles/icons.js + 2 modules 31.5 KiB {2} [built]
| ../node_modules/.pnpm/#vaadin/vaadin-lumo-styles#22.0.1/node_modules/#vaadin/vaadin-lumo-styles/icons.js 276 bytes [built]
| ../node_modules/.pnpm/#vaadin/vaadin-lumo-styles#22.0.1/node_modules/#vaadin/vaadin-lumo-styles/iconset.js 15.5 KiB [built]
| ../node_modules/.pnpm/#vaadin/vaadin-lumo-styles#22.0.1/node_modules/#vaadin/vaadin-lumo-styles/vaadin-iconset.js 15.7 KiB [built]
[188] ../node_modules/.pnpm/#vaadin/common-frontend#0.0.17_lit#2.0.0/node_modules/#vaadin/common-frontend/ConnectionIndicator.js + 14 modules 35.9 KiB {2} [built]
| ../node_modules/.pnpm/#vaadin/common-frontend#0.0.17_lit#2.0.0/node_modules/#vaadin/common-frontend/ConnectionIndicator.js 14.3 KiB [built]
| ../node_modules/.pnpm/tslib#2.3.1/node_modules/tslib/tslib.es6.js 11.5 KiB [built]
| ../node_modules/.pnpm/lit#2.0.0/node_modules/lit/decorators.js 525 bytes [built]
| ../node_modules/.pnpm/lit#2.0.0/node_modules/lit/directives/class-map.js 85 bytes [built]
| ../node_modules/.pnpm/#vaadin/common-frontend#0.0.17_lit#2.0.0/node_modules/#vaadin/common-frontend/ConnectionState.js 4.36 KiB [built]
| ../node_modules/.pnpm/#lit/reactive-element#1.0.2/node_modules/#lit/reactive-element/decorators/custom-element.js 364 bytes [built]
| ../node_modules/.pnpm/#lit/reactive-element#1.0.2/node_modules/#lit/reactive-element/decorators/property.js 572 bytes [built]
| ../node_modules/.pnpm/#lit/reactive-element#1.0.2/node_modules/#lit/reactive-element/decorators/state.js 225 bytes [built]
| ../node_modules/.pnpm/#lit/reactive-element#1.0.2/node_modules/#lit/reactive-element/decorators/event-options.js 280 bytes [built]
| ../node_modules/.pnpm/#lit/reactive-element#1.0.2/node_modules/#lit/reactive-element/decorators/query.js 612 bytes [built]
| ../node_modules/.pnpm/#lit/reactive-element#1.0.2/node_modules/#lit/reactive-element/decorators/query-all.js 388 bytes [built]
| ../node_modules/.pnpm/#lit/reactive-element#1.0.2/node_modules/#lit/reactive-element/decorators/query-async.js 392 bytes [built]
| ../node_modules/.pnpm/#lit/reactive-element#1.0.2/node_modules/#lit/reactive-element/decorators/query-assigned-nodes.js 603 bytes [built]
| ../node_modules/.pnpm/lit-html#2.0.2/node_modules/lit-html/directives/class-map.js 1.1 KiB [built]
| ../node_modules/.pnpm/#lit/reactive-element#1.0.2/node_modules/#lit/reactive-element/decorators/base.js 666 bytes [built]
[217] ../node_modules/.pnpm/#vaadin/polymer-legacy-adapter#22.0.1/node_modules/#vaadin/polymer-legacy-adapter/style-modules.js + 1 modules 4.38 KiB {2} [built]
| ../node_modules/.pnpm/#vaadin/polymer-legacy-adapter#22.0.1/node_modules/#vaadin/polymer-legacy-adapter/style-modules.js 191 bytes [built]
| ../node_modules/.pnpm/#vaadin/polymer-legacy-adapter#22.0.1/node_modules/#vaadin/polymer-legacy-adapter/src/style-modules.js 4.17 KiB [built]
[222] ../build/frontend/generated-flow-imports-fallback.js + 56 modules 104 KiB {3} [built]
| ../build/frontend/generated-flow-imports-fallback.js 9.98 KiB [built]
| ./basic/variables.css 943 bytes [built]
| ./images/cropper/cropper.css 778 bytes [built]
| ./basic/spacer.css 116 bytes [built]
| ./tab-box/tab-box.css 458 bytes [built]
| ./text/text-area.css 103 bytes [built]
| ./buttons/internal-button.css 104 bytes [built]
| ./layouts/br-app-layout.css 206 bytes [built]
| ./buttons/flat-icon-button.css 242 bytes [built]
| ./modal/raven-modal.css 219 bytes [built]
| ./headings/headings.css 60 bytes [built]
| ./layouts/br-horizontal-layout.css 150 bytes [built]
| ./text/text-line-with-icon.css 182 bytes [built]
| ./input/br-inline-edit.css 159 bytes [built]
| ./buttons/action-button.css 890 bytes [built]
| + 42 hidden modules
[223] ../build/frontend/generated-flow-imports.js + 1 modules 1.72 KiB {4} [built]
| ../build/frontend/generated-flow-imports.js 1.41 KiB [built]
| ../build/flow-frontend/lumo-includes.ts 276 bytes [built]
+ 209 hidden modules
ERROR in ./generated/index.ts
Module not found: Error: Can't resolve '#vaadin/flow-frontend/Flow' in '/XXX/frontend/generated'
# ./generated/index.ts 2:0-50 3:33-37
# ./generated/vaadin.ts
ERROR in chunk bundle [entry]
VAADIN/build/vaadin-bundle-ca5b59ddaf6cebb1e7aa.cache.js
/XXX/node_modules/.pnpm/esbuild-loader#2.15.1_webpack#4.46.0/node_modules/esbuild-loader/dist/index.js??ref--4!/XXX/frontend/generated/vaadin.ts a8f7ce42c2f8c5128bbf70605fdcb37b
Unexpected token (4:33)
|
|
| const { serverSideRoutes } = new !(function webpackMissingModule() { var e = new Error("Cannot find module '#vaadin/flow-frontend/Flow'"); e.code = 'MODULE_NOT_FOUND'; throw e; }())({
| imports: () => Promise.all(/* import() */[__webpack_require__.e(2), __webpack_require__.e(4)]).then(__webpack_require__.bind(null, 223))
| });
ERROR in frontend/generated/index.ts:17:22
TS2307: Cannot find module '#vaadin/flow-frontend/Flow' or its corresponding type declarations.
15 |
16 | // import Flow module to enable navigation to Vaadin server-side views
> 17 | import { Flow } from '#vaadin/flow-frontend/Flow';
| ^^^^^^^^^^^^^^^^^^^^^^^^^^^^
18 |
19 | const { serverSideRoutes } = new Flow({
20 | imports: () => import('../../build/frontend/generated-flow-imports')
Child HtmlWebpackCompiler:
Asset Size Chunks Chunk Names
__child-HtmlWebpackPlugin_0 4.4 KiB 0 HtmlWebpackPlugin_0
Entrypoint HtmlWebpackPlugin_0 = __child-HtmlWebpackPlugin_0
[0] ../node_modules/.pnpm/html-webpack-plugin#4.5.1_webpack#4.46.0/node_modules/html-webpack-plugin/lib/loader.js!./index.html 830 bytes {0} [built]
<i> [build-status] 3 errors and 0 warnings were reported.
<i> [build-status] : Failed to compile.
'
// Edit 1
I already tried all of this (in this order):
rm -rf ~/.pnpm-store ~/.vaadin
rm -rf package.json pnpm-lock.json pnpmfile.json tsconfig.json webpack.config.js webpack.generated.js .npmrc frontend/generated/ frontend/index.html build/ target/ node_modules pnpm-lock.yaml pnpmfile.js types.d.ts
./gradlew vaadinClean && ./gradlew vaadinPrepareFrontend && ./gradlew vaadinBuildFrontend

Answer 1

I had the same problem migrating from V21 to V22. I fixed it by deleting the target folder (and generated files in the root folder like tsconfig etc) and rebuilding again. Worked perfectly afterwards with no further problems. My suspicion was something stayed in the target folder from V21 and confused the build.

Answer 2

I found the solution by rebuilding step by step the production and testing where it failed.
TL;DR: include dependency com.vaadin:flow-client if you don't use com.vaadin:vaadin-core
As I stated, I try to build a Vaadin library (to share components across different nodes). Therefor, I didn't include the dependency com.vaadin:vaadin-core but the dependencies I actually needed (also to avoid version conflicts of transitive dependencies).
For some reason (probably due to upgrading the Vaadin version), I now also need the dependency com.vaadin:flow-client. Without this specific dependency the above mentioned error can be reproduced.