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

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/[email protected]/node_modules/@vaadin/router/dist/vaadin-router.js 90.9 KiB [built]
    [1] ../node_modules/.pnpm/@vaadin/[email protected]/node_modules/@vaadin/vaadin-themable-mixin/vaadin-themable-mixin.js 7.07 KiB {2} [built]
    [3] ../node_modules/.pnpm/[email protected]/node_modules/lit/index.js + 3 modules 8.83 KiB {2} [built]
        | ../node_modules/.pnpm/[email protected]/node_modules/lit/index.js 122 bytes [built]
        | ../node_modules/.pnpm/@lit/[email protected]/node_modules/@lit/reactive-element/reactive-element.js 5.89 KiB [built]
        | ../node_modules/.pnpm/[email protected]/node_modules/lit-element/lit-element.js 1.35 KiB [built]
        | ../node_modules/.pnpm/@lit/[email protected]/node_modules/@lit/reactive-element/css-tag.js 1.46 KiB [built]
    [4] ../node_modules/.pnpm/@vaadin/[email protected]/node_modules/@vaadin/vaadin-lumo-styles/spacing.js 1.42 KiB {2} [built]
    [5] ../node_modules/.pnpm/@vaadin/[email protected]/node_modules/@vaadin/vaadin-lumo-styles/color.js 6.82 KiB {2} [built]
    [6] ../node_modules/.pnpm/@vaadin/[email protected]/node_modules/@vaadin/vaadin-lumo-styles/style.js 1.38 KiB {2} [built]
    [8] ../node_modules/.pnpm/@vaadin/[email protected]/node_modules/@vaadin/vaadin-lumo-styles/sizing.js 829 bytes {2} [built]
    [9] ../node_modules/.pnpm/@vaadin/[email protected]/node_modules/@vaadin/vaadin-lumo-styles/typography.js 2.99 KiB {2} [built]
   [27] ../node_modules/.pnpm/@vaadin/[email protected]/node_modules/@vaadin/vaadin-lumo-styles/version.js 313 bytes {2} [built]
   [43] ../node_modules/.pnpm/@vaadin/[email protected]/node_modules/@vaadin/button/theme/lumo/vaadin-button.js 73 bytes {1} [built]
   [80] ../node_modules/.pnpm/@vaadin/[email protected]/node_modules/@vaadin/vaadin-lumo-styles/icons.js + 2 modules 31.5 KiB {2} [built]
        | ../node_modules/.pnpm/@vaadin/[email protected]/node_modules/@vaadin/vaadin-lumo-styles/icons.js 276 bytes [built]
        | ../node_modules/.pnpm/@vaadin/[email protected]/node_modules/@vaadin/vaadin-lumo-styles/iconset.js 15.5 KiB [built]
        | ../node_modules/.pnpm/@vaadin/[email protected]/node_modules/@vaadin/vaadin-lumo-styles/vaadin-iconset.js 15.7 KiB [built]
  [188] ../node_modules/.pnpm/@vaadin/[email protected][email protected]/node_modules/@vaadin/common-frontend/ConnectionIndicator.js + 14 modules 35.9 KiB {2} [built]
        | ../node_modules/.pnpm/@vaadin/[email protected][email protected]/node_modules/@vaadin/common-frontend/ConnectionIndicator.js 14.3 KiB [built]
        | ../node_modules/.pnpm/[email protected]/node_modules/tslib/tslib.es6.js 11.5 KiB [built]
        | ../node_modules/.pnpm/[email protected]/node_modules/lit/decorators.js 525 bytes [built]
        | ../node_modules/.pnpm/[email protected]/node_modules/lit/directives/class-map.js 85 bytes [built]
        | ../node_modules/.pnpm/@vaadin/[email protected][email protected]/node_modules/@vaadin/common-frontend/ConnectionState.js 4.36 KiB [built]
        | ../node_modules/.pnpm/@lit/[email protected]/node_modules/@lit/reactive-element/decorators/custom-element.js 364 bytes [built]
        | ../node_modules/.pnpm/@lit/[email protected]/node_modules/@lit/reactive-element/decorators/property.js 572 bytes [built]
        | ../node_modules/.pnpm/@lit/[email protected]/node_modules/@lit/reactive-element/decorators/state.js 225 bytes [built]
        | ../node_modules/.pnpm/@lit/[email protected]/node_modules/@lit/reactive-element/decorators/event-options.js 280 bytes [built]
        | ../node_modules/.pnpm/@lit/[email protected]/node_modules/@lit/reactive-element/decorators/query.js 612 bytes [built]
        | ../node_modules/.pnpm/@lit/[email protected]/node_modules/@lit/reactive-element/decorators/query-all.js 388 bytes [built]
        | ../node_modules/.pnpm/@lit/[email protected]/node_modules/@lit/reactive-element/decorators/query-async.js 392 bytes [built]
        | ../node_modules/.pnpm/@lit/[email protected]/node_modules/@lit/reactive-element/decorators/query-assigned-nodes.js 603 bytes [built]
        | ../node_modules/.pnpm/[email protected]/node_modules/lit-html/directives/class-map.js 1.1 KiB [built]
        | ../node_modules/.pnpm/@lit/[email protected]/node_modules/@lit/reactive-element/decorators/base.js 666 bytes [built]
  [217] ../node_modules/.pnpm/@vaadin/[email protected]/node_modules/@vaadin/polymer-legacy-adapter/style-modules.js + 1 modules 4.38 KiB {2} [built]
        | ../node_modules/.pnpm/@vaadin/[email protected]/node_modules/@vaadin/polymer-legacy-adapter/style-modules.js 191 bytes [built]
        | ../node_modules/.pnpm/@vaadin/[email protected]/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/[email protected][email protected]/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/[email protected][email protected]/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 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.

Answer 2

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.